Merge pull request #320 from velopert/feature/dark-theme

Implements dark theme

Author: velopert

package.json

@@ -12,6 +12,7 @@
     "@loadable/babel-plugin": "^5.13.2",
     "@loadable/component": "^5.15.0",
     "@loadable/server": "^5.15.1",
+    "@react-spring/web": "^9.4.2",
     "@reduxjs/toolkit": "^1.2.2",
     "@sentry/browser": "^5.11.1",
     "@svgr/webpack": "4.3.3",
@@ -46,10 +47,10 @@
     "@types/react-toastify": "^4.1.0",
     "@types/react-virtualized": "^9.21.8",
     "@types/sanitize-html": "^1.20.2",
-    "@types/styled-components": "^4.4.1",
+    "@types/styled-components": "^5.1.21",
     "@types/throttle-debounce": "^2.1.0",
-    "@typescript-eslint/eslint-plugin": "^2.8.0",
-    "@typescript-eslint/parser": "^2.8.0",
+    "@typescript-eslint/eslint-plugin": "^4.1.1",
+    "@typescript-eslint/parser": "^4.1.1",
     "apollo-boost": "^0.4.7",
     "apollo-link": "^1.2.13",
     "aws-lambda": "^1.0.4",
@@ -119,7 +120,7 @@
     "react-outside-click-handler": "^1.3.0",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",
-    "react-spring": "^8.0.27",
+    "react-spring": "^9.4.2",
     "react-textarea-autosize": "^7.1.2",
     "react-toastify": "^5.5.0",
     "react-use": "^13.12.2",
@@ -145,12 +146,12 @@
     "snakecase-keys": "^3.1.0",
     "strip-markdown": "^3.1.1",
     "style-loader": "1.0.0",
-    "styled-components": "^4.4.1",
+    "styled-components": "^5.3.3",
     "terser-webpack-plugin": "2.2.1",
     "throttle-debounce": "^2.1.0",
     "ts-pnp": "1.1.5",
     "typesafe-actions": "^5.1.0",
-    "typescript": "~3.7.2",
+    "typescript": "^4.5.5",
     "unist-util-visit": "^2.0.1",
     "url-loader": "2.3.0",
     "webpack": "4.41.2",

public/index.html

@@ -38,6 +38,19 @@
 
       gtag('config', 'UA-125599395-1');
     </script>
+    <script>
+      function loadTheme() {
+        try {
+          const theme = localStorage.getItem('theme')
+          if (!theme)
+          return
+          document.body.dataset.theme = theme
+        } catch (e) {
+
+        }
+      }
+      loadTheme()     
+    </script>
 
     <title>React App</title>
   </head>

src/App.tsx

@@ -13,6 +13,7 @@ import NotFoundPage from './pages/NotFoundPage';
 import { Helmet } from 'react-helmet-async';
 import HomePage from './pages/home/HomePage';
 import MainPageTemplate from './components/main/MainPageTemplate';
