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 samuel.fm

Eric Bailey and committed by
GitHub
10aa46aa 8f82ad66

+88 -60
+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
··· 51 51 html.classList.add(`theme--${theme}`) 52 52 // set color to 'theme-color' meta tag 53 53 meta?.setAttribute('content', getBackgroundColor(theme)) 54 + window.localStorage.setItem('ALF_THEME', theme) 54 55 } 55 56 } 56 57
-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
··· 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>