Skip to content

Commit a6bb516

Browse files
TbuskTbusk
committed
patch: fix light/dark defaults
1 parent c50c081 commit a6bb516

4 files changed

Lines changed: 9 additions & 6 deletions

File tree

‎index.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,14 @@
2525
<link rel="canonical" href="https://tbusk.com/">
2626
<!-- favicon svg originating from https://www.svgrepo.com/svg/528183/code-square with color tweaks with author Solar Icons-->
2727
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
28+
</head>
29+
<body>
30+
<div id="app">
2831
<script>
2932
const t = localStorage.getItem('theme') ?? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
3033
document.documentElement.classList.toggle("dark", t === 'dark');
3134
</script>
32-
</head>
33-
<body>
34-
<div id="app">
35+
</div>
3536
<script type="module" src="/src/Entrypoint.tsx"></script>
3637
</body>
3738
</html>

‎src/components/header/HeaderModeIcon.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { useState } from "preact/hooks";
22

33
export function HeaderModeIcon() {
4-
const [darkmode, setDarkMode] = useState<boolean>(localStorage.getItem('theme') === 'dark');
4+
const [darkmode, setDarkMode] = useState<boolean>(
5+
localStorage.getItem('theme') === null ? window.matchMedia("(prefers-color-scheme: dark)").matches : localStorage.getItem('theme') === 'dark'
6+
);
57

68
return (
79

‎src/components/header/NavbarContentMobile.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import myInfoJson from "../../data/my-info.json";
66
export default function NavbarContentMobile() {
77

88
const [isMenuOpen, setIsMenuOpen] = useState(false);
9-
const darkmode: boolean = localStorage.getItem('theme') === 'dark';
9+
const darkmode: boolean = localStorage.getItem('theme') === null ? window.matchMedia("(prefers-color-scheme: dark)").matches : localStorage.getItem('theme') === 'dark';
1010
const myInfo = myInfoJson;
1111

1212
return (

‎src/components/media/Media.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export interface MediaItem {
1313

1414
export default function Media(props: MediaProps) {
1515

16-
const darkmode: boolean = localStorage.getItem('theme') === 'dark';
16+
const darkmode: boolean = localStorage.getItem('theme') === null ? window.matchMedia("(prefers-color-scheme: dark)").matches : localStorage.getItem('theme') === 'dark';
1717

1818
return (
1919
<div className="pb-4">

0 commit comments

Comments
 (0)