mirror of
https://github.com/cheeaun/phanpy.git
synced 2024-11-24 10:15:37 +03:00
No idea why this requires so much code
This commit is contained in:
Lim Chee Aun
parent
3cab36f24c
commit
6703b27bfb
3 changed files with 117 additions and 40 deletions
13
index.html
13
index.html
|
|
@ -18,14 +18,27 @@
|
|||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<link rel="canonical" href="%VITE_WEBSITE%" />
|
||||
<meta
|
||||
name=""
|
||||
data-theme-setting="manual"
|
||||
content="#242526"
|
||||
data-theme-light-color="#fff"
|
||||
data-theme-light-color-temp="#ffff"
|
||||
data-theme-dark-color="#242526"
|
||||
data-theme-dark-color-temp="#242526ff"
|
||||
/>
|
||||
<meta
|
||||
name="theme-color"
|
||||
data-theme-setting="auto"
|
||||
content="#fff"
|
||||
data-content-temp="#ffff"
|
||||
media="(prefers-color-scheme: light)"
|
||||
/>
|
||||
<meta
|
||||
name="theme-color"
|
||||
data-theme-setting="auto"
|
||||
content="#242526"
|
||||
data-content-temp="#242526ff"
|
||||
media="(prefers-color-scheme: dark)"
|
||||
/>
|
||||
<meta name="google" content="notranslate" />
|
||||
|
|
|
|||
88
src/app.jsx
88
src/app.jsx
|
|
@ -193,35 +193,82 @@ const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
|
|||
if (isIOS) {
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.visibilityState === 'visible') {
|
||||
const theme = store.local.get('theme');
|
||||
let $meta;
|
||||
if (theme) {
|
||||
// Get current meta
|
||||
$meta = document.querySelector(
|
||||
`meta[name="theme-color"][data-theme-setting="manual"]`,
|
||||
);
|
||||
if ($meta) {
|
||||
const color = $meta.content;
|
||||
const tempColor =
|
||||
theme === 'light'
|
||||
? $meta.dataset.themeLightColorTemp
|
||||
: $meta.dataset.themeDarkColorTemp;
|
||||
$meta.content = tempColor || '';
|
||||
setTimeout(() => {
|
||||
$meta.content = color;
|
||||
}, 10);
|
||||
}
|
||||
} else {
|
||||
// Get current color scheme
|
||||
const colorScheme = window.matchMedia('(prefers-color-scheme: dark)')
|
||||
.matches
|
||||
? 'dark'
|
||||
: 'light';
|
||||
// Get current theme-color
|
||||
const $meta = document.querySelector(
|
||||
$meta = document.querySelector(
|
||||
`meta[name="theme-color"][media*="${colorScheme}"]`,
|
||||
);
|
||||
const color = $meta?.getAttribute('content');
|
||||
if (color) {
|
||||
let tempColor;
|
||||
if (/^#/.test(color)) {
|
||||
// Assume either #RBG or #RRGGBB
|
||||
if (color.length === 4) {
|
||||
tempColor = color + 'f';
|
||||
} else if (color.length === 7) {
|
||||
tempColor = color + 'ff';
|
||||
}
|
||||
}
|
||||
if ($meta) {
|
||||
const color = $meta.content;
|
||||
const tempColor = $meta.dataset.contentTemp;
|
||||
$meta.content = tempColor || '';
|
||||
setTimeout(() => {
|
||||
$meta.content = color;
|
||||
}, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
{
|
||||
const theme = store.local.get('theme');
|
||||
// If there's a theme, it's NOT auto
|
||||
if (theme) {
|
||||
// dark | light
|
||||
document.documentElement.classList.add(`is-${theme}`);
|
||||
document
|
||||
.querySelector('meta[name="color-scheme"]')
|
||||
.setAttribute('content', theme || 'dark light');
|
||||
|
||||
// Enable manual theme <meta>
|
||||
const $manualMeta = document.querySelector(
|
||||
'meta[data-theme-setting="manual"]',
|
||||
);
|
||||
if ($manualMeta) {
|
||||
$manualMeta.name = 'theme-color';
|
||||
$manualMeta.content =
|
||||
theme === 'light'
|
||||
? $manualMeta.dataset.themeLightColor
|
||||
: $manualMeta.dataset.themeDarkColor;
|
||||
}
|
||||
// Disable auto theme <meta>s
|
||||
const $autoMetas = document.querySelectorAll(
|
||||
'meta[data-theme-setting="auto"]',
|
||||
);
|
||||
$autoMetas.forEach((m) => {
|
||||
m.name = '';
|
||||
});
|
||||
}
|
||||
const textSize = store.local.get('textSize');
|
||||
if (textSize) {
|
||||
document.documentElement.style.setProperty('--text-size', `${textSize}px`);
|
||||
}
|
||||
}
|
||||
|
||||
subscribe(states, (changes) => {
|
||||
for (const [action, path, value, prevValue] of changes) {
|
||||
// Change #app dataset based on settings.shortcutsViewMode
|
||||
|
|
@ -244,23 +291,6 @@ function App() {
|
|||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
const [uiState, setUIState] = useState('loading');
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const theme = store.local.get('theme');
|
||||
if (theme) {
|
||||
document.documentElement.classList.add(`is-${theme}`);
|
||||
document
|
||||
.querySelector('meta[name="color-scheme"]')
|
||||
.setAttribute('content', theme === 'auto' ? 'dark light' : theme);
|
||||
}
|
||||
const textSize = store.local.get('textSize');
|
||||
if (textSize) {
|
||||
document.documentElement.style.setProperty(
|
||||
'--text-size',
|
||||
`${textSize}px`,
|
||||
);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const instanceURL = store.local.get('instanceURL');
|
||||
const code = decodeURIComponent(
|
||||
|
|
|
|||
|
|
@ -82,9 +82,43 @@ function Settings({ onClose }) {
|
|||
|
||||
if (theme === 'auto') {
|
||||
html.classList.remove('is-light', 'is-dark');
|
||||
|
||||
// Disable manual theme <meta>
|
||||
const $manualMeta = document.querySelector(
|
||||
'meta[data-theme-setting="manual"]',
|
||||
);
|
||||
if ($manualMeta) {
|
||||
$manualMeta.name = '';
|
||||
}
|
||||
// Enable auto theme <meta>s
|
||||
const $autoMetas = document.querySelectorAll(
|
||||
'meta[data-theme-setting="auto"]',
|
||||
);
|
||||
$autoMetas.forEach((m) => {
|
||||
m.name = 'theme-color';
|
||||
});
|
||||
} else {
|
||||
html.classList.toggle('is-light', theme === 'light');
|
||||
html.classList.toggle('is-dark', theme === 'dark');
|
||||
|
||||
// Enable manual theme <meta>
|
||||
const $manualMeta = document.querySelector(
|
||||
'meta[data-theme-setting="manual"]',
|
||||
);
|
||||
if ($manualMeta) {
|
||||
$manualMeta.name = 'theme-color';
|
||||
$manualMeta.content =
|
||||
theme === 'light'
|
||||
? $manualMeta.dataset.themeLightColor
|
||||
: $manualMeta.dataset.themeDarkColor;
|
||||
}
|
||||
// Disable auto theme <meta>s
|
||||
const $autoMetas = document.querySelectorAll(
|
||||
'meta[data-theme-setting="auto"]',
|
||||
);
|
||||
$autoMetas.forEach((m) => {
|
||||
m.name = '';
|
||||
});
|
||||
}
|
||||
document
|
||||
.querySelector('meta[name="color-scheme"]')
|
||||
|
|
|
|||
Loading…
Reference in a new issue