-
-
Notifications
You must be signed in to change notification settings - Fork 3.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Switch Dark/Light mode using JS #1653
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,28 +1,29 @@ | ||
/** | ||
* demo-theme is specifically loaded right after the body and not deferred | ||
* to ensure we switch to the chosen dark/light theme as fast as possible. | ||
* This will prevent any flashes of the light theme (default) before switching. | ||
* | ||
* 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 | ||
*/ | ||
|
||
const themeStorageKey = "tablerTheme" | ||
const defaultTheme = "light" | ||
let selectedTheme | ||
var themeStorageKey = "tablerTheme"; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. As the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
var storedTheme = localStorage.getItem(themeStorageKey); | ||
|
||
// https://stackoverflow.com/a/901144 | ||
const params = new Proxy(new URLSearchParams(window.location.search), { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This would be unnecessary, having both of them |
||
get: (searchParams, prop) => searchParams.get(prop), | ||
// Change "light" to "dark" to set default theme dark | ||
var defaultTheme = "light"; | ||
|
||
selectedTheme = storedTheme ? storedTheme : defaultTheme; | ||
|
||
setTheme(selectedTheme) | ||
$(".switchMode").on('click', function (e) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. By the time the user clicks, jQuery is likely loaded... so it works by accident. |
||
let body = document.querySelector("body") | ||
let currentMode = body.getAttribute('data-bs-theme'); | ||
let mode = currentMode == 'dark' ? "light" : 'dark'; | ||
setTheme(mode); | ||
}) | ||
|
||
if (!!params.theme) { | ||
localStorage.setItem(themeStorageKey, params.theme) | ||
selectedTheme = params.theme | ||
} else { | ||
const storedTheme = localStorage.getItem(themeStorageKey) | ||
selectedTheme = storedTheme ? storedTheme : defaultTheme | ||
} | ||
|
||
if (selectedTheme === 'dark') { | ||
document.body.setAttribute("data-bs-theme", selectedTheme) | ||
} else { | ||
document.body.removeAttribute("data-bs-theme") | ||
} | ||
function setTheme(mode) { | ||
let body = document.querySelector("body") | ||
body.setAttribute('data-bs-theme', mode) | ||
localStorage.setItem(themeStorageKey, mode); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.