Created
October 31, 2021 08:19
-
-
Save francoisgeorgy/840913beccf13a3447ad1534bcda4c65 to your computer and use it in GitHub Desktop.
CSS theme detection #css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Source: https://naruhodo.dev/detect-users-favorite-theme-with-css-only/ | |
| */ | |
| /* If user's system preference is light or unknown */ | |
| @media (prefers-color-scheme: light) { | |
| :root { | |
| --palette-background: var(--light-palette-background); | |
| --palette-text: var(--light-palette-text); | |
| } | |
| } | |
| /* If user's system preference is dark */ | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --palette-background: var(--dark-palette-background); | |
| --palette-text: var(--dark-palette-text); | |
| } | |
| } | |
| /* If user specifically chose light theme */ | |
| :root[data-theme="light"] { | |
| --palette-background: var(--light-palette-background); | |
| --palette-text: var(--light-palette-text); | |
| } | |
| /* If user specifically chose dark theme */ | |
| :root[data-theme="dark"] { | |
| --palette-background: var(--dark-palette-background); | |
| --palette-text: var(--dark-palette-text); | |
| } | |
| /* | |
| JS code: | |
| function getCurrentTheme() { | |
| // Find the <html> element | |
| const root = document.getElementsByTagName("html")[0]; | |
| // Check if the <html> element has a "data-theme" attributes | |
| if (root.hasAttribute("data-theme")) { | |
| // Return the value of the "data-theme" attribute | |
| return root.getAttribute("data-theme"); | |
| } | |
| // If the <html> element does not have a "data-theme" attribute | |
| // Use the "matchMedia" function to check if the "prefers-color-scheme" | |
| // media query matches "dark" | |
| const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); | |
| // If true, return "dark" | |
| if (mediaQuery.matches === true) return "dark"; | |
| // Otherwise, return "light" | |
| return "light"; | |
| } | |
| // Self-executing function | |
| (() => { | |
| // Find the <html> element | |
| const root = document.getElementsByTagName("html")[0]; | |
| // Retrieve the theme toggle button | |
| const toggleButton = document.getElementById("toggle"); | |
| // Add an onClick event on the theme toggle button | |
| toggleButton.addEventListener("click", () => { | |
| // Use the "getCurrentTheme" function to retrieve the current theme | |
| const currentTheme = getCurrentTheme(); | |
| // Change the theme to the opposite by adding/changing | |
| // the "data-theme" attribute on the <html> element | |
| if (currentTheme === "dark") { | |
| root.setAttribute("data-theme", "light"); | |
| } else { | |
| root.setAttribute("data-theme", "dark"); | |
| } | |
| }); | |
| })(); | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment