From 67d71e128da4a869db7dbd244be788eef60dc4b9 Mon Sep 17 00:00:00 2001 From: Kurdistan Tech Ministry Date: Wed, 7 Jan 2026 19:22:38 +0300 Subject: [PATCH] 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 --- package.json | 1 + packages/apps/public/index.html | 2 +- packages/apps/src/Root.tsx | 9 +++---- packages/apps/webpack.serve.cjs | 3 +++ packages/react-components/src/styles/index.ts | 26 +++++++++++++++++++ yarn.lock | 24 +++-------------- 6 files changed, 39 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 83952a0..14d2d74 100644 --- a/package.json +++ b/package.json @@ -110,6 +110,7 @@ "@pezkuwi/types-create": "^16.5.6", "@pezkuwi/types-known": "^16.5.8", "@pezkuwi/types-support": "^16.5.6", + "@pezkuwi/ui-settings": "^3.16.9", "@pezkuwi/util": "^14.0.7", "@pezkuwi/util-crypto": "^14.0.7", "@pezkuwi/wasm-crypto": "^7.5.4", diff --git a/packages/apps/public/index.html b/packages/apps/public/index.html index eaf4fcc..6bbe54b 100644 --- a/packages/apps/public/index.html +++ b/packages/apps/public/index.html @@ -1,5 +1,5 @@ - + diff --git a/packages/apps/src/Root.tsx b/packages/apps/src/Root.tsx index ee28c4f..b896897 100644 --- a/packages/apps/src/Root.tsx +++ b/packages/apps/src/Root.tsx @@ -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 { 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, diff --git a/packages/apps/webpack.serve.cjs b/packages/apps/webpack.serve.cjs index c82ba8e..498b1e7 100644 --- a/packages/apps/webpack.serve.cjs +++ b/packages/apps/webpack.serve.cjs @@ -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' diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts index ac955e2..e0473a7 100644 --- a/packages/react-components/src/styles/index.ts +++ b/packages/react-components/src/styles/index.ts @@ -61,6 +61,32 @@ function hexToRGB (hex: string, alpha?: string) { } export default createGlobalStyle(({ uiHighlight }: Props) => ` + /* Dark theme CSS variables */ + html[data-theme="dark"], + [data-theme="dark"] { + --bg-page: #26272c !important; + --bg-table: #3b3d3f !important; + --bg-input: #38393f !important; + --bg-menu: #26272c !important; + --bg-tabs: #38393f !important; + --bg-sidebar: #1a1b20 !important; + --color-text: rgba(244, 242, 240, 0.8) !important; + --border-table: #343536 !important; + } + + /* Light theme CSS variables */ + html[data-theme="light"], + [data-theme="light"] { + --bg-page: #f5f3f1 !important; + --bg-table: #ffffff !important; + --bg-input: #ffffff !important; + --bg-menu: #ffffff !important; + --bg-tabs: #ffffff !important; + --bg-sidebar: #fafafa !important; + --color-text: rgba(78, 78, 78, 0.8) !important; + --border-table: #efedeb !important; + } + .highlight--all { background: ${getHighlight(uiHighlight)} !important; border-color: ${getHighlight(uiHighlight)} !important; diff --git a/yarn.lock b/yarn.lock index c00fa97..d757198 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3076,9 +3076,9 @@ __metadata: languageName: node linkType: hard -"@pezkuwi/ui-settings@npm:3.16.6": - version: 3.16.6 - resolution: "@pezkuwi/ui-settings@npm:3.16.6" +"@pezkuwi/ui-settings@npm:^3.16.9": + version: 3.16.9 + resolution: "@pezkuwi/ui-settings@npm:3.16.9" dependencies: "@pezkuwi/networks": "npm:^14.0.5" "@pezkuwi/util": "npm:^14.0.5" @@ -3088,23 +3088,7 @@ __metadata: peerDependencies: "@pezkuwi/networks": "*" "@pezkuwi/util": "*" - checksum: 10/a5dc5249828922b367a624b065ce1ba898c0fed64414abed1b1ed1c3f0a04eee1fd972969b9e2010381a266fbb3effb282ba504fc1174765bc55bb52144d89ab - languageName: node - linkType: hard - -"@pezkuwi/ui-settings@npm:^3.16.3": - version: 3.16.8 - resolution: "@pezkuwi/ui-settings@npm:3.16.8" - dependencies: - "@pezkuwi/networks": "npm:^14.0.5" - "@pezkuwi/util": "npm:^14.0.5" - eventemitter3: "npm:^5.0.1" - store: "npm:^2.0.12" - tslib: "npm:^2.8.1" - peerDependencies: - "@pezkuwi/networks": "*" - "@pezkuwi/util": "*" - checksum: 10/caa14d98d337db9ab1498473bde271026dee063b3d762b1023af40c534ec957e2b34b27ad9e91f5c14635537782184479446679b2be00eb0be479eb274123aac + checksum: 10/73c0c3eefc06d98352f4bfc5fbf432a9313673236fa00069fdeb0100ae9a9cc5560074895514ba6598b6de85e8fb4e7d04b15af599603d739f34b2bb758a1fd3 languageName: node linkType: hard