mirror of
https://github.com/fluxerapp/fluxer
synced 2026-10-17 21:15:32 +09:00
fix(app): apply the current system theme when relaunching (#1737)
This commit is contained in:
1 parent
abb71ed558
commit
a1b595d52f
1 file changed
+8
-2
@@ -29,7 +29,13 @@ export function useThemeCssVariables({
|
|||||||
}: ThemeCssVariablesOptions): void {
|
}: ThemeCssVariablesOptions): void {
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
const htmlNode = document.documentElement;
|
const htmlNode = document.documentElement;
|
||||||
htmlNode.classList.add(`theme-${effectiveTheme}`);
|
const themeClass = `theme-${effectiveTheme}`;
|
||||||
|
for (const existingClass of Array.from(htmlNode.classList)) {
|
||||||
|
if (existingClass.startsWith('theme-') && existingClass !== themeClass) {
|
||||||
|
htmlNode.classList.remove(existingClass);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
htmlNode.classList.add(themeClass);
|
||||||
htmlNode.style.setProperty('--saturation-factor', saturationFactor.toString());
|
htmlNode.style.setProperty('--saturation-factor', saturationFactor.toString());
|
||||||
htmlNode.style.setProperty('--user-select', enableTextSelection ? 'auto' : 'none');
|
htmlNode.style.setProperty('--user-select', enableTextSelection ? 'auto' : 'none');
|
||||||
htmlNode.style.setProperty('--font-size', remFromPx(fontSize));
|
htmlNode.style.setProperty('--font-size', remFromPx(fontSize));
|
||||||
@@ -47,7 +53,7 @@ export function useThemeCssVariables({
|
|||||||
htmlNode.style.removeProperty('--markup-strikethrough-color');
|
htmlNode.style.removeProperty('--markup-strikethrough-color');
|
||||||
}
|
}
|
||||||
return () => {
|
return () => {
|
||||||
htmlNode.classList.remove(`theme-${effectiveTheme}`);
|
htmlNode.classList.remove(themeClass);
|
||||||
htmlNode.style.removeProperty('--saturation-factor');
|
htmlNode.style.removeProperty('--saturation-factor');
|
||||||
htmlNode.style.removeProperty('--link-decoration');
|
htmlNode.style.removeProperty('--link-decoration');
|
||||||
htmlNode.style.removeProperty('--markup-strikethrough-color');
|
htmlNode.style.removeProperty('--markup-strikethrough-color');
|
||||||
|
|||||||
Reference in new issue
Block a user