Non-vars overrides

polkadot-js · Aug 19, 2023 · 6bb5f91 · 6bb5f91
1 parent e539253
commit 6bb5f91
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 31 deletions.
diff --git a/packages/extension-ui/src/components/View.tsx b/packages/extension-ui/src/components/View.tsx
@@ -1,9 +1,7 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Theme } from './index.js';
-
-import React, { useCallback, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { createGlobalStyle } from 'styled-components';
 
 // FIXME We should not import from index when this one is imported there as well
@@ -15,24 +13,21 @@ interface Props {
 }
 
 function setGlobalTheme (theme: string): void {
-  document?.documentElement?.setAttribute('data-theme', theme);
+  const _theme = theme === 'dark'
+    ? 'dark'
+    : 'light';
+
+  localStorage.setItem('theme', _theme);
+  document?.documentElement?.setAttribute('data-theme', _theme);
 }
 
 function View ({ children, className }: Props): React.ReactElement<Props> {
   useEffect((): void => {
     setGlobalTheme(chooseTheme());
   }, []);
 
-  const switchTheme = useCallback(
-    (theme: Theme): void => {
-      localStorage.setItem('theme', theme);
-      setGlobalTheme(theme);
-    },
-    []
-  );
-
   return (
-    <ThemeSwitchContext.Provider value={switchTheme}>
+    <ThemeSwitchContext.Provider value={setGlobalTheme}>
       <BodyTheme />
       <Main className={className}>
         {children}

diff --git a/packages/extension/public/index.html b/packages/extension/public/index.html
@@ -23,6 +23,7 @@
       }
 
       :root {
+        /* general items */
         --borderRadius: 4px;
         --boxLineHeight: 1rem;
         --boxMargin: 0.75rem 0;
@@ -33,10 +34,20 @@
         --labelFontSize: 13px;
         --labelLineHeight: 18px;
         --lineHeight: 26px;
+        /* shared colors */
+        --accountDotsIconColor: #8E8E8E;
+        --buttonBackground: #E86F00;
+        --buttonBackgroundDangerHover: #D93B3B;
+        --buttonBackgroundHover: #ED9329;
+        --buttonTextColor: #FFFFFF;
+        --connectedDotColor: seagreen;
+        --errorColor: #E42F2F;
+        --iconWarningColor: #FF7D01;
+        --identiconBackground: #F4F5F8;
+        --primaryColor: #FF7D01;
       }
 
-      :root {
-        --accountDotsIconColor: #8E8E8E;
+      [data-theme="dark"] {
         --addAccountImageBackground: #1A1B20;
         --backButtonBackground: #3A3B41;
         --backButtonBackgroundHover: #3a3b41ad;
@@ -46,39 +57,23 @@
         --boxBackground: #1A1B20;
         --boxBorderColor: #303030;
         --boxShadow: rgba(0, 0, 0, 0.86);
-        --buttonBackground: #E86F00;
         --buttonBackgroundDanger: #AF1111;
-        --buttonBackgroundDangerHover: #D93B3B;
-        --buttonBackgroundHover: #ED9329;
-        --buttonTextColor: #FFFFFF;
-        --connectedDotColor: seagreen;
         --errorBorderColor: #7E3530;
-        --errorColor: #E42F2F;
         --highlightedAreaBackground: #212226;
         --iconDangerColor: #AF1111;
         --iconNeutralColor: #8E8E8E;
-        --iconWarningColor: #FF7D01;
-        --identiconBackground: #F4F5F8;
         --inputBackground: #111218;
         --inputBorderColor: #43444B;
         --labelColor: #9F9E99;
         --parentLabelColor: #4A7463;
         --popupBackground: #38393F;
-        --primaryColor: #FF7D01;
         --readonlyInputBackground: #1A1B20;
         --subTextColor: #DDD;
         --textColor: #FFFFFF;
         --textColorDanger: #FF8686;
       }
 
-      [data-theme="dark"] {
-        /* Just uses the base vars */
-        --id: 'dark';
-      }
-
       [data-theme="light"] {
-        /* Extends the dark theme */
-        --id: 'light';
         --addAccountImageBackground: #FFF;
         --backButtonBackground: #D7D7D7;
         --backButtonBackgroundHover: #d7d7d7ad;