How To Theme Your App With React, Redux & SCSS

npx create-react-app myapp

...src  store    theme      theme.slice.js      theme.actions.js    rootReducer  styles    _themes.scss    _themify.scss  components    layout      layout.jsx      layout.scss  page    home      home.jsx    about      about.jsx  App.js...

npm i @reduxjs/toolkit redux node-sass react-router-dom react-redux --save

// theme.slice.jsimport { createSlice } from '@reduxjs/toolkit'import { uiActions } from './ui.actions'export const uiSlice = createSlice({  name: 'ui',  initialState: 'light-theme',  reducers: uiActions})export const { toggleTheme } = uiSlice.actionsexport default uiSlice.reducer

// theme.action.jsexport const uiActions = {  toggleTheme: state => {    console.log(state);    return state === 'dark-theme' ? 'light-theme' : 'dark-theme';  }};

// rootReducer.jsimport { configureStore } from '@reduxjs/toolkit'import uiReducer from './ui/ui.slice'export default configureStore({  reducer: {    ui: uiReducer,  }})

// themes.scss$themes: (  light: (    bg: #f5fcff,    fg: #002433,  ),  dark: (    bg: #004966,    fg: #f5fcff,  ),);

// themify.scss@import 'themes';@mixin themify($property, $key, $themes: $themes) {  // Iterate over the themes  @each $theme, $colors in $themes {    // Create a selector    &.#{$theme}-theme,    .#{$theme}-theme & {      // Output the declaration      #{$property}: map-get($colors, $key);    }  }}

// layout.jsximport { useSelector, useDispatch } from "react-redux";import { toggleTheme } from "../../store/ui/ui.slice";import './layout.scss';export default function Layout(props) {  const theme = useSelector(state => state.ui);  const dispatch = useDispatch();  return (    <>      <header className={`${theme} container`}>        <Header />        <button onClick={() => dispatch(toggleTheme())}>Toggle Theme</button>      </header>      <div className={`${theme} container`}>        {props.children}      </div>    </>  )}

// layout.scss@import "../../assets/style/themify";header {  @include themify('background', 'body-bg');}

// home.jsximport { Layout } from "../../components/layout/layout";export default function Home() {  return (    <Layout>      <section>        Home Page      </section>    </Layout>  )}

// about.jsximport { Layout } from "../../components/layout/layout";export default function About() {  return (    <Layout>      <section>        About Page      </section>    </Layout>  )}

// App.jsimport { BrowserRouter as Router, Switch, Route } from 'react-router-dom';import Home from './pages/home/home';import About from './pages/about/about';function App() {  return (    <Router>      <Switch>        <Route exact path='/' component={Home} />        <Route exact path='/tasks' component={About} />      </Switch>    </Router>  );}export default App;