From 5822a4d62b6de64b8b04faf5f5284a8c15534648 Mon Sep 17 00:00:00 2001 From: Lukas Winkler Date: Sun, 9 Jul 2023 19:38:23 +0200 Subject: [PATCH] try color switcher --- static/js/colortheme.ts | 9 +++++---- static/main.ts | 1 - templates/base.jinja | 2 ++ vite.config.js | 1 + 4 files changed, 8 insertions(+), 5 deletions(-) diff --git a/static/js/colortheme.ts b/static/js/colortheme.ts index 057f704..4b56757 100644 --- a/static/js/colortheme.ts +++ b/static/js/colortheme.ts @@ -1,9 +1,10 @@ /*! - * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/) + * Color mode toggler based on Bootstrap's docs (https://getbootstrap.com/) * Copyright 2011-2023 The Bootstrap Authors * Licensed under the Creative Commons Attribution 3.0 Unported License. */ +const darkQuery='(prefers-color-scheme: dark)' const getStoredTheme = () => localStorage.getItem('theme') const setStoredTheme = (theme: string) => localStorage.setItem('theme', theme) @@ -14,11 +15,11 @@ const getPreferredTheme = () => { return storedTheme } - return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' + return window.matchMedia(darkQuery).matches ? 'dark' : 'light' } const setTheme = (theme: string) => { - if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) { + if (theme === 'auto' && window.matchMedia(darkQuery).matches) { document.documentElement.setAttribute('data-bs-theme', 'dark') } else { document.documentElement.setAttribute('data-bs-theme', theme) @@ -52,7 +53,7 @@ const showActiveTheme = (theme: string, focus: boolean = false) => { } } -window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { +window.matchMedia(darkQuery).addEventListener('change', () => { const storedTheme = getStoredTheme() if (storedTheme !== 'light' && storedTheme !== 'dark') { setTheme(getPreferredTheme()) diff --git a/static/main.ts b/static/main.ts index d4989a0..eb4f604 100644 --- a/static/main.ts +++ b/static/main.ts @@ -1,7 +1,6 @@ import 'vite/modulepreload-polyfill' // import "./scss/main.scss" -import "./js/colortheme" import "./js/sentry" // @ts-ignore import {default as Dropdown} from 'bootstrap/js/src/dropdown' diff --git a/templates/base.jinja b/templates/base.jinja index 531c312..7646919 100644 --- a/templates/base.jinja +++ b/templates/base.jinja @@ -15,6 +15,8 @@ {% endfor %} {% endif %} + + diff --git a/vite.config.js b/vite.config.js index d0d4d9f..530dd88 100644 --- a/vite.config.js +++ b/vite.config.js @@ -14,6 +14,7 @@ export default defineConfig({ // overwrite default .html entry input: { "main": 'static/main.ts', + "colortheme": 'static/js/colortheme.ts', // "tenantbase": 'static/tenantbase.js', // "editor": 'static/editor.js' },