ColorProvider

SchemeProvider.tsx

/** @jsx jsx */
import * as React from "react";
import { jsx } from "@emotion/core";

import theme from "../../../lib/theme";

type ColorScheme = "dark" | "light";

interface Props {
  scheme: ColorScheme;
}
/* No need to loop through options if we define colorschemes in the themefile, we just acces them via props. */
const ColorProvider: React.FC<Props> = ({ scheme = "dark", ...props }) => (
  <main
    css={{
      background: theme.colors.scheme[scheme].bg,
      color: theme.colors.scheme[scheme].fg,
    }}
    {...props}
  />
);

export default ColorProvider;

theme.ts

/* We can have named `colorschemes` as part the themefile, this allows us to just define and use as many as we want, without having to edit a function to call them */
export default {
  colors: {
    mojogreen: "#00ba40",
    white: "#ffffff",
    black: "#000000",
    dark: "#14111D",
    gray: "#F0F0F0",
    scheme: {
      dark: { bg: "#000", fg: "#fff" },
      light: { bg: "#fff", fg: "#000" },
    },
  },
  spacing: [
    "calc(4px + (8 - 4) * ((100vw - 400px) / (1800 - 600)))",
    "calc(8px + (16 - 8) * ((100vw - 400px) / (1800 - 600)))",
    "calc(16px + (32 - 16) * ((100vw - 400px) / (1800 - 600)))",
    "calc(44px + (88 - 44) * ((100vw - 400px) / (1800 - 600)))",
    "calc(88px + (176 - 88) * ((100vw - 400px) / (1800 - 600)))",
    "calc(176px + (352 - 176) * ((100vw - 400px) / (1800 - 600)))",
  ],
  fonts: {
    main: `'GT America Light', system-ui, sans-serif`,
    display: `'altis-mojoregular', system-ui, sans-serif`,
  },
  fontSizes: [
    "calc(16px + (18 - 16) * ((100vw - 400px) / (1800 - 600)))",
    "calc(18px + (24 - 18) * ((100vw - 400px) / (1800 - 600)))",
    "calc(18px + (32 - 18) * ((100vw - 400px) / (1800 - 600)))",
    "calc(18px + (42 - 18) * ((100vw - 400px) / (1800 - 600)))",
    "calc(24px + (56 - 24) * ((100vw - 400px) / (1800 - 600)))",
    "calc(32px + (75 - 32) * ((100vw - 400px) / (1800 - 600)))",
  ],
  lineHeights: [2, 1.5, 1.2],
  maxWidths: ["904px", "1400px"],
};