+import { useThemeEffect } from './components/base/hooks/useThemeEffect';
 
 const loadableConfig = {
   fallback: <PageTemplate />,

src/GlobalStyles.ts

@@ -1,4 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
+import { themedPalette, themes } from './lib/styles/themes';
 
 const GlobalStyles = createGlobalStyle`
 body {
@@ -7,8 +8,9 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", 나눔고딕, "Nanum Gothic", "Noto Sans KR", "Noto Sans CJK KR", arial, 돋움, Dotum, Tahoma, Geneva, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #212529;
+  color: ${themedPalette.text1};
   box-sizing: border-box;
+  background: ${themedPalette.bg_page2};
 }
 
 * {
@@ -27,6 +29,26 @@ input, button, textarea {
 html, body, #root {
   height: 100%;
 }
+
+body {
+  background: ${themedPalette.bg_page2};
+  ${themes.light}
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    ${themes.dark}
+  }
+}
+
+body[data-theme='light'] {
+  ${themes.light};
+}
+
+body[data-theme='dark'] {
+  ${themes.dark};
+}
+
 `;
 
 export default GlobalStyles;

src/components/auth/AuthEmailForm.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import { themedPalette } from '../../lib/styles/themes';
 import palette from '../../lib/styles/palette';
 
 const AuthEmailFormBlock = styled.form`
@@ -12,18 +13,24 @@ const AuthEmailFormBlock = styled.form`
     border-bottom-left-radius: 2px;
     padding: 1rem;
     font-size: 1rem;
-    border: 1px solid ${palette.gray3};
+    background: ${themedPalette.bg_element1};
+    border: 1px solid ${themedPalette.border3};
+    color: ${themedPalette.text1};
     border-right: none;
+    outline: none;
+    &:focus {
+      border: 1px solid ${themedPalette.primary1};
+    }
     &::placeholder {
-      color: ${palette.gray6};
+      color: ${themedPalette.text3};
     }
     &:disabled {
-      background: ${palette.gray1};
+      background: ${themedPalette.bg_element2};
     }
   }
   button {
-    background: ${palette.teal6};
-    color: white;
+    background: ${themedPalette.primary1};
+    color: ${themedPalette.button_text};
     font-size: 1rem;
     font-weight: bold;
     outline: none;
@@ -35,11 +42,11 @@ const AuthEmailFormBlock = styled.form`
     cursor: pointer;
     &:hover,
     &:focus {
-      background: ${palette.teal5};
+      background: ${themedPalette.primary2};
     }
     &:disabled {
-      background: ${palette.gray5};
-      color: ${palette.gray3};
+      background: ${themedPalette.border4};
+      color: ${themedPalette.text4};
       cursor: default;
     }
   }
@@ -62,7 +69,7 @@ const AuthEmailForm: React.FC<AuthEmailFormProps> = ({
 }) => {
   return (
     <AuthEmailFormBlock
-      onSubmit={e => {
+      onSubmit={(e) => {
         e.preventDefault();
         onSubmit(value);
       }}

src/components/auth/AuthEmailSuccess.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { MdCheck } from 'react-icons/md';
+import { themedPalette } from '../../lib/styles/themes';
 import palette from '../../lib/styles/palette';
 
 const AuthEmailSuccessBlock = styled.div`
@@ -11,7 +12,7 @@ const AuthEmailSuccessBlock = styled.div`
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   height: 3rem;
-  color: ${palette.teal7};
+  color: ${palette.teal9};
   .icon {
     font-size: 1.5rem;
   }

src/components/auth/AuthForm.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import useInput from '../../lib/hooks/useInput';
 import AuthEmailForm from './AuthEmailForm';
 import { AuthMode } from '../../modules/core';
+import { themedPalette } from '../../lib/styles/themes';
 import palette from '../../lib/styles/palette';
 import AuthSocialButtonGroup from './AuthSocialButtonGroup';
 import AuthEmailSuccess from './AuthEmailSuccess';
@@ -25,12 +26,12 @@ const AuthFormBlock = styled.div`
   }
   h2 {
     font-size: 1.3125rem;
-    color: ${palette.gray8};
+    color: ${themedPalette.text1};
   }
   h4 {
     margin-top: 1rem;
     margin-bottom: 1rem;
-    color: ${palette.gray6};
+    color: ${themedPalette.text3};
   }
   section + section {
     margin-top: 2.5rem;
@@ -47,7 +48,7 @@ const AuthFormBlock = styled.div`
     .link {
       display: inline-block;
       font-weight: bold;
-      color: ${palette.teal6};
+      color: ${themedPalette.primary1};
       cursor: pointer;
       &:hover {
         text-decoration: underline;

src/components/auth/AuthModal.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { MdClose } from 'react-icons/md';
 import zIndexes from '../../lib/styles/zIndexes';
+import { themedPalette } from '../../lib/styles/themes';
 import palette from '../../lib/styles/palette';
 import { undrawJoyride } from '../../static/images';
 import transitions from '../../lib/styles/transitions';
@@ -28,7 +29,7 @@ const AuthModalBlock = styled.div<{ visible: boolean }>`
       height: 100%;
     }
 
