this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

No idea why this requires so much code

+117 -40
+13
index.html
··· 19 19 <meta name="mobile-web-app-capable" content="yes" /> 20 20 <link rel="canonical" href="%VITE_WEBSITE%" /> 21 21 <meta 22 + name="" 23 + data-theme-setting="manual" 24 + content="#242526" 25 + data-theme-light-color="#fff" 26 + data-theme-light-color-temp="#ffff" 27 + data-theme-dark-color="#242526" 28 + data-theme-dark-color-temp="#242526ff" 29 + /> 30 + <meta 22 31 name="theme-color" 32 + data-theme-setting="auto" 23 33 content="#fff" 34 + data-content-temp="#ffff" 24 35 media="(prefers-color-scheme: light)" 25 36 /> 26 37 <meta 27 38 name="theme-color" 39 + data-theme-setting="auto" 28 40 content="#242526" 41 + data-content-temp="#242526ff" 29 42 media="(prefers-color-scheme: dark)" 30 43 /> 31 44 <meta name="google" content="notranslate" />
+70 -40
src/app.jsx
··· 193 193 if (isIOS) { 194 194 document.addEventListener('visibilitychange', () => { 195 195 if (document.visibilityState === 'visible') { 196 - // Get current color scheme 197 - const colorScheme = window.matchMedia('(prefers-color-scheme: dark)') 198 - .matches 199 - ? 'dark' 200 - : 'light'; 201 - // Get current theme-color 202 - const $meta = document.querySelector( 203 - `meta[name="theme-color"][media*="${colorScheme}"]`, 204 - ); 205 - const color = $meta?.getAttribute('content'); 206 - if (color) { 207 - let tempColor; 208 - if (/^#/.test(color)) { 209 - // Assume either #RBG or #RRGGBB 210 - if (color.length === 4) { 211 - tempColor = color + 'f'; 212 - } else if (color.length === 7) { 213 - tempColor = color + 'ff'; 214 - } 196 + const theme = store.local.get('theme'); 197 + let $meta; 198 + if (theme) { 199 + // Get current meta 200 + $meta = document.querySelector( 201 + `meta[name="theme-color"][data-theme-setting="manual"]`, 202 + ); 203 + if ($meta) { 204 + const color = $meta.content; 205 + const tempColor = 206 + theme === 'light' 207 + ? $meta.dataset.themeLightColorTemp 208 + : $meta.dataset.themeDarkColorTemp; 209 + $meta.content = tempColor || ''; 210 + setTimeout(() => { 211 + $meta.content = color; 212 + }, 10); 215 213 } 216 - $meta.content = tempColor || ''; 217 - setTimeout(() => { 218 - $meta.content = color; 219 - }, 10); 214 + } else { 215 + // Get current color scheme 216 + const colorScheme = window.matchMedia('(prefers-color-scheme: dark)') 217 + .matches 218 + ? 'dark' 219 + : 'light'; 220 + // Get current theme-color 221 + $meta = document.querySelector( 222 + `meta[name="theme-color"][media*="${colorScheme}"]`, 223 + ); 224 + if ($meta) { 225 + const color = $meta.content; 226 + const tempColor = $meta.dataset.contentTemp; 227 + $meta.content = tempColor || ''; 228 + setTimeout(() => { 229 + $meta.content = color; 230 + }, 10); 231 + } 220 232 } 221 233 } 222 234 }); 223 235 } 224 236 237 + { 238 + const theme = store.local.get('theme'); 239 + // If there's a theme, it's NOT auto 240 + if (theme) { 241 + // dark | light 242 + document.documentElement.classList.add(`is-${theme}`); 243 + document 244 + .querySelector('meta[name="color-scheme"]') 245 + .setAttribute('content', theme || 'dark light'); 246 + 247 + // Enable manual theme <meta> 248 + const $manualMeta = document.querySelector( 249 + 'meta[data-theme-setting="manual"]', 250 + ); 251 + if ($manualMeta) { 252 + $manualMeta.name = 'theme-color'; 253 + $manualMeta.content = 254 + theme === 'light' 255 + ? $manualMeta.dataset.themeLightColor 256 + : $manualMeta.dataset.themeDarkColor; 257 + } 258 + // Disable auto theme <meta>s 259 + const $autoMetas = document.querySelectorAll( 260 + 'meta[data-theme-setting="auto"]', 261 + ); 262 + $autoMetas.forEach((m) => { 263 + m.name = ''; 264 + }); 265 + } 266 + const textSize = store.local.get('textSize'); 267 + if (textSize) { 268 + document.documentElement.style.setProperty('--text-size', `${textSize}px`); 269 + } 270 + } 271 + 225 272 subscribe(states, (changes) => { 226 273 for (const [action, path, value, prevValue] of changes) { 227 274 // Change #app dataset based on settings.shortcutsViewMode ··· 243 290 function App() { 244 291 const [isLoggedIn, setIsLoggedIn] = useState(false); 245 292 const [uiState, setUIState] = useState('loading'); 246 - 247 - useLayoutEffect(() => { 248 - const theme = store.local.get('theme'); 249 - if (theme) { 250 - document.documentElement.classList.add(`is-${theme}`); 251 - document 252 - .querySelector('meta[name="color-scheme"]') 253 - .setAttribute('content', theme === 'auto' ? 'dark light' : theme); 254 - } 255 - const textSize = store.local.get('textSize'); 256 - if (textSize) { 257 - document.documentElement.style.setProperty( 258 - '--text-size', 259 - `${textSize}px`, 260 - ); 261 - } 262 - }, []); 263 293 264 294 useEffect(() => { 265 295 const instanceURL = store.local.get('instanceURL');
+34
src/pages/settings.jsx
··· 82 82 83 83 if (theme === 'auto') { 84 84 html.classList.remove('is-light', 'is-dark'); 85 + 86 + // Disable manual theme <meta> 87 + const $manualMeta = document.querySelector( 88 + 'meta[data-theme-setting="manual"]', 89 + ); 90 + if ($manualMeta) { 91 + $manualMeta.name = ''; 92 + } 93 + // Enable auto theme <meta>s 94 + const $autoMetas = document.querySelectorAll( 95 + 'meta[data-theme-setting="auto"]', 96 + ); 97 + $autoMetas.forEach((m) => { 98 + m.name = 'theme-color'; 99 + }); 85 100 } else { 86 101 html.classList.toggle('is-light', theme === 'light'); 87 102 html.classList.toggle('is-dark', theme === 'dark'); 103 + 104 + // Enable manual theme <meta> 105 + const $manualMeta = document.querySelector( 106 + 'meta[data-theme-setting="manual"]', 107 + ); 108 + if ($manualMeta) { 109 + $manualMeta.name = 'theme-color'; 110 + $manualMeta.content = 111 + theme === 'light' 112 + ? $manualMeta.dataset.themeLightColor 113 + : $manualMeta.dataset.themeDarkColor; 114 + } 115 + // Disable auto theme <meta>s 116 + const $autoMetas = document.querySelectorAll( 117 + 'meta[data-theme-setting="auto"]', 118 + ); 119 + $autoMetas.forEach((m) => { 120 + m.name = ''; 121 + }); 88 122 } 89 123 document 90 124 .querySelector('meta[name="color-scheme"]')