gitea/opengist
0
0
Fork 0
mirror of https://github.com/thomiceli/opengist.git synced 2025-07-08 00:55:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

Light mode (#38)

Browse Source
This commit is contained in:
Thomas Miceli
2023-05-27 13:58:08 +02:00
committed by GitHub
parent 4a75a50370
commit cecc06b332
30 changed files with 554 additions and 1252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
public/main.ts
View File

@ -1,6 +1,5 @@
import 'highlight.js/styles/tokyo-night-dark.css';
import './style.css';
import './markdown.css';
import './hljs.scss';
import './favicon.svg';
import './default.png';
import moment from 'moment';
@ -8,6 +7,50 @@ 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';
themeMenu.classList.toggle('hidden');
checkTheme()
}
document.getElementById('dark-mode')!.onclick = (e) => {
e.stopPropagation()
localStorage.theme = 'dark';
themeMenu.classList.toggle('hidden');
checkTheme()
}
document.getElementById('system-mode')!.onclick = (e) => {
e.stopPropagation()
localStorage.removeItem('theme');
themeMenu.classList.toggle('hidden');
checkTheme();
}
document.getElementById('theme-btn')!.onclick = (e) => {
themeMenu.classList.toggle('hidden');
}
document.querySelectorAll('.moment-timestamp').forEach((e: HTMLElement) => {
e.title = moment.unix(parseInt(e.innerHTML)).format('LLLL');
e.innerHTML = moment.unix(parseInt(e.innerHTML)).fromNow();
@ -37,8 +80,6 @@ document.addEventListener('DOMContentLoaded', () => {
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
console.log(str)
console.log(hljs.highlight(str, {language: lang, ignoreIllegals: false}, false));
return '<pre class="hljs"><code>' +
hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
'</code></pre>';