├── src
    ├── ss.png
    ├── index.js
    ├── components
    │   ├── Content.js
    │   └── Toggle.js
    ├── styles
    │   ├── useDarkMode.js
    │   └── globalStyles.js
    └── App.js
├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── README.md
├── .gitignore
└── package.json


/src/ss.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/candraKriswinarto/react-dark-mode/HEAD/src/ss.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/candraKriswinarto/react-dark-mode/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/candraKriswinarto/react-dark-mode/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/candraKriswinarto/react-dark-mode/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | ReactDOM.render(
 6 |   <React.StrictMode>
 7 |     <App />
 8 |   </React.StrictMode>,
 9 |   document.getElementById('root')
10 | );


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # How to Add Dark Mode to Your React App | Styled Components
2 | Implement dark mode in react app with styled components
3 | 
4 | ## screenshot
5 | ![React dark mode](./src/ss.png)
6 | 
7 | ### Video Tutorial
8 | [youtube](https://youtu.be/Zgvm-mP9_3A)


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/components/Content.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export const Content = () => {
 4 |   return (
 5 |     <div>
 6 |       <h1>Lorem ipsum dolor sit amet consectetur.</h1>
 7 |       <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque id dolore aspernatur consequuntur dignissimos adipisci aut maxime, commodi magni veritatis reiciendis et nulla deleniti placeat voluptatibus iste repellendus voluptate. Voluptatibus?</p>
 8 |       <button className="btn-primary">Read More</button>
 9 |     </div>
10 |   )
11 | }
12 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/styles/useDarkMode.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react'
 2 | 
 3 | export const useDarkMode = () => {
 4 |   const [ theme, setTheme ] = useState('dark');
 5 | 
 6 |   const setMode = mode => {
 7 |     window.localStorage.setItem('theme', mode);
 8 |     setTheme(mode);
 9 |   }
10 | 
11 |   const toggleTheme = () => {
12 |     theme === 'dark' ? setMode('light') : setMode('dark');
13 |   }
14 | 
15 |   useEffect(() => {
16 |     const localTheme = window.localStorage.getItem('theme');
17 |     localTheme ? setTheme(localTheme) : setMode('dark');
18 |   }, []);
19 |   
20 |   return [ theme, toggleTheme ];
21 | }
22 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Content } from './components/Content';
 3 | import { Toggle } from './components/Toggle';
 4 | import { useDarkMode } from './styles/useDarkMode';
 5 | import { GlobalStyles, lightTheme, darkTheme } from './styles/globalStyles';
 6 | import styled, { ThemeProvider } from 'styled-components';
 7 | 
 8 | const Container = styled.div`
 9 |   max-width: 50%;
10 |   margin: 8rem auto 0;
11 | `;
12 | 
13 | function App() {
14 |   const [ theme, toggleTheme ] = useDarkMode();
15 |   const themeMode = theme === 'light' ? lightTheme : darkTheme;
16 | 
17 |   return (
18 |     <ThemeProvider theme={themeMode}>
19 |       <Container>
20 |         <GlobalStyles />
21 |         <Toggle theme={theme} toggleTheme={toggleTheme} />
22 |         <Content />
23 |       </Container>
24 |     </ThemeProvider>
25 |   );
26 | }
27 | 
28 | export default App;
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-dark-light-mode",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^4.2.4",
 7 |     "@testing-library/react": "^9.3.2",
 8 |     "@testing-library/user-event": "^7.1.2",
 9 |     "react": "^16.13.1",
10 |     "react-dom": "^16.13.1",
11 |     "react-scripts": "3.4.3",
12 |     "styled-components": "^5.2.0"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "eslintConfig": {
21 |     "extends": "react-app"
22 |   },
23 |   "browserslist": {
24 |     "production": [
25 |       ">0.2%",
26 |       "not dead",
27 |       "not op_mini all"
28 |     ],
29 |     "development": [
30 |       "last 1 chrome version",
31 |       "last 1 firefox version",
32 |       "last 1 safari version"
33 |     ]
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/styles/globalStyles.js:
--------------------------------------------------------------------------------
 1 | import { createGlobalStyle } from 'styled-components';
 2 | 
 3 | export const GlobalStyles = createGlobalStyle`
 4 |   body {
 5 |     background: ${({ theme }) => theme.body};
 6 |     color: ${({ theme }) => theme.text};
 7 |     font-family: 'Roboto', sans-serif;
 8 |     transition: all .5s linear;
 9 |   }
10 | 
11 |   p {
12 |     line-height: 1.4rem;
13 |   }
14 | 
15 |   .btn-primary {
16 |     background: ${({ theme }) => theme.primary};
17 |     color: ${({ theme }) => theme.body};
18 |     padding: 0.5rem 1.5rem;
19 |     font-size: 1rem;
20 |     border-radius: 1rem;
21 |     cursor: pointer;
22 |     outline: none;
23 |     border: none;
24 |     transition: all .5s linear;
25 | 
26 |   }
27 | `;
28 | 
29 | export const lightTheme = {
30 |   body: '#fff',
31 |   text: '#121212',
32 |   primary: '#6200ee',
33 | };
34 | 
35 | export const darkTheme = {
36 |   body: '#121212',
37 |   text: '#fff',
38 |   primary: '#bb86fc',
39 | };


--------------------------------------------------------------------------------
/src/components/Toggle.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from 'styled-components';
 3 | 
 4 | let Sun, Moon;
 5 | 
 6 | Sun = Moon = styled.svg`
 7 |   position: absolute;
 8 |   top: 2rem;
 9 |   right: 4rem;
10 |   transition: all .5s linear;
11 | `;
12 | 
13 | export const Toggle = ({ theme, toggleTheme }) => {
14 |   console.log(theme);
15 |   return (
16 |     <div onClick={toggleTheme}>
17 |       { theme === 'light' ? <Moon xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#212121" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></Moon>
18 |       : 
19 |       <Sun xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></Sun> }
20 |     </div>
21 |   )
22 | }
23 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
28 |     <title>React App</title>
29 |   </head>
30 |   <body>
31 |     <noscript>You need to enable JavaScript to run this app.</noscript>
32 |     <div id="root"></div>
33 |     <!--
34 |       This HTML file is a template.
35 |       If you open it directly in the browser, you will see an empty page.
36 | 
37 |       You can add webfonts, meta tags, or analytics to this file.
38 |       The build step will place the bundled scripts into the <body> tag.
39 | 
40 |       To begin the development, run `npm start` or `yarn start`.
41 |       To create a production bundle, use `npm run build` or `yarn build`.
42 |     -->
43 |   </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------