feat(dark-theme): add theme support

ph1p · May 24, 2020 · 95a1093 · 95a1093
1 parent 82d92ad
commit 95a1093
Show file tree

Hide file tree

Showing 13 changed files with 139 additions and 120 deletions.
diff --git a/src/Ui.tsx b/src/Ui.tsx
@@ -9,7 +9,7 @@ import {
   Switch,
 } from 'react-router-dom';
 import io from 'socket.io-client';
-import styled, { createGlobalStyle } from 'styled-components';
+import styled, { createGlobalStyle, ThemeProvider } from 'styled-components';
 // styles
 import './assets/css/ui.css';
 import './assets/figma-ui/main.min.css';
@@ -27,6 +27,7 @@ import UserListView from './views/UserList';
 
 import { reaction } from 'mobx';
 import { useStore, StoreProvider } from './store';
+import theme from './shared/theme';
 
 onmessage = (message) => {
   if (message.data.pluginMessage) {
@@ -46,6 +47,7 @@ onmessage = (message) => {
 const GlobalStyle = createGlobalStyle`
   body {
     overflow: hidden;
+    background-color: ${p => p.theme.backgroundColor};
   }
 `;
 
@@ -156,31 +158,33 @@ const init = () => {
     }, []);
 
     return (
-      <AppWrapper>
-        <GlobalStyle />
-
-        <SocketProvider socket={socket}>
-          <Router>
-            <Notifications />
-
-            {store.isMinimized && <Redirect to="/minimized" />}
-            <Switch>
-              <Route exact path="/minimized">
-                <MinimizedView />
-              </Route>
-              <Route exact path="/user-list">
-                <UserListView />
-              </Route>
-              <Route exact path="/settings">
-                <SettingsView />
-              </Route>
-              <Route exact path="/">
-                <ChatView />
-              </Route>
-            </Switch>
-          </Router>
-        </SocketProvider>
-      </AppWrapper>
+      <ThemeProvider theme={theme(store.settings.isDarkTheme)}>
+        <AppWrapper>
+          <GlobalStyle />
+
+          <SocketProvider socket={socket}>
+            <Router>
+              <Notifications />
+
+              {store.isMinimized && <Redirect to="/minimized" />}
+              <Switch>
+                <Route exact path="/minimized">
+                  <MinimizedView />
+                </Route>
+                <Route exact path="/user-list">
+                  <UserListView />
+                </Route>
+                <Route exact path="/settings">
+                  <SettingsView />
+                </Route>
+                <Route exact path="/">
+                  <ChatView />
+                </Route>
+              </Switch>
+            </Router>
+          </SocketProvider>
+        </AppWrapper>
+      </ThemeProvider>
     );
   });
 

diff --git a/src/assets/icons/Theme.tsx b/src/assets/icons/Theme.tsx
@@ -8,48 +8,21 @@ const ThemeIcon: FunctionComponent<Props> = (props) => {
   if (props.active) {
     return (
       <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="30"
-        height="31"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
         fill="none"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <g filter="url(#filter0_d)">
-          <circle cx="15" cy="12" r="5" fill="#626E81" />
-          <circle
-            cx="15"
-            cy="12"
-            r="10"
-            stroke="#626E81"
-            strokeDasharray="1 10"
-            strokeWidth="2"
-          />
-        </g>
-        <defs>
-          <filter
-            id="filter0_d"
-            width="32"
-            height="32"
-            x="-1"
-            y="0"
-            colorInterpolationFilters="sRGB"
-            filterUnits="userSpaceOnUse"
-          >
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
-            <feColorMatrix
-              in="SourceAlpha"
-              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            />
-            <feOffset dy="4" />
-            <feGaussianBlur stdDeviation="2" />
-            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
-            <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
-            <feBlend
-              in="SourceGraphic"
-              in2="effect1_dropShadow"
-              result="shape"
-            />
-          </filter>
-        </defs>
+        <circle cx="12" cy="12" r="5" fill="#A2ADC0" />
+        <circle
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="#A2ADC0"
+          strokeWidth="2"
+          strokeDasharray="1 10"
+        />
       </svg>
     );
   }

diff --git a/src/components/Chatbar.tsx b/src/components/Chatbar.tsx
@@ -176,7 +176,7 @@ const ChatInput = styled.div`
   margin: 0;
   z-index: 3;
   transition: width 0.3s;
-  background-color: #eceff4;
+  background-color: ${(p) => p.theme.secondaryBackgroundColor};
   border-radius: 10px 10px 0 10px;
   width: 100%;
 
@@ -195,6 +195,7 @@ const ChatInput = styled.div`
       color: #a2adc0;
     }
   }
