Merge pull request #11589 from mateuszkulapl/dark-mode-improvements

apply user-selected light/dark mode to form elements (checkboxes, date picker) #8613 #7620

resources/views/layout/default.twig

@@ -11,8 +11,6 @@
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <meta name="robots" content="noindex, nofollow, noarchive, noodp, NoImageIndex, noydir">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="color-scheme" content="light dark">
-
     <title>
         {% if pageTitle %}
             {{ pageTitle }} »
@@ -39,6 +37,7 @@
     <link href="v1/lib/adminlte/css/AdminLTE.min.css?v={{ FF_BUILD_TIME }}" rel="stylesheet" type="text/css"
           nonce="{{ JS_NONCE }}">
     {% if 'browser' == darkMode %}
+        <meta name="color-scheme" content="light dark">
         <script nonce="{{ JS_NONCE }}">
             // If `prefers-color-scheme` is not supported, fall back to light mode.
             // In this case, light.css will be downloaded with `highest` priority.
@@ -58,12 +57,14 @@
               nonce="{{ JS_NONCE }}" media="(prefers-color-scheme: light)">
     {% endif %}
     {% if 'dark' == darkMode %}
+        <meta name="color-scheme" content="dark">
         <link href="v1/css/daterangepicker-dark.css?v={{ FF_BUILD_TIME }}" rel="stylesheet" type="text/css"
               nonce="{{ JS_NONCE }}">
         <link href="v1/lib/adminlte/css/skins/skin-dark.min.css?v={{ FF_BUILD_TIME }}" rel="stylesheet" type="text/css"
               nonce="{{ JS_NONCE }}">
     {% endif %}
     {% if 'light' == darkMode %}
+        <meta name="color-scheme" content="light">
         <link href="v1/css/daterangepicker-light.css?v={{ FF_BUILD_TIME }}" rel="stylesheet" type="text/css"
               nonce="{{ JS_NONCE }}">
         <link href="v1/lib/adminlte/css/skins/skin-light.min.css?v={{ FF_BUILD_TIME }}" rel="stylesheet" type="text/css"

resources/views/layout/empty.twig

@@ -9,7 +9,6 @@
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="color-scheme" content="light dark">
 
     {# CSS things #}
 
@@ -20,6 +19,7 @@
     {# the theme #}
     <link href="v1/lib/adminlte/css/AdminLTE.min.css?v={{ FF_BUILD_TIME }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
     {% if 'browser' == darkMode %}
+        <meta name="color-scheme" content="light dark">
         <script nonce="{{ JS_NONCE }}">
             // If `prefers-color-scheme` is not supported, fall back to light mode.
             // In this case, light.css will be downloaded with `highest` priority.
@@ -35,9 +35,11 @@
         <link href="v1/lib/adminlte/css/skins/skin-light.min.css?v={{ FF_BUILD_TIME }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}" media="(prefers-color-scheme: light)">
     {% endif %}
     {% if 'dark' == darkMode %}
+        <meta name="color-scheme" content="dark">
         <link href="v1/lib/adminlte/css/skins/skin-dark.min.css?v={{ FF_BUILD_TIME }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
     {% endif %}
     {% if 'light' == darkMode %}
+        <meta name="color-scheme" content="light">
         <link href="v1/lib/adminlte/css/skins/skin-light.min.css?v={{ FF_BUILD_TIME }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
     {% endif %}
 

resources/views/layout/guest.twig

@@ -5,8 +5,6 @@
     <meta charset="UTF-8">
     <meta name="robots" content="noindex, nofollow, noarchive, noodp, NoImageIndex, noydir">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="color-scheme" content="light dark">
-
     <title>Firefly III
 
         {% if title != "Firefly" and title != "" %}
@@ -30,6 +28,7 @@
     {# the theme #}
     <link href="v1/lib/adminlte/css/AdminLTE.min.css?v={{ FF_BUILD_TIME }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
     {% if 'browser' == darkMode %}
+        <meta name="color-scheme" content="light dark">
         <script nonce="{{ JS_NONCE }}">
             // If `prefers-color-scheme` is not supported, fall back to light mode.
             // In this case, light.css will be downloaded with `highest` priority.
@@ -45,9 +44,11 @@
         <link href="v1/lib/adminlte/css/skins/skin-light.min.css?v={{ FF_BUILD_TIME }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}" media="(prefers-color-scheme: light)">
     {% endif %}
     {% if 'dark' == darkMode %}
+        <meta name="color-scheme" content="dark">
         <link href="v1/lib/adminlte/css/skins/skin-dark.min.css?v={{ FF_BUILD_TIME }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
     {% endif %}
     {% if 'light' == darkMode %}
+        <meta name="color-scheme" content="light">
         <link href="v1/lib/adminlte/css/skins/skin-light.min.css?v={{ FF_BUILD_TIME }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
     {% endif %}