theme.js

export default {
  fonts: {
    body: "'Montserrat', sans-serif",
    heading: 'inherit',
    monospace: 'Menlo, monospace',
  },
  radii: {
    default: 4,
    circle: 99999,
  },
  shadows: {
    small: '0 0 4px rgba(0, 0, 0, .125)',
    med: '0 0 12px rgba(0, 0, 0, .125)',
    large: '0 0 24px rgba(0, 0, 0, .125)',
    xl: ' 0px 30px 40px rgba(0, 0, 0, .125)',
    light: {
      small: '0 0 4px rgb(255 255 255 / 12%)',
      med: '0 0 12px rgb(255 255 255 / 12%)',
      large: '0 0 24px rgb(255 255 255 / 12%)',
      xl: '0 30px 40px rgb(255 255 255 / 12%);',
    },
  },
  breakpoints: {
    xxs: '300px',
    xs: '480px',
    sm: '540px',
    md: '728px',
    lg: '940px',
    xl: '1200px',
    xxl: '1600px',
  },
  fontWeights: {
    light: 200,
    body: 400,
    heading: 500,
    bold: 700,
  },
  lineHeights: {
    body: 1.5,
    heading: 1.25,
  },

  // margin and padding
  space: [0, 4, 8, 16, 32, 64, 128, 256],
}

themeProdider.js

import React from 'react'
import { Global, css } from '@emotion/react'
import { media } from './media'

const DarkVariables = css`
  --color-primary: lightpink;
  --color-primary-light: lightpink;
  --color-tertiary: cornflowerblue;
  --color-base: var(--color-secondary_darkmode);
  --color-background: var(--color-dark1);
  --color-background-invert: var(--color-light1);
  --color-text: var(--color-light1);
  --color-success: var(--color-warning_darkmode);
  --color-warning: var(--color-tertiary_darkmode);
  --color-secondary: var(--color-succes_darkmode);
  --color-light2: var(--color-dark2);
  --color-light3: var(--color-dark3);
  --color-light4: var(--color-dark4);
  --color-light5: var(--color-dark5);
  --dark-text-shadow: 0px 2px 2px rgb(0 0 0 /30%);
  .gameboyLight {
    fill: white;
    box-shadow: var(--shadow-lg);
  }
`

const GlobalStyles = ({ theme }) => (
  <Global
    styles={css`
      html,
      body {
        margin: 0;
        padding: 0;
        font-size: 2.1rem;
      }
      * {
        box-sizing: inherit;
        &::before,
        &::after {
          box-sizing: inherit;
        }
        &::-moz-focus-inner {
          border: 0;
        }
      }
      h1 {
        font-size: 6.4rem;
        line-height: 1.2em;
      }
      h2 {
        font-size: 5rem;
        line-height: 6rem;
      }
      h3 {
        font-size: 3.4rem;
      }
      h4 {
        font-size: 2.4rem;
        font-weight: 500;
      }
      h5 {
        font-weight: 500;
      }
      h6,
      ul,
      ol {
        font-weight: 400;
      }
      p,
      li {
        font-size: 1.6rem;
      }
      ${media.md} {
        h2 {
          font-size: 4rem;
          line-height: 5rem;
        }
      }
      pre {
        border-radius: var(--radius);
        position: relative;
        white-space: pre;
        font-size: 1.7rem;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: var(--color-text);
      }
      h3,
      h4,
      p,
      ul,
      li,
      input,
      select,
      textarea,
      button {
        line-height: 32px;
      }
      .lamplight {
        transition: opacity 0.8s;
      }
      .gameboyLight {
        transition: fill 0.8s;
      }
      //Colors light & dark
      body.light {
        --color-background: var(--color-light1);
        --color-background-invert: var(--color-dark1);
        --color-text: var(--color-dark1);
        .lamplight {
          opacity: 0;
        }
      }
      body.dark {
        ${DarkVariables}
        //Shadows
        --shadow-sm: ${theme.shadows.light.small};
        --shadow-md: ${theme.shadows.light.med};
        --shadow-lg: ${theme.shadows.light.large};
        --shadow-xl: ${theme.shadows.light.xl};
      }
      :root {
        //Colors
        --color-primary: #bca4ff;
        --color-primary-light: #f1e4ff;
        --color-base: #f395ba;
        --color-secondary: #1cc8ee;
        --color-secondary_darkmode: #82e9ff;
        --color-tertiary: #ff84b7;
        --color-tertiary_darkmode: #ff84b7;
        --color-warning: #ffd789;
        --color-warning_darkmode: #ffd789;
        --color-success: #c1e5c0;
        --color-succes_darkmode: #34eab9;
        --color-rose: #fdd9d9;
        --color-light1: #fcfcfc;
        --color-light2: #f7f7fc;
        --color-light3: #eff0f7;
        --color-light4: #d9dbe9;
        --color-light5: #e4e7f1;
        --color-dark1: #161b22;
        --color-dark2: #21262d;
        --color-dark3: #30363d;
        --color-dark4: #42474d;
        --color-dark5: #6e7681;
        --gradient-primary: linear-gradient(
          114.44deg,
          #7433ff 0%,
          #ffa3fd 100%
        );
        --gradient-secondary: linear-gradient(
          114.44deg,
          #624af2 0%,
          #50ddc3 100%
        );
        --gradient-accent: linear-gradient(114.44deg, #eb0055 0%, #fffa80 100%);
        font-size: 62.5%;
        font-family: 'poppins';
        --fw-thin: 100;
        --fw-light: 300;
        --fw-medium: 400;
        --fw-bold: 600;
        //Breakpoints
        ${Object.entries(theme.breakpoints).map(
          (item) => `--size-${item[0]}: ${item[1]}`
        )}
        /* SPACING  */
        ${theme.space.map((spc, index) => `--spacing-${index}: ${spc}px`)}
          //Radii
        --radius: ${theme.radii.default}px;
        --radius-md: 8px;
        --radius-circle: ${theme.radii.circle}px;
        //Shadows
        --shadow-sm: ${theme.shadows.small};
        --shadow-md: ${theme.shadows.med};
        --shadow-lg: ${theme.shadows.large};
        --shadow-xl: ${theme.shadows.xl};
      }
    `}
  />
)

export default GlobalStyles