BradNut/boredgame
1
0
Fork 0
mirror of https://github.com/BradNut/boredgame synced 2025-09-08 17:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixing dark mode on load.

Browse source
This commit is contained in:
Bradley Shellnut 2022-08-30 17:36:04 -05:00
parent 2e389309ce
commit 7b9e1cdaa2
1 changed files with 43 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
src/app.html
View file

@ -1,41 +1,50 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Bored? Find a game! Bored Game!" />
<link rel="icon" href="%sveltekit.assets%/favicon-bored.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
const htmlElement = document.documentElement;
const userTheme = localStorage.theme;
const userFont = localStorage.font;
// check if the user set a theme <head>
if (userTheme) { <meta charset="utf-8" />
htmlElement.dataset.theme = userTheme; <meta name="description" content="Bored? Find a game! Bored Game!" />
} <link rel="icon" href="%sveltekit.assets%/favicon-bored.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
const htmlElement = document.documentElement;
const userTheme = localStorage.theme;
const userFont = localStorage.font;
// otherwise check for user preference const prefersDarkMode = window.matchMedia(
if (!userTheme && prefersDarkMode) { 'prefers-color-scheme: dark'
htmlElement.dataset.theme = '🌛 Night'; ).matches;
localStorage.theme = '🌛 Night'; const prefersLightMode = window.matchMedia(
} 'prefers-color-scheme: light'
).matches;
if (!userTheme && prefersLightMode) { // check if the user set a theme
htmlElement.dataset.theme = '☀️ Daylight'; if (userTheme) {
localStorage.theme = '☀️ Daylight'; htmlElement.dataset.theme = userTheme;
} }
// if nothing is set default to dark mode // otherwise check for user preference
if (!userTheme && !prefersDarkMode && !prefersLightMode) { if (!userTheme && prefersDarkMode) {
htmlElement.dataset.theme = '🌛 Night'; htmlElement.dataset.theme = '🌛 Night';
localStorage.theme = '🌛 Night'; localStorage.theme = '🌛 Night';
} }
</script>
%sveltekit.head%
</head>
<body> if (!userTheme && prefersLightMode) {
<div id="svelte">%sveltekit.body%</div> htmlElement.dataset.theme = '☀️ Daylight';
</body> localStorage.theme = '☀️ Daylight';
</html> }
// if nothing is set default to dark mode
if (!userTheme && !prefersDarkMode && !prefersLightMode) {
htmlElement.dataset.theme = '🌛 Night';
localStorage.theme = '🌛 Night';
}
</script>
%sveltekit.head%
</head>
<body>
<div id="svelte">%sveltekit.body%</div>
</body>
</html>