Design systems

Using a design system lets you split designing your app from building your app.

You get:

• basic building blocks for your UI
• a flexible interface to customize components
• theming support for styles
• and your app looks great

Even if like me you can't design your way out of a wet paper bag.

Ideally a designer could help you create the core building blocks, then you can work off of sketches on a paper napkin. UI always looks good.

Without a designer, you can lean on open-source styles and color schemes.

We're using Theme UI because of its great balance between flexibility and constraints. Other popular choices include Material UI and Tailwind UI.

ThemeUI with Gatsby

Integrating ThemeUI with Gatsby is a matter of installing a plugin and choosing a theme preset.

Exercise

Check out the exercises repository and go into the exercise-1/gatsby directory. You'll find a Gatsby project created with the default starter.

Install theme-ui, gatsby-plugin-theme-ui, and @theme-ui/presets.

Add the gatsby-plugin-theme-ui plugin to gatsby-config.js.

Choose a preset from @theme-ui/presets and enable it by shadowing the ThemeUI theme from the plugin.

// src/gatsby-plugin-theme-ui/index.js
import { funk } from "@theme-ui/presets"
export default {
  ...funk,
}

Make sure you remove the CSS import from layout.js to see the full effect.

Solution

Find the final result in the exercise-1-solution branch.

I used an unofficial sketchy preset because it looks cool ✌️

ThemeUI with NextJS

There's no ThemeUI plugin for NextJS and that's okay, integration is a matter of wrapping the app in a ThemeProvider.

Exercise

Check out the exercises repository and go into the exercise-1/nextjs directory. You'll find a default NextJS project.

Install theme-ui, and @theme-ui/presets.

Enable ThemeUI by wrapping the <Component> in NextJS's _app.js file.

Make sure you remove default styles.

// pages/_app.js
function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={funk}>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

Solution

Find the final result in the exercise-1-solution branch.

I used an unofficial sketchy preset because it looks cool ✌️

Build a theme switcher

A popular feature on many websites is Dark Theme. It's a great way to showcase how theming and design systems work together.

ThemeUI supports color modes out of the box. You get a helpful useColorMode hook.

Presets typically don't support color modes so you'll have to extend the theme. You can do this with creative copy-pasting from presets.

Exercise

Choose Gatsby or NextJS from the previous exercise. Both follow the same core approach.

Add a button on the homepage. Make it cycle through an array of modes.

Pseudocode 👇

const modes = ["light", "dark", "deep"]
const [mode, setMode] = useColorMode()
const i = (modes.indexOf(mode) + 1) % modes.length
setMode(modes[i])

Use the <Button> component from ThemeUI.

Extend your theme definition like this:

// sketchy is the base preset
theme = {
  ...sketchy,
  colors: {
    ...sketchy.colors,
    modes: {
      light: {
        ...sketchy.colors,
      },
      dark: {
        text: "#fff",
        background: "#000",
        copyBackground: "hsl(167, 6%, 42%)",
        primary: "#0ff",
        secondary: "#b0f",
        accent: "#f0b",
        muted: "#111",
        gray: "#999",
        lightgray: "#444",
      },
      deep: {
        text: "hsl(210, 50%, 96%)",
        background: "hsl(230, 25%, 18%)",
        primary: "hsl(260, 100%, 80%)",
        secondary: "hsl(290, 100%, 80%)",
        highlight: "hsl(260, 20%, 40%)",
        purple: "hsl(290, 100%, 80%)",
        muted: "hsla(230, 20%, 0%, 20%)",
        gray: "hsl(210, 50%, 60%)",
      },
    },
  },
}

Solution

Find the final result in the exercise-1-solution branch.