mirror/opengist
1
0
Fork 0
mirror of https://github.com/thomiceli/opengist.git synced 2025-01-03 16:22:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix dark mode flickering (#44)

Browse source
This commit is contained in:
Thomas Miceli 2023-06-01 19:04:12 +02:00 committed by GitHub
parent da970d7272
commit 8880e00f48
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
public/main.ts
View file

@ -6,26 +6,10 @@ import moment from 'moment';
import md from 'markdown-it';
import hljs from 'highlight.js';
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>';

18
templates/base/base_header.html vendored
View file

@ -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" }}" />