Fix dark mode flickering (thomiceli#44)

exkuretrol · Jun 1, 2023 · 8880e00 · 8880e00
1 parent da970d7
commit 8880e00
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 19 deletions.
diff --git a/public/main.ts b/public/main.ts
@@ -6,26 +6,10 @@ import moment from 'moment';
 import md from 'markdown-it';
 import hljs from 'highlight.js';
 
-document.addEventListener('DOMContentLoaded', () => {
 
+document.addEventListener('DOMContentLoaded', () => {
  const themeMenu = document.getElementById('theme-menu')!;
 
- const checkTheme = () => {
- if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
- document.documentElement.classList.add('dark')
- } else {
- document.documentElement.classList.remove('dark')
- }
- }
-
- checkTheme()
-
- window.matchMedia('(prefers-color-scheme: dark)')
- .addEventListener('change',({ matches }) => {
- checkTheme()
- }
- )
-
  document.getElementById('light-mode')!.onclick = (e) => {
  e.stopPropagation()
  localStorage.theme = 'light';
@@ -81,9 +65,10 @@ document.addEventListener('DOMContentLoaded', () => {
  if (lang && hljs.getLanguage(lang)) {
  try {
  return '<pre class="hljs"><code>' +
- hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
+ hljs.highlight(str, {language: lang, ignoreIllegals: true}).value +
  '</code></pre>';
- } catch (__) {}
+ } catch (__) {
+ }
  }
 
  return '<pre class="hljs"><code>' + md().utils.escapeHtml(str) + '</code></pre>';

diff --git a/templates/base/base_header.html b/templates/base/base_header.html
@@ -3,6 +3,24 @@
 <html lang="en" class="h-full">
 <head>
  <meta charset="UTF-8" />
+ <script>
+ const checkTheme = () => {
+ if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+ document.documentElement.classList.add('dark')
+ } else {
+ document.documentElement.classList.remove('dark')
+ }
+ }
+
+ checkTheme()
+
+ window.matchMedia('(prefers-color-scheme: dark)')
+ .addEventListener('change', ({matches}) => {
+ checkTheme()
+ }
+ )
+
+ </script>
  <link rel="icon" type="image/svg+xml" href="{{ asset "favicon.svg" }}" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="{{ asset "main.css" }}" />