ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Prevent flash of wrong theme on startup (web) (#9577)
* prevent flash of wrong theme on startup
* move bg color to #root
* Update and use existing system
* Darken slightly, better contrast
---------
Co-authored-by: Eric Bailey <git@esb.lol>
authored by
Eric Bailey
and committed by
GitHub
10aa46aa
8f82ad66
+41
-18
bskyweb/templates/base.html
+41
-18
bskyweb/templates/base.html
···
37
37
font-style: italic;
38
38
font-display: swap;
39
39
}
40
-
html {
41
-
background-color: white;
40
+
:root {
41
+
--text: black;
42
+
--background: white;
43
+
--backgroundLight: #e2e7ee;
42
44
}
43
45
@media (prefers-color-scheme: dark) {
44
-
html {
45
-
background-color: black;
46
+
:root {
47
+
color-scheme: dark;
48
+
--text: white;
49
+
--background: black;
50
+
--backgroundLight: #232e3e;
46
51
}
47
52
}
48
53
html,
49
-
body {
50
-
margin: 0px;
51
-
padding: 0px;
52
-
font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
53
-
text-rendering: optimizeLegibility;
54
-
/* Platform-specific reset */
55
-
-webkit-overflow-scrolling: touch;
56
-
-webkit-text-size-adjust: 100%;
57
-
-webkit-font-smoothing: antialiased;
58
-
-moz-osx-font-smoothing: grayscale;
59
-
-ms-overflow-style: scrollbar;
60
-
font-synthesis-weight: none;
61
-
}
62
-
html,
63
54
body,
64
55
#root {
65
56
display: flex;
···
67
58
min-height: 100%;
68
59
width: 100%;
69
60
}
61
+
html.theme--light,
62
+
html.theme--light body,
63
+
html.theme--light #root {
64
+
background-color: white;
65
+
--text: black;
66
+
--background: white;
67
+
--backgroundLight: #DCE2EA;
68
+
}
69
+
html.theme--dark,
70
+
html.theme--dark body,
71
+
html.theme--dark #root {
72
+
color-scheme: dark;
73
+
background-color: black;
74
+
--text: white;
75
+
--background: black;
76
+
--backgroundLight: #232E3E;
77
+
}
78
+
html.theme--dim,
79
+
html.theme--dim body,
80
+
html.theme--dim #root {
81
+
color-scheme: dark;
82
+
background-color: #151D28;
83
+
--text: white;
84
+
--background: #151D28;
85
+
--backgroundLight: #2C3A4E;
86
+
}
70
87
#splash {
71
88
display: flex;
72
89
position: fixed;
···
93
110
overflow-y: scroll;
94
111
}
95
112
</style>
113
+
<script>
114
+
const theme = localStorage.getItem('ALF_THEME')
115
+
if (theme) {
116
+
document.documentElement.classList.add(`theme--${theme}`)
117
+
}
118
+
</script>
96
119
97
120
{% include "scripts.html" %}
98
121
<link rel="apple-touch-icon" sizes="180x180" href="{{ staticCDNHost }}/static/apple-touch-icon.png">
+1
src/alf/util/useColorModeTheme.ts
+1
src/alf/util/useColorModeTheme.ts
-34
src/style.css
-34
src/style.css
···
11
11
*
12
12
* HTML & BODY STYLES IN `web/index.html` and `bskyweb/templates/base.html`
13
13
*/
14
-
:root {
15
-
--text: black;
16
-
--background: white;
17
-
--backgroundLight: #f9fafb;
18
-
}
19
-
@media (prefers-color-scheme: dark) {
20
-
:root {
21
-
color-scheme: dark;
22
-
--text: white;
23
-
--background: black;
24
-
--backgroundLight: #111822;
25
-
}
26
-
}
27
-
28
-
html.theme--light {
29
-
--text: black;
30
-
--background: white;
31
-
--backgroundLight: #f9fafb;
32
-
background-color: white;
33
-
}
34
-
html.theme--dark {
35
-
color-scheme: dark;
36
-
background-color: black;
37
-
--text: white;
38
-
--background: black;
39
-
--backgroundLight: #111822;
40
-
}
41
-
html.theme--dim {
42
-
color-scheme: dark;
43
-
background-color: #151d28;
44
-
--text: white;
45
-
--background: #151d28;
46
-
--backgroundLight: #1c2736;
47
-
}
48
14
49
15
/* Buttons and inputs have a font set by UA, so we'll have to reset that */
50
16
button,
+46
-8
web/index.html
+46
-8
web/index.html
···
19
19
<title>%WEB_TITLE%</title>
20
20
21
21
<link rel="preload" as="font" type="font/woff2" href="/static/media/InterVariable.c504db5c06caaf7cdfba.woff2" crossorigin>
22
+
<link rel="stylesheet" href="/static/style.css">
22
23
23
24
<style>
24
25
/**
···
42
43
font-style: italic;
43
44
font-display: swap;
44
45
}
45
-
html {
46
-
background-color: white;
47
-
}
48
-
@media (prefers-color-scheme: dark) {
49
-
html {
50
-
background-color: black;
51
-
}
52
-
}
53
46
html,
54
47
body {
55
48
margin: 0px;
···
64
57
-ms-overflow-style: scrollbar;
65
58
font-synthesis-weight: none;
66
59
}
60
+
:root {
61
+
--text: black;
62
+
--background: white;
63
+
--backgroundLight: #e2e7ee;
64
+
}
65
+
@media (prefers-color-scheme: dark) {
66
+
:root {
67
+
color-scheme: dark;
68
+
--text: white;
69
+
--background: black;
70
+
--backgroundLight: #232e3e;
71
+
}
72
+
}
67
73
html,
68
74
body,
69
75
#root {
···
72
78
min-height: 100%;
73
79
width: 100%;
74
80
}
81
+
html.theme--light,
82
+
html.theme--light body,
83
+
html.theme--light #root {
84
+
background-color: white;
85
+
--text: black;
86
+
--background: white;
87
+
--backgroundLight: #DCE2EA;
88
+
}
89
+
html.theme--dark,
90
+
html.theme--dark body,
91
+
html.theme--dark #root {
92
+
color-scheme: dark;
93
+
background-color: black;
94
+
--text: white;
95
+
--background: black;
96
+
--backgroundLight: #232E3E;
97
+
}
98
+
html.theme--dim,
99
+
html.theme--dim body,
100
+
html.theme--dim #root {
101
+
color-scheme: dark;
102
+
background-color: #151D28;
103
+
--text: white;
104
+
--background: #151D28;
105
+
--backgroundLight: #2C3A4E;
106
+
}
75
107
#splash {
76
108
display: flex;
77
109
position: fixed;
···
98
130
overflow-y: scroll;
99
131
}
100
132
</style>
133
+
<script>
134
+
const theme = localStorage.getItem('ALF_THEME')
135
+
if (theme) {
136
+
document.documentElement.classList.add(`theme--${theme}`)
137
+
}
138
+
</script>
101
139
</head>
102
140
103
141
<body>