Add quick and dirty dark theme

leaty · Nov 22, 2021 · 7b6b265 · 7b6b265
1 parent ae184d5
commit 7b6b265
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 13 deletions.
diff --git a/src/app.module.scss b/src/app.module.scss
@@ -1,3 +1,5 @@
+@import 'theme.scss';
+
 @font-face {
   font-family: 'Cinzel Decorative';
   src: url('~src/assets/fonts/CinzelDecorative-Regular.ttf');
@@ -37,7 +39,7 @@
     padding: 0.2em 1em;
     line-height: 2.4em;
 
-    color: #000000;
+    color: $color-text;
     font-weight: 500;
     font-size: 1.2ex;
 

diff --git a/src/app.tsx b/src/app.tsx
@@ -3,7 +3,7 @@ import { HashRouter as Router, Switch, Route } from 'react-router-dom';
 
 import { Client as Styletron } from 'styletron-engine-atomic';
 import { Provider as StyletronProvider } from 'styletron-react';
-import { LightTheme, BaseProvider } from 'baseui';
+import { DarkTheme, BaseProvider } from 'baseui';
 import { SnackbarProvider, PLACEMENT } from 'baseui/snackbar';
 
 import AppContext from 'src/share/context';
@@ -65,7 +65,7 @@ const App = () => {
   return (
     <AppContext.Provider value={contextValue}>
       <StyletronProvider value={engine}>
-        <BaseProvider theme={LightTheme}>
+        <BaseProvider theme={DarkTheme}>
           <SnackbarProvider
             placement={PLACEMENT.bottom}
             overrides={{

diff --git a/src/components/perk-showcase/style.module.scss b/src/components/perk-showcase/style.module.scss
@@ -1,3 +1,5 @@
+@import '../../theme.scss';
+
 .item {
   display: flex;
   align-items: center;
@@ -7,7 +9,7 @@
   user-select: none;
 
   &:hover {
-    background-color: #f6f6f6;
+    background-color: $color-hover;
     cursor: pointer;
   }
 
@@ -24,20 +26,21 @@
     }
 
     .name {
-      font-size: 0.8rem;
+      font-size: 16px;
       font-weight: bold;
       color: #997328;
     }
 
     .detail {
-      font-size: 12px;
+      font-size: 14px;
+      color: #fff;
 
       > span:not(:last-child) {
         margin-right: 10px;
       }
 
       .value {
-        font-size: 13px;
+        font-size: 14px;
         font-weight: bold;
       }
 

diff --git a/src/components/toolbar/style.module.scss b/src/components/toolbar/style.module.scss
@@ -1,3 +1,5 @@
+@import '../../theme.scss';
+
 .toolbar {
   width: 100vw;
   z-index: 10;
@@ -28,7 +30,7 @@
     -webkit-app-region: no-drag;
 
     &:hover {
-      background-color: #e2e2e2;
+      background-color: $color-hover;
       cursor: pointer;
     }
   }

diff --git a/src/index.scss b/src/index.scss
@@ -1,4 +1,5 @@
 @import '~normalize.css';
+@import 'theme.scss';
 
 ::-webkit-scrollbar {
   width: 10px;
@@ -26,6 +27,8 @@ body {
     helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background: $color-background;
+  color: $color-text;
 
   //color: #ffffff;
   font-weight: 600;

diff --git a/src/modules/popup/index.tsx b/src/modules/popup/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Client as Styletron } from 'styletron-engine-atomic';
 import { Provider as StyletronProvider } from 'styletron-react';
-import { LightTheme, BaseProvider } from 'baseui';
+import { DarkTheme, BaseProvider } from 'baseui';
 
 import initI18n from 'src/modules/i18n';
 import { Content } from './content';
@@ -13,7 +13,7 @@ const engine = new Styletron();
 export default function Popup() {
   return (
     <StyletronProvider value={engine}>
-      <BaseProvider theme={LightTheme}>
+      <BaseProvider theme={DarkTheme}>
         <Content />
       </BaseProvider>
     </StyletronProvider>

diff --git a/src/modules/popup/style.module.scss b/src/modules/popup/style.module.scss
@@ -1,20 +1,22 @@
+@import '../../theme.scss';
+
 body {
   overflow-y: hidden;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
     'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   margin: unset;
   overflow-x: hidden;
-  background: #ffffff;
+  background: $color-background;
 }
 
 .list {
   display: flex;
   flex-direction: column;
-  background-color: #ffffff;
+  background-color: $color-background;
 }
 
 .main {
-  background-color: #ffffff;
+  background-color: $color-background;
 }
 
 .drag {

diff --git a/src/theme.scss b/src/theme.scss
@@ -0,0 +1,3 @@
+$color-text: #ffffff;
+$color-background: #1a1c1f;
+$color-hover: #292929;