120 lines
3.4 KiB
JavaScript
120 lines
3.4 KiB
JavaScript
import React, { createContext, useEffect } from 'react';
|
|
import { LocalStorage } from "../../utils/LocalStorage.mjs";
|
|
import { inject, observer } from "mobx-react";
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
export const ThemesContext = createContext();
|
|
export const ThemesProvider = props => {
|
|
const { t, ready } = useTranslation();
|
|
const storeThemes = props.storeThemes;
|
|
const themes = storeThemes.themes;
|
|
const nameColors = storeThemes.nameColors;
|
|
|
|
useEffect(() => {
|
|
initTheme();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (ready) {
|
|
const translations = getTranslationsThemes();
|
|
storeThemes.setTranslationsThemes(translations);
|
|
}
|
|
}, [ready]);
|
|
|
|
const getTranslationsThemes = () => {
|
|
const translations = Object.keys(themes).reduce((acc, theme) => {
|
|
acc[theme] = t(`Common.Themes.${theme}`);
|
|
return acc;
|
|
}, {});
|
|
|
|
return translations;
|
|
}
|
|
|
|
const initTheme = () => {
|
|
const theme = window.mobileUiTheme;
|
|
const editorConfig = window.native?.editorConfig;
|
|
|
|
storeThemes.setConfigSelectTheme(editorConfig?.theme?.select != false);
|
|
setUITheme(theme ? theme.type : editorConfig?.theme?.type);
|
|
|
|
applyTheme();
|
|
}
|
|
|
|
const setUITheme = type => {
|
|
if(type && type !== 'system') {
|
|
const theme = themes[type];
|
|
storeThemes.setColorTheme(theme);
|
|
} else {
|
|
setSystemTheme();
|
|
}
|
|
}
|
|
|
|
const setSystemTheme = () => {
|
|
let theme = themes.light;
|
|
|
|
if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
theme = themes.dark;
|
|
}
|
|
|
|
storeThemes.setColorTheme(themes["system"]);
|
|
storeThemes.setSystemColorTheme(theme);
|
|
}
|
|
|
|
const getCurrentThemeColors = colors => {
|
|
let outObject = {};
|
|
const style = getComputedStyle(document.body);
|
|
|
|
colors.forEach(item => {
|
|
outObject[item] = style.getPropertyValue('--' + item).trim()
|
|
});
|
|
|
|
return outObject;
|
|
}
|
|
|
|
const changeTheme = key => {
|
|
const theme = themes[key];
|
|
const type = theme.type;
|
|
|
|
LocalStorage.setItem("ui-theme-client", JSON.stringify(theme));
|
|
storeThemes.setColorTheme(theme);
|
|
|
|
if(type !== "system") {
|
|
storeThemes.resetSystemColorTheme();
|
|
} else {
|
|
setSystemTheme();
|
|
}
|
|
|
|
applyTheme();
|
|
}
|
|
|
|
const applyTheme = () => {
|
|
const $body = $$('body');
|
|
|
|
let theme = storeThemes.systemColorTheme;
|
|
if(!theme) theme = storeThemes.colorTheme;
|
|
|
|
$body.attr('class') && $body.attr('class', $body.attr('class').replace(/\s?theme-type-(?:dark|light)/, ''));
|
|
$body.addClass(`theme-type-${theme.type}`);
|
|
|
|
const onEngineCreated = api => {
|
|
let obj = getCurrentThemeColors(nameColors);
|
|
obj.type = theme.type;
|
|
obj.name = theme.id;
|
|
|
|
api.asc_setSkin(obj);
|
|
};
|
|
|
|
const api = Common.EditorApi ? Common.EditorApi.get() : undefined;
|
|
if(!api) Common.Notifications.on('engineCreated', onEngineCreated);
|
|
else onEngineCreated(api);
|
|
}
|
|
|
|
return (
|
|
<ThemesContext.Provider value={{ changeTheme }}>
|
|
{props.children}
|
|
</ThemesContext.Provider>
|
|
)
|
|
}
|
|
|
|
const themes = inject('storeThemes')(observer(ThemesProvider));
|
|
export {themes as Themes} |