forked from eslint/eslint.org
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add system theme option (eslint#586)
* feat: add system theme option * chore: add translations for system word * chore: handle playground theming * refactor: remove seperate key for system theme * refactor: remove unintended semicolon * chore: add `aria-hidden=true` to svg icon * chore: add `aria-hidden=true` to svg icon * fix: footer language option getting out of screen * refactor: formatting fix * refactor: pr review changes * chore: theme switcher padding fix * refactor: pr review changes * fix: lang select cutting
- Loading branch information
1 parent
c911d8c
commit 3d4e863
Showing
14 changed files
with
155 additions
and
54 deletions.
There are no files selected for viewing
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,57 +1,78 @@ | ||
| /* theme toggle buttons */ | ||
| (function () { | ||
| var enableToggle = function (btn) { | ||
| btn.setAttribute("aria-pressed", "true"); | ||
| }; | ||
| var disableToggle = function (btn) { | ||
| btn.setAttribute("aria-pressed", "false"); | ||
|
|
||
| var disableToggle = function (btns) { | ||
| btns.forEach(btn => btn.setAttribute("aria-pressed", "false")); | ||
| }; | ||
|
|
||
| var setTheme = function (theme) { | ||
| document.documentElement.setAttribute("data-theme", theme); | ||
| if (theme === "system") { | ||
| var systemTheme = window.matchMedia("(prefers-color-scheme: dark)") | ||
| .matches | ||
| ? "dark" | ||
| : "light"; | ||
| document.documentElement.setAttribute("data-theme", systemTheme); | ||
| } else { | ||
| document.documentElement.setAttribute("data-theme", theme); | ||
| } | ||
| window.localStorage.setItem("theme", theme); | ||
| }; | ||
|
|
||
| var theme = document.documentElement.getAttribute("data-theme"); | ||
|
|
||
| document.addEventListener( | ||
| "DOMContentLoaded", | ||
| function () { | ||
| var switcher = document.getElementById("js-theme-switcher"); | ||
| switcher.removeAttribute("hidden"); | ||
| var light_theme_toggle = | ||
| document.getElementById("light-theme-toggle"), | ||
| dark_theme_toggle = | ||
| document.getElementById("dark-theme-toggle"); | ||
| if (theme) { | ||
| if (theme === "light") { | ||
| enableToggle(light_theme_toggle); | ||
| disableToggle(dark_theme_toggle); | ||
| } else if (theme === "dark") { | ||
| enableToggle(dark_theme_toggle); | ||
| disableToggle(light_theme_toggle); | ||
| var initializeThemeSwitcher = function () { | ||
| var theme = window.localStorage.getItem("theme") || "system"; | ||
| var switcher = document.getElementById("js-theme-switcher"); | ||
| switcher.removeAttribute("hidden"); | ||
|
|
||
| var lightThemeToggle = document.getElementById("light-theme-toggle"); | ||
| var darkThemeToggle = document.getElementById("dark-theme-toggle"); | ||
| var systemThemeToggle = document.getElementById("system-theme-toggle"); | ||
|
|
||
| var toggleButtons = [ | ||
| lightThemeToggle, | ||
| darkThemeToggle, | ||
| systemThemeToggle, | ||
| ]; | ||
|
|
||
| toggleButtons.forEach(function (btn) { | ||
| btn.addEventListener("click", function () { | ||
| enableToggle(btn); | ||
| var theme = this.getAttribute("data-theme"); | ||
| setTheme(theme); | ||
| if (btn === systemThemeToggle) { | ||
| disableToggle([lightThemeToggle, darkThemeToggle]); | ||
| } else if (btn === lightThemeToggle) { | ||
| disableToggle([systemThemeToggle, darkThemeToggle]); | ||
| } else if (btn === darkThemeToggle) { | ||
| disableToggle([systemThemeToggle, lightThemeToggle]); | ||
| } | ||
| } | ||
| light_theme_toggle.addEventListener( | ||
| "click", | ||
| function () { | ||
| enableToggle(light_theme_toggle); | ||
| theme = this.getAttribute("data-theme"); | ||
| setTheme(theme); | ||
| disableToggle(dark_theme_toggle); | ||
| }, | ||
| false, | ||
| ); | ||
| dark_theme_toggle.addEventListener( | ||
| "click", | ||
| function () { | ||
| enableToggle(dark_theme_toggle); | ||
| theme = this.getAttribute("data-theme"); | ||
| setTheme(theme); | ||
| disableToggle(light_theme_toggle); | ||
| }, | ||
| false, | ||
| ); | ||
| }, | ||
| false, | ||
| ); | ||
| }); | ||
| }); | ||
|
|
||
| if (theme === "system") { | ||
| enableToggle(systemThemeToggle); | ||
| disableToggle([lightThemeToggle, darkThemeToggle]); | ||
| } else if (theme === "light") { | ||
| enableToggle(lightThemeToggle); | ||
| disableToggle([systemThemeToggle, darkThemeToggle]); | ||
| } else if (theme === "dark") { | ||
| enableToggle(darkThemeToggle); | ||
| disableToggle([systemThemeToggle, lightThemeToggle]); | ||
| } | ||
|
|
||
| // Update theme on system preference change | ||
| window | ||
| .matchMedia("(prefers-color-scheme: dark)") | ||
| .addEventListener("change", function () { | ||
| var currentTheme = window.localStorage.getItem("theme"); | ||
| if (currentTheme === "system" || !currentTheme) { | ||
| enableToggle(systemThemeToggle); | ||
| disableToggle([lightThemeToggle, darkThemeToggle]); | ||
| setTheme("system"); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| document.addEventListener("DOMContentLoaded", initializeThemeSwitcher); | ||
| })(); |
This file contains 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
This file contains 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
This file contains 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