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
bskyweb/templates/base.html
View file

@ -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 */