feat: add light mode

Author: coderbyheart

src/App.tsx

@@ -1,15 +1,23 @@
 import * as React from 'react'
-import { Header } from './style/Header'
+import { useState } from 'react'
 import { Footer } from './style/Footer'
 import { Main, Info } from './style/Main'
+import { Theme, dark, light } from './style/theme'
 import { GlobalStyle } from './style/Global'
 import { Schedule } from './Schedule'
 import { format } from 'date-fns'
+import { ThemeProvider } from 'styled-components'
 
 import LockIcon from 'feather-icons/dist/icons/lock.svg'
 import UnLockIcon from 'feather-icons/dist/icons/unlock.svg'
+import LightModeIcon from 'feather-icons/dist/icons/sun.svg'
+import DarkModeIcon from 'feather-icons/dist/icons/moon.svg'
+import { Button } from './style/Form'
 
 export const App = () => {
+	const [theme, updateTheme] = useState<Theme>(
+		window.localStorage.getItem('theme') === 'light' ? light : dark,
+	)
 	let cfg = {
 		name: 'ExampleConf',
 		day: format(new Date(), 'yyyy-MM-dd'),
@@ -40,9 +48,8 @@ export const App = () => {
 		console.log(cfg)
 	}
 	return (
-		<>
+		<ThemeProvider theme={theme}>
 			<GlobalStyle />
-			<Header></Header>
 			<Main>
 				<Schedule
 					sessions={cfg.sessions}
@@ -51,11 +58,35 @@ export const App = () => {
 					conferenceDate={cfg.day}
 				/>
 				<Info>
-					Click the <LockIcon /> icon to create your own schedule. When done,
-					click the <UnLockIcon /> and share the updated URL.
+					<p>
+						Click the <LockIcon /> icon to create your own schedule. When done,
+						click the <UnLockIcon /> and share the updated URL.
+					</p>
+				</Info>
+				<Info>
+					{theme === dark && (
+						<Button
+							onClick={() => {
+								updateTheme(light)
+								window.localStorage.setItem('theme', 'light')
+							}}
+						>
+							<LightModeIcon /> switch to light mode
+						</Button>
+					)}
+					{theme === light && (
+						<Button
+							onClick={() => {
+								updateTheme(dark)
+								window.localStorage.setItem('theme', 'dark')
+							}}
+						>
+							<DarkModeIcon /> switch to dark mode
+						</Button>
+					)}
 				</Info>
 			</Main>
 			<Footer />
-		</>
+		</ThemeProvider>
 	)
 }

src/style/Footer.tsx

@@ -6,13 +6,14 @@ import GithubIcon from 'feather-icons/dist/icons/github.svg'
 
 const StyledFooter = styled.footer`
 	padding: 1rem 2rem;
+	opacity: 0.75;
 	@media (min-width: ${wideBreakpoint}) {
 		padding: 4rem;
 	}
 
-	color: #ffffffcc;
+	color: ${(props) => props.theme.colors.text};
 	a {
-		color: #ffffffcc;
+		color: ${(props) => props.theme.colors.text};
 	}
 	p {
 		line-height: 1.5rem;

src/style/Form.tsx

@@ -2,30 +2,34 @@ import styled from 'styled-components'
 
 export const Button = styled.button`
 	background-color: transparent;
-	color: #fff;
+	color: ${(props) => props.theme.colors.text};
 	opacity: 0.75;
 	padding: 0;
 	border: 0;
-	float: right;
+	display: flex;
+	align-items: center;
+	svg {
+		margin-right: 0.5rem;
+	}
 `
 
 export const DeleteButton = styled(Button)`
-	color: #ff5235;
+	color: ${(props) => props.theme.colors.delete};
 `
 
 export const AddButton = styled(Button)`
-	color: #0fa;
+	color: ${(props) => props.theme.colors.add};
 	&:disabled {
-		color: #aaa;
+		color: ${(props) => props.theme.colors.addDisabled};
 	}
 `
 
 export const Input = styled.input`
 	background-color: transparent;
-	border: 1px solid #fff;
+	border: 1px solid ${(props) => props.theme.colors.text};
 	padding: 0.25rem 0.5rem;
 	height: 30px;
-	color: #fff;
+	color: ${(props) => props.theme.colors.text};
 `
 
 export const DateInput = styled(Input)`

src/style/Global.tsx

@@ -2,8 +2,8 @@ import { createGlobalStyle } from 'styled-components'
 
 export const GlobalStyle = createGlobalStyle`
 body {
-    background-color: black;
-    color: white;
+    background-color: ${(props) => props.theme.colors.background};
+    color: ${(props) => props.theme.colors.text};
     font-family: 'DM Mono', monospace;
 }
 `

src/style/Header.ts

@@ -2,8 +2,10 @@ import styled from 'styled-components'
 
 export const Main = styled.main``
 
-export const Info = styled.p`
+export const Info = styled.div`
 	text-align: center;
 	font-size: 14px;
 	margin: 1rem;
+	display: flex;
+	justify-content: center;
 `

src/style/Main.ts

@@ -1,13 +1,17 @@
 import styled from 'styled-components'
 import { wideBreakpoint } from './settings'
+import { Button } from './Form'
 
 export const Table = styled.table`
 	border-collapse: collapse;
 	width: 100%;
 	height: 100%;
+	${Button} {
+		float: right;
+	}
 	td,
 	th {
-		border: 1px solid #7d7d7d;
+		border: 1px solid ${(props) => props.theme.colors.borderColor};
 		padding: 0.25rem;
 		@media (min-width: ${wideBreakpoint}) {
 			padding: 1rem;
@@ -48,7 +52,7 @@ export const Table = styled.table`
 		white-space: nowrap;
 	}
 	td.hot {
-		background-color: #ff5e007a;
+		background-color: ${(props) => props.theme.colors.countdownWarning};
 	}
 	th {
 		small {

src/style/Table.tsx

@@ -0,0 +1,41 @@
+import 'styled-components'
+
+export type Theme = {
+	colors: {
+		background: string
+		text: string
+		delete: string
+		add: string
+		addDisabled: string
+		countdownWarning: string
+		borderColor: string
+	}
+}
+
+declare module 'styled-components' {
+	export interface DefaultTheme extends Theme {}
+}
+
+export const dark: Theme = {
+	colors: {
+		background: '#000',
+		text: '#fff',
+		delete: '#ff5235',
+		add: '#0fa',
+		addDisabled: '#aaa',
+		countdownWarning: '#ff5e007a',
+		borderColor: '#7d7d7d',
+	},
+}
+
+export const light: Theme = {
+	colors: {
+		background: '#fffbf6',
+		text: '#000000cc',
+		add: '#22a00d',
+		addDisabled: '#aaa',
+		delete: '#dc2000',
+		countdownWarning: '#ff000052',
+		borderColor: '#a7a7a7',
+	},
+}