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