Switch Dark/Light mode using JS #1653

YousefAlsbaihi · 2023-07-16T05:28:39Z

This will allow users to switch light/dark mode without depending on link query and without reloading the page
This also uses browser storage same as before, just removed and added the js code to switch without reload.

This will allow you to load dark/light theme without reloading the page or depending on the link variables default theme is light and can be changed

Added class switchMode to switch theme

changeset-bot · 2023-07-16T05:28:41Z

⚠️ No Changeset found

Latest commit: 829d00d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2023-07-16T05:28:42Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
tabler	✅ Ready (Inspect)	Visit Preview	Jul 16, 2023 5:30am

mholt · 2023-07-16T19:10:31Z

Neat! Does this also do "auto" (i.e. follow system preference)? Ideally a three-way toggle: light, dark, system. I'm currently hand-rolling an "auto" theme but it's a bit clunky 😅

dheineman · 2023-07-17T14:13:51Z

src/js/demo-theme.js

+selectedTheme = storedTheme ? storedTheme : defaultTheme;
+
+setTheme(selectedTheme)
+$(".switchMode").on('click', function (e) {


Is jQuery actually available here?

The demo-theme.js file is intentionally loaded at the top of the body so as to switch as fast as possible before the dom fully loads but the rest of the javascript is all loaded at the end so i wonder if this will work.

And even if it does work, i think using vanilla JS here to not have the overhead of jQuery loading in might be beneficial.

By the time the user clicks, jQuery is likely loaded... so it works by accident.
But you are right, no reason to use jQuery for a simple click event.

dheineman · 2023-07-17T14:14:47Z

src/js/demo-theme.js

-const themeStorageKey = "tablerTheme"
-const defaultTheme = "light"
-let selectedTheme
+var themeStorageKey = "tablerTheme";


As the themeStorageKey and defaultTheme do not change during the execution of the script they where made const what is the reason you are turning them into vars?

var is like $() ... time to let go 😁 (meaning: use let or const instead).

dheineman · 2023-07-17T14:17:22Z

src/js/demo-theme.js

+ * 
+ * This will allow you to load dark/light theme wihtout reloading the page
+ * and without depending on the link variables 
+ * default theme is light and can be default dark by changing the specified code below


Your new comment is not a substitute for the original.

The reason the original comment is there is to explain why the script is loaded at the top of the body and not what it does. As this reason still applies please leave it intact.

dheineman · 2023-07-17T14:24:42Z

src/js/demo-theme.js


-// https://stackoverflow.com/a/901144
-const params = new Proxy(new URLSearchParams(window.location.search), {


Instead of removing the functionality to switch theme with the url why not have both?

Have the button switch using javascript and leave the url variable intact to allow overriding what is currently set in local storage.

This would be unnecessary, having both of them

kevinpapst · 2023-07-17T20:11:31Z

Theme switching depends highly on how you integrated Tabler. Wasn't JS switching removed on purpose, becuase there were issues with flickering and .. I can't exactly remember what else was the reason.

Also, the Vercel deployment has this error on first click:

mholt · 2023-07-17T20:17:38Z

Wasn't JS switching removed on purpose, becuase there were issues with flickering and .. I can't exactly remember what else was the reason.

Not sure; but typically flickering can be avoided by performing the theme switch in the head or at least before body load.

dheineman · 2023-07-18T07:53:18Z

Wasn't JS switching removed on purpose, becuase there were issues with flickering and .. I can't exactly remember what else was the reason.

It was never javascript switching on the demo page, since implemented in #950 it had been url based switching

Not sure; but typically flickering can be avoided by performing the theme switch in the head or at least before body load.

yup, I resolved the flickering issue in #1176 by loading the theme code in as the first thing in the body.

promatik · 2023-07-21T22:56:07Z

By chance I saw this PR, and let me add I've done this theme switcher for Backpack.

You can test it online; https://demo.backpackforlaravel.com/admin/dashboard
It's a 3-way switcher 👌

If you guys want I can help with this one, let me know.

mholt · 2023-07-21T23:32:14Z

I would love that!

mholt · 2023-07-22T05:15:52Z

@promatik I just noticed though that the theme picker on that demo flashes (starts light, turns dark) when the system is in Dark mode. Think we could do one that doesn't flash? (see above)

promatik · 2023-07-23T22:00:16Z

@mholt that's very strange, at backpack we use the same fix provided by #1176.

First script after the body tag is the ColorMode initializer.

I even check the page's source code to make sure;

Is there any thing else to do that I might be missing?

mholt · 2023-07-24T02:27:15Z

@promatik Hm, I'm not sure. I'm not really a front-end guy. I imagine you need to block painting of elements until some code runs. Maybe the script needs to be in <head> instead?

I asked on Twitter, and got this reply: https://twitter.com/JakeDChampion/status/1683291322466070530

I still can't get the example to work, but in that thread you may find some helpful advice or ideas (or by viewing the page source). I dunno. Worth a look.

mholt · 2023-07-24T03:28:56Z

@promatik Okay, the demo was updated and works for me now, without a flash: https://jakechampion.name/toggle.html

Full code copied here, for reference:

<html name=html id=html><style>
    [data-theme="dark"] .sun-and-moon>.sun-beams {
        opacity: 0
    }

    [data-theme="dark"] .sun-and-moon>.moon>circle {
        transform: translate(-7px)
    }

    [data-theme="dark"] .laptop {
        opacity: 0;
        display: none;
    }
    [data-theme="light"] .laptop {
        opacity: 0;
        display: none;
    }
    [data-theme="system"] .laptop {
        opacity: 1
    }

    [data-theme="system"] .sun-and-moon {
        opacity: 0;
        display: none;
    }
    .theme-toggle {
        background: none;
        border: none;
        padding: 0;
        border-radius: 50%;
        outline-offset: 5px
    }

    [data-theme="dark"] .theme-toggle {
        --icon-fill: hsl(210 10% 70%);
        --icon-fill-hover: hsl(210 15% 90%)
    }

    html {
        block-size: 100%;
        color-scheme: light
    }

    html[data-theme="dark"] {
        color-scheme: dark
    }
    @media (prefers-color-scheme:dark) {
        html[data-theme="system"]  {
            color-scheme: dark;
        }
        .theme-toggle[data-theme="system"]  {
            color: hsl(210 10% 70%);
        }
    }


    body {
        display: grid;
        align-content: center;
        justify-content: center;
        place-content: center
    }
</style>
<script>
    let storageKey = 't'
    let pcsd = `(prefers-color-scheme:dark)`
    let l = localStorage
    let m = matchMedia

    let getColorPreference = () => (l.getItem(storageKey) || (l.setItem(storageKey, 'system'), 'system'))
    let reflectPreference = (v) => html.dataset.theme=v
    let setPreference = (v) => l.setItem(storageKey, reflectPreference(toggle.ariaLabel=v))


    // set early so no page flashes / CSS is made aware
    reflectPreference(getColorPreference())

    onload = () =>
        (// set on load so screen readers can see latest value on the button
        reflectPreference(getColorPreference()),

        // now this script can find and listen for clicks on the control
        // flip current value
        toggle.onclick=() => {
            let a = getColorPreference()
            if (a == 'light') {
                setPreference('system')
            } else if (a == 'dark') {
                setPreference('light')
            } else {
                setPreference('dark')
            }
        })

    // sync with system changes
    m(pcsd).onchange= ({ matches }) => reflectPreference(matches ? 'dark' : 'light')
</script>
<button class="theme-toggle" name=toggle id="toggle" title="Toggles light & dark" aria-label="auto" aria-live="polite">
    <svg width="24" height="24" aria-hidden="true" class="sun-and-moon"><mask id="a" class="moon"><rect width="100%" height="100%" fill="#fff"/><circle cx="24" cy="10" r="6"/></mask><circle cx="12" cy="12" r="6" fill="currentColor" class="sun" mask="url(#a)"/><g stroke="currentColor" class="sun-beams"><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></g></svg>
    <svg class=laptop width="24px" height="24px" ><path d="M4 6C4 4.89543 4.89543 4 6 4H18C19.1046 4 20 4.89543 20 6V14H4V6Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M20 14H4L2.44721 17.1056C1.78231 18.4354 2.7493 20 4.23607 20H19.7639C21.2507 20 22.2177 18.4354 21.5528 17.1056L20 14Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
</button>
</html>

Huge thanks to Jake Champion for crafting this.

See if that approach works! 💯

YousefAlsbaihi · 2023-08-11T21:20:02Z

Neat! Does this also do "auto" (i.e. follow system preference)? Ideally a three-way toggle: light, dark, system. I'm currently hand-rolling an "auto" theme but it's a bit clunky 😅

i can make it soon to work that way

YousefAlsbaihi · 2023-08-11T21:21:52Z

Theme switching depends highly on how you integrated Tabler. Wasn't JS switching removed on purpose, becuase there were issues with flickering and .. I can't exactly remember what else was the reason.

Also, the Vercel deployment has this error on first click:

Can you please elaborate on flickering ?

mholt · 2023-08-11T22:03:32Z

@YousefAlsbaihi I think "flash" might be a better word to describe it. if, for example, the default theme is light, the page loads light for a brief moment and then switches to dark if dark is what is configured. This creates a "flash" effect and it's quite irritating 🙃

mholt · 2024-05-02T22:47:05Z

Aw man :(

YousefAlsbaihi added 2 commits July 15, 2023 22:22

Update demo-theme.js

d475b01

This will allow you to load dark/light theme without reloading the page or depending on the link variables default theme is light and can be changed

Update navbar-side.html

829d00d

Added class switchMode to switch theme

vercel bot deployed to Preview July 16, 2023 05:30 View deployment

dheineman reviewed Jul 17, 2023

View reviewed changes

YousefAlsbaihi closed this by deleting the head repository May 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Switch Dark/Light mode using JS #1653

Switch Dark/Light mode using JS #1653

YousefAlsbaihi commented Jul 16, 2023

changeset-bot bot commented Jul 16, 2023

vercel bot commented Jul 16, 2023 •

edited

mholt commented Jul 16, 2023

dheineman Jul 17, 2023

kevinpapst Jul 17, 2023

dheineman Jul 17, 2023

kevinpapst Jul 17, 2023

dheineman Jul 17, 2023

dheineman Jul 17, 2023

YousefAlsbaihi Aug 11, 2023

kevinpapst commented Jul 17, 2023

mholt commented Jul 17, 2023

dheineman commented Jul 18, 2023

promatik commented Jul 21, 2023

mholt commented Jul 21, 2023

mholt commented Jul 22, 2023

promatik commented Jul 23, 2023

mholt commented Jul 24, 2023

mholt commented Jul 24, 2023

YousefAlsbaihi commented Aug 11, 2023

YousefAlsbaihi commented Aug 11, 2023

mholt commented Aug 11, 2023

mholt commented May 2, 2024


		// https://stackoverflow.com/a/901144
		const params = new Proxy(new URLSearchParams(window.location.search), {

Switch Dark/Light mode using JS #1653

Switch Dark/Light mode using JS #1653

Conversation

YousefAlsbaihi commented Jul 16, 2023

changeset-bot bot commented Jul 16, 2023

⚠️ No Changeset found

vercel bot commented Jul 16, 2023 • edited

mholt commented Jul 16, 2023

dheineman Jul 17, 2023

Choose a reason for hiding this comment

kevinpapst Jul 17, 2023

Choose a reason for hiding this comment

dheineman Jul 17, 2023

Choose a reason for hiding this comment

kevinpapst Jul 17, 2023

Choose a reason for hiding this comment

dheineman Jul 17, 2023

Choose a reason for hiding this comment

dheineman Jul 17, 2023

Choose a reason for hiding this comment

YousefAlsbaihi Aug 11, 2023

Choose a reason for hiding this comment

kevinpapst commented Jul 17, 2023

mholt commented Jul 17, 2023

dheineman commented Jul 18, 2023

promatik commented Jul 21, 2023

mholt commented Jul 21, 2023

mholt commented Jul 22, 2023

promatik commented Jul 23, 2023

mholt commented Jul 24, 2023

mholt commented Jul 24, 2023

YousefAlsbaihi commented Aug 11, 2023

YousefAlsbaihi commented Aug 11, 2023

mholt commented Aug 11, 2023

mholt commented May 2, 2024

vercel bot commented Jul 16, 2023 •

edited