diff options
| author | Hailey <me@haileyok.com> | 2024-02-06 11:43:51 -0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-02-06 11:43:51 -0800 |
| commit | ec86282403ea34704d0faab7b04ca033bd3a0650 (patch) | |
| tree | ca5881ada59d7ad634bd799efe3c751a4c5509d2 /bskyweb/templates/base.html | |
| parent | 856f80fc6df731b1dbe9efa289ad6a4f728d4e0d (diff) | |
| download | voidsky-ec86282403ea34704d0faab7b04ca033bd3a0650.tar.zst | |
Options for selecting dark theme, fix some white flashes when in dark mode (#2722)
* 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
Diffstat (limited to 'bskyweb/templates/base.html')
| -rw-r--r-- | bskyweb/templates/base.html | 46 |
1 files changed, 27 insertions, 19 deletions
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index 0df5ce944..1f25743aa 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -1,13 +1,13 @@ -<!DOCTYPE html> +<!DOCTYPE html> <html lang="en"> -<head> +<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover"> <meta name="referrer" content="origin-when-cross-origin"> <title>{%- block head_title -%}Bluesky{%- endblock -%}</title> <!-- Hello Humans! API docs at https://atproto.com --> - + <style> /** * Extend the react-native-web reset: @@ -40,31 +40,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 */ |