Theme Provider SC

style.d.ts

import * as React from 'react';
import { ThemeProvider, DefaultTheme } from 'styled-components';
import * as ThemeProperties from './theme';
import { ColorsThemeType, OptionsThemeType } from 'types/styled';
import useAppContext from 'hooks/useAppContext';

const darkTheme: ColorsThemeType = {
   home: 'var(--color-home)',
   about: 'var(--color-about)',
   works: 'var(--color-works)',
   contact: 'var(--color-contact)',

   black: 'var(--color-black)',
   white: 'var(--color-white)',
   active: 'var(--color-active)',
};

const lightTheme: ColorsThemeType = {
   home: 'var(--color-home)',
   about: 'var(--color-about)',
   works: 'var(--color-works)',
   contact: 'var(--color-contact)',

   black: 'var(--color-black)',
   white: 'var(--color-white)',
   active: 'var(--color-active)',
};

const optionsTheme: OptionsThemeType = {
   breakpoints: {
      medium: ThemeProperties.breakpoints.medium,
      large: ThemeProperties.breakpoints.large,
   },

   shadow: {
      bottom: 'var(--shadow-bottom)',
      center: 'var(--shadow-center)',
      text: 'var(--shadow-text)',
   },

   layout: {
      grid: ThemeProperties.grid,
   },

   mixins: {
      centerFlex: ThemeProperties.centerFlex,
   },

   fonts: {
      nav: '',
   },
};

type ThemeProps = {
   children: JSX.Element;
};

const Theme = ({ children }: ThemeProps) => {
   const { theme, setTheme } = useAppContext();

   const defaultTheme: DefaultTheme = {
      colors: theme === 'light' ? { ...lightTheme } : { ...darkTheme },
      options: { ...optionsTheme },
   };

   return <ThemeProvider theme={defaultTheme}>{children}</ThemeProvider>;
};

export { Theme };

Theme.tsx

/// <reference types="styled-components" />

import 'styled-components';
import { DefaultTheme } from 'styled-components';

export type ColorsThemeType = {
   home: string;
   about: string;
   works: string;
   contact: string;
   active: string;
   black: string;
   white: string;
};

export type OptionsThemeType = {
   breakpoints?: {
      base?: string;
      medium: string;
      large: string;
      [key: string]: string;
   };

   layout?: {
      [key: string]: FlattenSimpleInterpolation;
   };

   mixins?: {
      [key: string]: FlattenSimpleInterpolation;
   };

   shadow?: {
      bottom?: string;
      center?: string;
      text?: string;
   };

   fonts?: {
      nav?: string;
   };
};

declare module 'styled-components' {
   export interface DefaultTheme {
      colors: ColorsThemeType;
      options: OptionsThemeType;
   }
}