Change Theme Component

Intro

Questo componente react gestierà il tema della pagina dark/light. Il componente andrà ad aggiungere la classe al body .wite-content o .black-content. Inoltre per una gestione più specifica e per una persistenza del tema andrà a settare come item in locale "theme" che sarà "dark" oppure "light".

Utilizzo

Per utilizzare correttamente devi inananzitutto importare il provider e lo switch

import { ThemeProvider, ChangeThemeComponent } from 'change-theme-component/cjs'

export const MyContainer = () => {

  const darkTheme = {
    BackgroundSidebar: "#081627"
  }

  const lightTheme = {
    BackgroundSidebar: "white"
  }


  return (
    <ThemeProvider default={"dark"} darkTheme={darkTheme} lightTheme={lightTheme}>
                <ChangeThemeComponent default={'dark'}/>
    </ThemeProvider>
  )
}

Le props sono default che decide il tema di default dell'app, e deve coincidere sia in ThemeProvider che in ChangeThemeComponent Poi in darkTheme e lightTheme andranno inseriti i temi nel formato mostrato. Così potranno essere richiamate tramite styled component nei componenti figli del provider.

import styled from "styled-components";

export const Container = styled.div`
    width: 200px ;
    background-color: ${props => props.theme.BackgroundSidebar};
    `;
```