Merge pull request #94 from sumocoders/bugfix-theme

theme.current → theme()

Author: Sander

docs/frontend/dark-mode.md

@@ -1,7 +1,7 @@
 # Dark mode
 
-On page load we load the correct theme stylesheet in `templates/head.html.twig` based on the variable `theme.current`.
-We also use that variable to show the correct logo in `templates/navigation.html.twig`.
+On page load we load the correct theme stylesheet in `templates/head.html.twig` based on the result of the `theme()` 
+twig function. We also use that variable to show the correct logo in `templates/navigation.html.twig`.
 
 First time on the application we show the theme based on the users OS preferences.
 Later when the user uses the theme switcher in the navigation, we set a cookie with the theme chosen in Javascript.
@@ -10,7 +10,7 @@ Later when the user uses the theme switcher in the navigation, we set a cookie w
 ## Disabled dark mode
 
 - Remove the import of `Theme` from `imports.js`
-- Remove all `theme.current` if statements and remove the dark mode code.
+- Remove all `theme()` if statements and remove the dark mode code.
     - Remove dark mode logo and if statements on the light mode logo in `templates/navigation.html.twig`
     - Remove dark mode `encore_entry_link_tags` and if statement around it in `templates/head.html.twig`
 - Hide the div with class `.dark-mode-switch` to hide the dark mode toggle.

templates/user.html.twig

@@ -6,7 +6,7 @@
 
 <div class="d-flex justify-content-end mt-3 me-3">
   <div class="form-check dark-mode-switch" data-theme-toggler-wrapper>
-    <input type="checkbox" class="form-check-input" id="dark-mode" data-theme-toggler{% if theme.current == 'theme-dark' %} checked="checked"{% endif %}>
+    <input type="checkbox" class="form-check-input" id="dark-mode" data-theme-toggler{% if theme() == 'theme-dark' %} checked="checked"{% endif %}>
     <label class="form-check-label" for="dark-mode">{{ 'core.themes.dark'|trans|ucfirst }} {{ 'core.themes.themes'|trans }}</label>
   </div>
 </div>
@@ -17,8 +17,8 @@
       <div class="card p-4 mt-5">
         <div class="text-center mb-3 py-5 px-sm-4 px-md-5">
           {% block logo_image %}
-            <img class="img-responsive{% if theme.current != 'theme-dark' %} d-none{% endif %}" data-navbar-logo-dark src="{{ asset('build/images/logo-application-dark.svg') }}" alt="{{ fallbacks.get('site_title') }}">
-            <img class="img-responsive{% if theme.current == 'theme-dark' %} d-none{% endif %}" data-navbar-logo src="{{ asset('build/images/logo-application.svg') }}" alt="{{ fallbacks.get('site_title') }}">
+            <img class="img-responsive{% if theme() != 'theme-dark' %} d-none{% endif %}" data-navbar-logo-dark src="{{ asset('build/images/logo-application-dark.svg') }}" alt="{{ fallbacks.get('site_title') }}">
+            <img class="img-responsive{% if theme() == 'theme-dark' %} d-none{% endif %}" data-navbar-logo src="{{ asset('build/images/logo-application.svg') }}" alt="{{ fallbacks.get('site_title') }}">
           {% endblock %}
         </div>
 

templates/usermenu.html.twig

@@ -18,7 +18,7 @@
         <li>
           <div class="dropdown-item">
             <div class="form-check dark-mode-switch" data-theme-toggler-wrapper>
-              <input type="checkbox" class="form-check-input" id="dark-mode{% if mobile %}-mobile{% endif %}" data-theme-toggler{% if theme.current == 'theme-dark' %} checked="checked"{% endif %}>
+              <input type="checkbox" class="form-check-input" id="dark-mode{% if mobile %}-mobile{% endif %}" data-theme-toggler{% if theme() == 'theme-dark' %} checked="checked"{% endif %}>
               <label class="form-check-label" for="dark-mode{% if mobile %}-mobile{% endif %}">{{ 'core.themes.dark'|trans|ucfirst }} {{ 'core.themes.themes'|trans }}</label>
             </div>
           </div>