mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-21 16:55:25 +03:00
Code Issues Projects Releases Packages Wiki Activity

No idea why this requires so much code

Browse source
This commit is contained in:
Lim Chee Aun 2023-12-23 23:04:34 +08:00
parent 3cab36f24c
commit 6703b27bfb
3 changed files with 117 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
index.html
View file

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

110
src/app.jsx
View file

@ -193,35 +193,82 @@ const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
if (isIOS) {
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
// Get current color scheme
const colorScheme = window.matchMedia('(prefers-color-scheme: dark)')
.matches
? 'dark'
: 'light';
// Get current theme-color
const $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';
}
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
$meta = document.querySelector(
`meta[name="theme-color"][media*="${colorScheme}"]`,
);
if ($meta) {
const color = $meta.content;
const tempColor = $meta.dataset.contentTemp;
$meta.content = tempColor || '';
setTimeout(() => {
$meta.content = color;
}, 10);
}
$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(

34
src/pages/settings.jsx
View file

@ -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"]')