+
   button {
     border: 0;
     padding: 6px 5px;
@@ -232,7 +233,7 @@ const SendButton = styled.div`
 const SelectionCheckbox = styled.div`
   animation-delay: 0.2s;
   transition: all 0.2s;
-  background-color: #eceff4;
+  background-color: ${(p) => p.theme.secondaryBackgroundColor};
   border-radius: 10px;
   height: 41px;
   width: ${(p) => (p.hasSelection ? 49 : 0)}px;
@@ -264,7 +265,7 @@ const SelectionCheckbox = styled.div`
     text-align: center;
     margin: 0 auto;
     background-color: #a2adc0;
-    color: #eceff4;
+    color: ${(p) => p.theme.secondaryBackgroundColor};
     font-weight: bold;
     font-size: 10px;
     opacity: ${(p) => (p.checked ? 1 : 0.5)};

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -92,7 +92,7 @@ const Chip = styled.div`
   min-width: 19px;
   min-height: 19px;
   max-height: 19px;
-  background-color: #efeff3;
+  background-color: ${(p) => p.theme.secondaryBackgroundColor};
   border-radius: 40px;
   padding: 2px 2px;
   text-align: center;
@@ -114,18 +114,29 @@ const UserChips = styled.div`
 const Head = styled.div`
   display: flex;
   height: 37px;
-  border-bottom: 1px solid #e4e4e4;
+
+  border-bottom: 1px solid ${(p) => p.theme.borderColor};
   top: 0;
   z-index: 9;
-  background-color: #fff;
   display: flex;
   padding: 0 16px;
   font-size: 11px;
 
   .icon {
     margin-right: 6px;
+    svg {
+      path {
+        fill: ${(p) => p.theme.backgroundColor};
+      }
+      circle,
+      path {
+        stroke: ${(p) => p.theme.fontColor};
+      }
+    }
   }
+
   .item {
+    color: ${(p) => p.theme.fontColor};
     opacity: 0.4;
     font-weight: bold;
     margin-right: 16px;
@@ -143,15 +154,14 @@ const Head = styled.div`
     align-self: center;
     cursor: pointer;
     font-weight: bold;
-    color: #fff;
     &::after {
       content: '';
       left: 0;
       top: 17px;
       position: absolute;
       width: 11px;
       height: 1px;
-      background-color: #000;
+      background-color: ${(p) => p.theme.fontColor};
     }
   }
   .plus {
@@ -163,7 +173,7 @@ const Head = styled.div`
       position: absolute;
       width: 1px;
       height: 11px;
-      background-color: #000;
+      background-color: ${(p) => p.theme.fontColor};
     }
   }
 `;

diff --git a/src/components/Message.tsx b/src/components/Message.tsx
@@ -148,9 +148,9 @@ const MessageContainer = styled.div`
   }
 
   &.me {
-    color: #000;
+    color: ${(p) => p.theme.fontColor};
     padding: 11px 16px;
-    background-color: #ebebeb;
+    background-color: ${(p) => p.theme.secondaryBackgroundColor};
     border-radius: 14px 14px 3px 14px;
     header {
       color: #000;

diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
@@ -37,12 +37,10 @@ const NotificationContainer = styled.div`
   border-radius: 5px;
   height: auto;
   margin-bottom: 5px;
-  background-color: #000;
-  &.success {
-    background-color: #1bc47d;
-  }
+  background-color: ${(p) => p.theme.secondaryBackgroundColor};
+  color: ${(p) => p.theme.fontColor};
   span {
-    color: #fff;
+    color: ${(p) => p.theme.fontColor};
     font-size: 12px;
   }
 `;

diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
@@ -112,17 +112,21 @@ const Arrow = styled.div`
   svg {
     height: 21px;
     width: 21px;
+    rect {
+      fill: ${(p) => p.theme.tooltipBackgroundColor};
+    }
   }
 `;
 
 const Tooltip = styled.div`
   position: fixed;
-  background-color: #1e1940;
+  background-color: ${(p) => p.theme.tooltipBackgroundColor};
   border-radius: 20px;
   opacity: 1;
   z-index: 4;
-  color: #fff;
+  color: ${(p) => p.theme.fontColorInverse};
   box-shadow: 0 10px 34px rgba(30, 25, 64, 0.34);
+
   &[data-popper-placement^='top'] {
     ${Arrow} {
       bottom: -7px;

diff --git a/src/shared/style.ts b/src/shared/style.ts
diff --git a/src/shared/theme.ts b/src/shared/theme.ts
@@ -0,0 +1,19 @@
+const darkTheme = {
+  fontColor: "#fff",
+  fontColorInverse: "#000",
+  backgroundColor: '#0D0B1C',
+  secondaryBackgroundColor: '#1F2538',
+  borderColor: '#272D36',
+  tooltipBackgroundColor: '#fff'
+};
+
+const theme = {
+  fontColor: "#000",
+  fontColorInverse: "#fff",
+  backgroundColor: '#fff',
+  secondaryBackgroundColor: '#eceff4',
+  borderColor: '#e4e4e4',
+  tooltipBackgroundColor: '#1e1940'
+};
+
+export default (isDarkTheme) => isDarkTheme ? darkTheme : theme;
diff --git a/src/store/index.tsx b/src/store/index.tsx
@@ -77,6 +77,7 @@ class RootStore {
     url: DEFAULT_SERVER_URL,
     enableNotificationTooltip: true,
     enableNotificationSound: true,
+    isDarkTheme: false,
   };
 
   @observable

diff --git a/src/views/Settings/components/AvatarPicker.tsx b/src/views/Settings/components/AvatarPicker.tsx
@@ -52,7 +52,7 @@ const AvatarPickerComponent: FunctionComponent<SettingsProps> = (props) => {
 const AvatarPickerAction = styled.div`
   width: 59px;
   height: 59px;
-  background-color: #eceff4;
+  background-color: ${(p) => p.theme.secondaryBackgroundColor};
   border-radius: 18px 18px 3px 18px;
   font-size: 28px;
   text-align: center;