-    ${props =>
+    ${(props) =>
       props.visible
         ? css`
             animation: ${transitions.popInFromBottom} 0.4s forwards ease-in-out;
@@ -44,7 +45,7 @@ const AuthModalBlock = styled.div<{ visible: boolean }>`
         display: none;
       }
       width: 216px;
-      background: ${palette.gray1};
+      background: ${themedPalette.bg_element2};
       padding: 1.5rem;
       display: flex;
       flex-direction: column;
@@ -58,14 +59,14 @@ const AuthModalBlock = styled.div<{ visible: boolean }>`
       .welcome {
         font-size: 1.75rem;
         margin-top: 1.5rem;
-        color: ${palette.gray7};
+        color: ${themedPalette.text2};
         text-align: center;
         font-weight: 600;
       }
     }
     .white-block {
       flex: 1;
-      background: white;
+      background: ${themedPalette.bg_page2};
       padding: 1.5rem;
       display: flex;
       flex-direction: column;
@@ -76,7 +77,7 @@ const AuthModalBlock = styled.div<{ visible: boolean }>`
         display: flex;
         justify-content: flex-end;
         font-size: 1.5rem;
-        color: ${palette.gray6};
+        color: ${themedPalette.text3};
         margin-bottom: 2.25rem;
         svg {
           cursor: pointer;
@@ -106,7 +107,7 @@ const AuthModal: React.FC<AuthModalProps> = ({
 }) => {
   const [closed, setClosed] = useState(true);
   useEffect(() => {
-    let timeoutId: number | null = null;
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
     if (visible) {
       setClosed(false);
     } else {

src/components/auth/AuthSocialButton.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { FacebookIcon, GoogleIcon, GithubIcon } from '../../static/svg';
+import { themedPalette } from '../../lib/styles/themes';
 import palette from '../../lib/styles/palette';
 
 const AuthSocialButtonBlock = styled.a<{ border: boolean }>`
@@ -13,10 +14,10 @@ const AuthSocialButtonBlock = styled.a<{ border: boolean }>`
   outline: none;
   transition: 0.125s all ease-in;
   color: white;
-  ${props =>
+  ${(props) =>
     props.border &&
     css`
-      border: 1px solid ${palette.gray3};
+      border: 1px solid ${themedPalette.border3};
     `}
   &:focus {
     box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.35);

src/components/auth/__tests__/__snapshots__/AuthForm.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`AuthForm renders correctly 1`] = `
 <div>
   <div
-    class="sc-ifAKCX kIBOZW"
+    class="sc-eCImPb fOWQkg"
   >
     <div
       class="upper-wrapper"
@@ -19,7 +19,7 @@ exports[`AuthForm renders correctly 1`] = `
           회원가입
         </h4>
         <form
-          class="sc-bdVaJa izhlxF"
+          class="sc-bdvvtL knJYhw"
         >
           <input
             placeholder="이메일을 입력하세요."
@@ -39,10 +39,10 @@ exports[`AuthForm renders correctly 1`] = `
           회원가입
         </h4>
         <div
-          class="sc-htpNat jVlyIb"
+          class="sc-dkPtRN dHVNVs"
         >
           <a
-            class="sc-bwzfXH dOnywA"
+            class="sc-gsDKAQ cQxaoZ"
             href="http://localhost:5000/api/v2/auth/social/redirect/github?next=/"
             style="background: rgb(39, 46, 51);"
             tabindex="4"
@@ -52,7 +52,7 @@ exports[`AuthForm renders correctly 1`] = `
             </svg>
           </a>
           <a
-            class="sc-bwzfXH fVlvjo"
+            class="sc-gsDKAQ YbYbf"
             href="http://localhost:5000/api/v2/auth/social/redirect/google?next=/"
             style="background: white;"
             tabindex="5"
@@ -62,7 +62,7 @@ exports[`AuthForm renders correctly 1`] = `
             </svg>
           </a>
           <a
-            class="sc-bwzfXH dOnywA"
+            class="sc-gsDKAQ cQxaoZ"
             href="http://localhost:5000/api/v2/auth/social/redirect/facebook?next=/"
             style="background: rgb(59, 89, 152);"
             tabindex="6"

src/components/base/BodyTransition.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useEffect, useState } from 'react';
+import { createGlobalStyle } from 'styled-components';
+
+const Styles = createGlobalStyle`
+  body { 
+    transition: background 0.125s ease-in;
+  }
+`;
+
+function BodyTransition() {
+  const [enabled, setEnabled] = useState(false);
+  useEffect(() => {
+    setTimeout(() => {
+      setEnabled(true);
+    }, 500);
+  }, []);
+
+  if (!enabled) return null;
+  return <Styles />;
+}
+
+export default BodyTransition;

src/components/base/FloatingHeader.tsx

@@ -6,6 +6,7 @@ import MainResponsive from '../main/MainResponsive';
 import { getScrollTop } from '../../lib/utils';
 import { Route } from 'react-router-dom';
 import ReadingListTab from '../readingList/ReadingListTab';
+import { themedPalette } from '../../lib/styles/themes';
 
 export type FloatingHeaderProps = {};
 
@@ -107,7 +108,7 @@ function FloatingHeader(props: FloatingHeaderProps) {
 const Block = styled.div`
   position: fixed;
   top: 0;
-  background: white;
+  background: ${themedPalette.bg_element1};
   width: 100%;
   z-index: 10;