mirror of
https://github.com/pezkuwichain/pezkuwi-apps.git
synced 2026-04-22 05:27:56 +00:00
feat: implement dark/light theme switching
- Add ui-settings resolution for v3.16.9 - Add CSS variables for dark/light themes in GlobalStyle - Set default data-theme attribute on html element - Simplify theme creation in Root.tsx - Disable webpack error overlay for cleaner dev experience
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" data-theme="light">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="theme-color" content="#000000">
|
||||
|
||||
@@ -20,10 +20,9 @@ interface Props {
|
||||
store?: KeyringStore;
|
||||
}
|
||||
|
||||
function createTheme ({ uiTheme }: { uiTheme: string }): ThemeDef {
|
||||
const theme = uiTheme === 'dark'
|
||||
? 'dark'
|
||||
: 'light';
|
||||
function createTheme (settings: { uiTheme?: string }): ThemeDef {
|
||||
const uiTheme = settings?.uiTheme || 'light';
|
||||
const theme = uiTheme === 'dark' ? 'dark' : 'light';
|
||||
|
||||
document?.documentElement?.setAttribute('data-theme', theme);
|
||||
|
||||
@@ -34,7 +33,7 @@ function Root ({ isElectron, store }: Props): React.ReactElement<Props> {
|
||||
const [theme, setTheme] = useState(() => createTheme(settings));
|
||||
|
||||
useEffect((): void => {
|
||||
settings.on('change', (settings) => setTheme(createTheme(settings)));
|
||||
settings.on('change', (newSettings) => setTheme(createTheme(newSettings)));
|
||||
}, []);
|
||||
|
||||
// The ordering here is critical. It defines the hierarchy of dependencies,
|
||||
|
||||
@@ -11,6 +11,9 @@ module.exports = merge(
|
||||
baseConfig(__dirname, 'development'),
|
||||
{
|
||||
devServer: {
|
||||
client: {
|
||||
overlay: false // Disable error overlay
|
||||
},
|
||||
headers: {
|
||||
'Content-Security-Policy': "frame-ancestors 'none'",
|
||||
'X-Frame-Options': 'DENY'
|
||||
|
||||
Reference in New Issue
Block a user