diff --git a/src/components/stats/StatBar.tsx b/src/components/stats/StatBar.tsx
index cd3df01..bf826f3 100644
--- a/src/components/stats/StatBar.tsx
+++ b/src/components/stats/StatBar.tsx
@@ -21,7 +21,7 @@ const StatItem = ({
export const StatBar = ({ gameStats }: Props) => {
return (
-
+
diff --git a/src/lib/localStorage.ts b/src/lib/localStorage.ts
index 3b04d7a..338e4e8 100644
--- a/src/lib/localStorage.ts
+++ b/src/lib/localStorage.ts
@@ -1,3 +1,5 @@
+import { Theme } from '../types/theme'
+
const gameStateKey = 'gameState'
type StoredGameState = {
@@ -15,6 +17,7 @@ export const loadGameStateFromLocalStorage = () => {
}
const gameStatKey = 'gameStats'
+const themeKey = 'theme'
export type GameStats = {
winDistribution: number[]
@@ -33,3 +36,12 @@ export const loadStatsFromLocalStorage = () => {
const stats = localStorage.getItem(gameStatKey)
return stats ? (JSON.parse(stats) as GameStats) : null
}
+
+export const saveThemeToLocalStorage = (theme: Theme) => {
+ localStorage.setItem(themeKey, theme)
+}
+export const loadThemeFromLocalStorage = () => {
+ const theme: Theme =
+ localStorage.getItem(themeKey) === 'dark' ? 'dark' : 'light'
+ return theme
+}
diff --git a/src/types/theme.ts b/src/types/theme.ts
new file mode 100644
index 0000000..cc21988
--- /dev/null
+++ b/src/types/theme.ts
@@ -0,0 +1 @@
+export type Theme = 'dark' | 'light'
diff --git a/tailwind.config.js b/tailwind.config.js
index 5259866..2a078bf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,13 @@
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
+ darkMode: 'class',
theme: {
- extend: {},
+ extend: {
+ colors: {
+ 'custom-black': '#121213',
+ 'custom-gray': '#3a3a3c',
+ },
+ },
},
plugins: [],
}