frontend: theme 'auto' setting
Massimo Melina committed
Jun 19, 2022 at 17:45 UTC
434280d632977e650dfdbabc77dbf75d44ac5703
2 files changed
+13
-10
frontend/src/options.ts
+5
-5
@@ -8,7 +8,7 @@ import { hIcon } from './misc'
8
import { MenuLink } from './menu'
9
10
export function showOptions (){
11
- const options = ['name','extension','size','time']
11
+ const options = ['name', 'extension', 'size', 'time']
12
const close = newDialog({ Content })
13
14
function Content(){
@@ -20,7 +20,7 @@ export function showOptions (){
20
href: snap.adminUrl,
21
target: 'admin',
22
}),
23
- h('div', {}, 'Sort by'),
23
+ h('div', {}, "Sort by"),
24
options.map(x => h('button',{
25
key: x,
26
onClick(){
@@ -32,16 +32,16 @@ export function showOptions (){
32
onChange(v) {
33
state.invertOrder = v
34
}
35
- }, 'Invert order'),
35
+ }, "Invert order"),
36
h(Checkbox, {
37
value: snap.foldersFirst,
38
onChange(v) {
39
state.foldersFirst = v
40
}
41
- }, 'Folders first'),
41
+ }, "Folders first"),
42
43
h(Select, {
44
- options: ['light', 'dark'].map(s => ({ label:'theme: ' + s, value: s })),
44
+ options: ['', 'light', 'dark'].map(s => ({ label: "theme: " + (s || "auto"), value: s })),
45
value: snap.theme,
46
onChange(v) {
47
state.theme = v
frontend/src/useTheme.ts
+8
-5
@@ -1,21 +1,24 @@
1
// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
-import { state, useSnapState } from './state'
3
+import { useSnapState } from './state'
4
import { useEffect } from 'react'
5
+import { useMediaQuery } from '@mui/material'
6
7
export default function useTheme() {
8
const { theme } = useSnapState()
9
+ const systemDark = useMediaQuery('(prefers-color-scheme: dark)')
10
useEffect(()=>{
11
const e = document.body
12
if (!e) return
11
- const t = state.theme
13
+ const name = theme || (systemDark ? 'dark' : 'light')
14
const pre = 'theme-'
13
- const ct = pre+t
15
+ const ct = pre + name
16
const list = e.classList
17
+ console.debug({ theme, name, dark: systemDark })
18
for (const c of Array.from(list))
19
if (c.startsWith(pre) && c !== ct)
20
list.remove(c)
18
- if (t)
21
+ if (name)
22
list.add(ct)
20
- }, [theme])
23
+ }, [theme, systemDark])
24
}