darkmode 작업중

dragonsuperf · Mar 29, 2021 · 5a98320 · 5a98320
1 parent 7d142cb
commit 5a98320
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 20 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import axios from 'axios';
-import styled from 'styled-components';
+import styled, { ThemeProvider } from 'styled-components';
 import { Provider } from 'react-redux';
+import { theme, darkTheme } from '@/styles/theme';
 import store from '@/store/store';
 import ChartSection from './components/chart/ChartSection';
 import Header from './components/header/Header';
@@ -22,16 +23,20 @@ const MainContainer = styled.div`
 const appStore = store();
 
 function App() {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
   return (
-    <Provider store={appStore}>
-      <Header />
-      <Wrapper>
-        <MainContainer>
-          <ChartSection />
-          <SideBar />
-        </MainContainer>
-      </Wrapper>
-    </Provider>
+    <ThemeProvider theme={isDarkMode ? darkTheme : theme}>
+      <Provider store={appStore}>
+        <Header />
+        <Wrapper>
+          <MainContainer>
+            <ChartSection />
+            <SideBar />
+          </MainContainer>
+        </Wrapper>
+      </Provider>
+    </ThemeProvider>
   );
 }
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,16 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { ThemeProvider } from 'styled-components';
-import theme from '@/styles/theme';
 import GlobalStyle from '@/styles/global';
 import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <App />
-      <GlobalStyle />
-    </ThemeProvider>
+    <App />
+    <GlobalStyle />
   </React.StrictMode>,
   document.getElementById('app'),
 );
diff --git a/src/styles/global.ts b/src/styles/global.ts
@@ -29,6 +29,8 @@ const GlobalStyle = createGlobalStyle`
   body {
     box-sizing: border-box;
     font-family: 'NanumSquare', sans-serif;
+    color: ${(props) => props.theme.textColor};
+    background-color: ${(props) => props.theme.backgroundColor};
   }
 `;
 

diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -1,23 +1,38 @@
+import { DefaultTheme } from "styled-components";
+
 const size = {
   moblie: '600px',
   tablet: '960px',
   desktop: '1200px',
 };
 
-const theme = {
+export const theme: DefaultTheme = {
   themeColor: '#3AAFA9',
   textColor: '#0a4297',
   fallingColor: '#4386f9',
   risingColor: '#f75467',
   baseBackgroundColor: '#f8f8f8',
   weakBorder: '#eee',
   basicColor: '#1b1b1b',
+  backgroundColor: 'white',
+  moblide: `(max-width: ${size.moblie})`,
+  tablet: `(max-width: ${size.tablet})`,
+  desktop: `(max-width: ${size.desktop})`,
+};
+
+export const darkTheme: DefaultTheme = {
+  themeColor: '#3AAFA9',
+  textColor: '#fafcfc',
+  fallingColor: '#4386f9',
+  risingColor: '#f75467',
+  baseBackgroundColor: '#f8f8f8',
+  weakBorder: '#eee',
+  basicColor: '#1b1b1b',
+  backgroundColor: '#282c34',
   moblide: `(max-width: ${size.moblie})`,
   tablet: `(max-width: ${size.tablet})`,
   desktop: `(max-width: ${size.desktop})`,
 };
 
 export const textColor = '#0a4297';
 export const themeColor = '#3AAFA9';
-
-export default theme;