diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/index.html | 46 |
1 files changed, 27 insertions, 19 deletions
diff --git a/web/index.html b/web/index.html index 209a7c2c7..e6deb4ca4 100644 --- a/web/index.html +++ b/web/index.html @@ -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. --> |