Data-theme global setting not work #52
Comments
|
Nice find, does this also happen with the newer toggle switch light / dark mode SwitchColorMode.js? |
|
Tested with old and new js. Edit: Firefox console got error (js loaded ok): |
|
make sure you have the following where you'd like the switch to be: <label>
<input aria-label="Toggle Light or Dark Mode" name="color-mode-toggle" value="1" type="checkbox" role="switch">
</label> |
|
Tried that. Not respect global theme setting and nothing happens in selector. No errors in console! <!--PICO Top bar Hamburger NAV ALKAA-->
<nav class="container-fluid" role="navigation" data-position="end" data-breakpoint="xl">
<!--PICO Top bar Hamburger Menu ALKAA-->
<!--PICO Top bar Hamburger Menu OUTER-->
<input type="checkbox" id="hamburger">
<label for="hamburger" style="font-size: calc(var(--pico-font-size) * 2);" aria-label="Menu" aria-controls="top-nav">≡</label>
<ul id="top-nav" role="list">
<!--PICO Top bar Hamburger Menu row-->
<li role="listitem"><a href="[/](view-source:https://pico.local/)" >Pico CSS</a></li>
<!--PICO Top bar Hamburger Menu row-->
<li role="listitem">
<details class="dropdown">
<summary>Alasivu 1</summary>
<ul>
<li><a href="[alasivu-1/](view-source:https://pico.local/alasivu-1/)" >Alasivu 1</a>
<!--PICO Top bar Hamburger Menu INNER -->
<!--PICO Top bar Hamburger Menu INNER row-->
<li><a href="[alasivu-1/alasivu-1-2.html](view-source:https://pico.local/alasivu-1/alasivu-1-2.html)" >Alasivu 1-2</a></li>
</ul>
</details>
</li>
<!--PICO Top bar Hamburger Menu row-->
<li role="listitem">
<details class="dropdown">
<summary>Alasivu 2</summary>
<ul>
<li><a href="[alasivu-2/](view-source:https://pico.local/alasivu-2/)" >Alasivu 2</a>
<!--PICO Top bar Hamburger Menu INNER -->
<!--PICO Top bar Hamburger Menu INNER row-->
<li><a href="[alasivu-2/alasivu-2-1.html](view-source:https://pico.local/alasivu-2/alasivu-2-1.html)" >Alasivu 2-1</a></li>
</ul>
</details>
</li>
</ul>
<!--PICO Top bar Hamburger Menu LOPPUU-->
<!--PICO Top bar Search and Theme switch ALKAA-->
<label>
<input aria-label="Toggle Light or Dark Mode" name="color-mode-toggle" value="1" type="checkbox" role="switch">
</label>
<ul>
<details class="dropdown">
<summary>Teema</summary>
<ul dir="rtl">
<li><a href="[#](view-source:https://pico.local/#)" data-theme-switcher="auto">Järjestelmän</a></li>
<li><a href="[#](view-source:https://pico.local/#)" data-theme-switcher="light">Vaalea</a></li>
<li><a href="[#](view-source:https://pico.local/#)" data-theme-switcher="dark">Tumma</a></li>
</ul>
</details>
<li>
<form role="search" action="[hakutulokset.html](view-source:https://pico.local/hakutulokset.html)" method="get">
<input name="search" type="search" value="" placeholder="Hae">
<input type="hidden" name="id" value="12">
<input type="submit" value="Hae">
</form>
</li>
<li>
</ul>
<!--PICO Top bar Search and Theme switch LOPPUU-->
</nav>
<!--PICO Top bar Hamburger NAV LOPPUU--> |
|
I got switcher working when I commented out that original drop down switcher. Find it out from Preview page source code. |
I have global setting
<html lang="fi" data-theme="dark">in template. Page renders out light theme. Theme switcher works like it should at least when selecting dark theme, not tested OS theme setting.EDIT: Turned off Theme swicther (html and js) and theme is now dark! So this might be js issue in minimal-theme-switcher.js?
Expected Behavior
Whole page except elements that are point to light theme should be dark.
Environment
Windows 10, Laragon (devserver), Modx, Firefox.
The text was updated successfully, but these errors were encountered: