This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { createStore } from "redux"; | |
import rootReducer from "./reducers"; | |
const localStorageKey = "theme"; | |
const persistedTheme = localStorage.getItem(localStorageKey); | |
let initialState = { | |
preferences: persistedTheme ? JSON.parse(persistedTheme) : {}, | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import styled from "styled-components"; | |
import theme from "styled-theming"; | |
import { Provider as ReduxProvider } from "react-redux"; | |
import DarkThemeProvider from "./DarkThemeProvider"; | |
import store from "./store"; | |
import DarkThemeToggle from "./DarkThemeToggle"; | |
export const backgroundColor = theme("theme", { | |
light: "#fff", |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import { useSelector } from "react-redux"; | |
import { ThemeProvider } from "styled-components"; | |
const DarkThemeProvider = ({ children }) => { | |
const darkThemeEnabled = useSelector((state) => state.preferences.darkThemeEnabled); | |
return ( | |
<ThemeProvider theme={{ theme: darkThemeEnabled ? "dark" : "light" }}> | |
{children} | |
</ThemeProvider> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import styled, { ThemeProvider } from "styled-components"; | |
import theme from "styled-theming"; | |
import { Provider as ReduxProvider } from "react-redux"; | |
import store from "./store"; | |
export const backgroundColor = theme("theme", { | |
light: "#fff", | |
dark: "#2d2d2d", | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { createStore } from "redux"; | |
import rootReducer from "./reducers"; | |
let initialState = {}; | |
const store = createStore(rootReducer, initialState); | |
export default store; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as actions from "./actions"; | |
import { combineReducers } from "redux"; | |
const preferences = (state = { darkThemeEnabled: false }, action) => { | |
switch (action.type) { | |
case actions.TOGGLE_DARKTHEME: | |
return { ...state, darkThemeEnabled: !state.darkThemeEnabled }; | |
default: | |
return state; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const TOGGLE_DARKTHEME = "TOGGLE_DARKTHEME"; | |
export const toggleDarkTheme = () => ({ | |
type: TOGGLE_DARKTHEME, | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import { useSelector, useDispatch } from "react-redux"; | |
import { TOGGLE_DARKTHEME } from "./actions"; | |
const DarkThemeToggle = () => { | |
const darkThemeEnabled = useSelector((state) => state.preferences.darkThemeEnabled); | |
const dispatch = useDispatch(); | |
return ( | |
<p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import styled from "styled-components"; | |
import theme from "styled-theming"; | |
import { Provider as ReduxProvider } from "react-redux"; | |
import DarkThemeProvider from "./DarkThemeProvider"; | |
import store from "./store"; | |
export const backgroundColor = theme("theme", { | |
light: "#fff", | |
dark: "#2d2d2d", |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { createContext, useState } from "react"; | |
import { ThemeProvider } from "styled-components"; | |
export const ThemeContext = createContext({}); | |
const DarkModeProvider = ({ children }) => { | |
const [mode, setMode] = useState("light"); | |
const toggleMode = () => { | |
const newMode = mode === "light" ? "dark" : "light"; |
NewerOlder