From be3218290dc63ba251bfd2fe4d4dccb2122f4bbe Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Mon, 21 Feb 2022 18:13:35 +0000
Subject: [PATCH] feat: refactor CSS to SCSS
---
assets/js/anatole-theme-switcher.js | 81 +++++++++++++++++++---------------------
1 files changed, 38 insertions(+), 43 deletions(-)
diff --git a/assets/js/anatole-theme-switcher.js b/assets/js/anatole-theme-switcher.js
index 2df4e05..cccb905 100644
--- a/assets/js/anatole-theme-switcher.js
+++ b/assets/js/anatole-theme-switcher.js
@@ -1,58 +1,53 @@
-// initialize default value
-function getTheme() {
- return localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
-}
+const getStoredThemeStyle = () => localStorage.getItem('theme');
-function setTheme(style) {
- document.documentElement.setAttribute('data-theme', style);
+const setThemeClass = (style) => {
+ const body = document.body;
+ const prevTheme = [...body.classList].find((c) => c.match(/theme--(light|dark)/));
+ if (!prevTheme) return;
+ body.classList.remove(prevTheme);
+ body.classList.add(`theme--${style}`);
+};
+
+const setThemeStyle = (style) => {
localStorage.setItem('theme', style);
-}
+ setThemeClass(style);
+};
-function init() {
- // initialize default value
- const theme = getTheme();
+const switchTheme = () => {
+ const currThemeStyle = getStoredThemeStyle();
+ switch (currThemeStyle) {
+ case 'light':
+ setThemeStyle('dark');
+ break;
+ case 'dark':
+ setThemeStyle('light');
+ break;
+ default:
+ setThemeStyle('light');
+ break;
+ }
+};
- // check if a preferred color theme is set for users that have never been to our site
+const initTheme = () => {
+ const currThemeStyle = getStoredThemeStyle();
+ if (currThemeStyle) {
+ setThemeStyle(currThemeStyle);
+ return;
+ }
const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
- if (theme === null) {
- if (userPrefersDark) {
- setTheme('dark');
- } else if (!document.documentElement.getAttribute('data-theme')) {
- setTheme('light');
- } else {
- setTheme(document.documentElement.getAttribute('data-theme'));
- }
- } else {
- // load a stored theme
- if (theme === 'light') {
- document.documentElement.setAttribute('data-theme', 'light');
- } else {
- document.documentElement.setAttribute('data-theme', 'dark');
- }
- }
-}
+ if (!userPrefersDark) return;
+ setThemeStyle('dark');
+};
-// switch themes
-function switchTheme() {
- const theme = getTheme();
- if (theme === 'light') {
- setTheme('dark');
- } else {
- setTheme('light');
- }
-}
-
-// Manual Switch
document.addEventListener(
'DOMContentLoaded',
- function () {
- const themeSwitcher = document.querySelector('.theme-switch');
+ () => {
+ const themeSwitcher = document.querySelector('.themeswitch');
themeSwitcher.addEventListener('click', switchTheme, false);
},
false,
);
-// Automatic Switching
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme, false);
-init();
+document.addEventListener('DOMContentLoaded', () => initTheme());
--
Gitblit v1.10.0