zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Options for selecting dark theme, fix some white flashes when in dark mode (#2722)

Browse source 
* add dark theme selection to settings/schema

* use `useThemePrefs` where needed

* adjust theme providers to support various themes

* update storybook

* handle web themes

* better themeing for web

* dont show dark theme prefs when color mode is light

* drop the inverted text change on oled theme

* get the color mode inside of `useColorModeTheme`

* use `ThemeName` type everywhere

* typo

* use dim/dark instead of dark/oled

* prevent any fickers on web

* fix styles

* use `dim` for dark default

* more cleanup

* 🤔

* set system background color

* ts
This commit is contained in:
Hailey 2024-02-06 11:43:51 -08:00 • committed by GitHub
parent 856f80fc6d
commit ec86282403
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 251 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

46
web/index.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<!--
<!--
This viewport works for phones with notches.
It's optimized for gestures by disabling global zoom.
-->
@ -44,31 +44,39 @@
}
/* Color theming */
/* Default will always be white */
:root {
--text: black;
--background: white;
--backgroundLight: hsl(211, 20%, 95%);
}
html.colorMode--dark {
--text: white;
--background: hsl(211, 20%, 4%);
--backgroundLight: hsl(211, 20%, 20%);
color-scheme: dark;
}
@media (prefers-color-scheme: light) {
html.colorMode--system {
--text: black;
--background: white;
--backgroundLight: hsl(211, 20%, 95%);
}
}
/* This gives us a black background when system is dark and we have not loaded the theme/color scheme values in JS */
@media (prefers-color-scheme: dark) {
html.colorMode--system {
:root {
--text: white;
--background: black;
--backgroundLight: hsl(211, 20%, 20%);
color-scheme: dark;
}
}
/* Overwrite those preferences with the selected theme */
html.theme--light {
--text: black;
--background: white;
--backgroundLight: hsl(211, 20%, 95%);
}
html.theme--dark {
--text: white;
--background: hsl(211, 20%, 4%);
--background: black;
--backgroundLight: hsl(211, 20%, 20%);
color-scheme: dark;
}
}
html.theme--dim {
--text: white;
--background: hsl(211, 20%, 4%);
--backgroundLight: hsl(211, 20%, 10%);
color-scheme: dark;
}
/* Remove autofill styles on Webkit */
@ -142,7 +150,7 @@
.ProseMirror .mention {
color: #0085ff;
}
.ProseMirror a,
.ProseMirror a,
.ProseMirror .autolink {
color: #0085ff;
}
@ -200,7 +208,7 @@
</head>
<body>
<!--
<!--
A generic no script element with a reload button and a message.
Feel free to customize this however you'd like.
-->