You can download gatsby-plugin-css-system from the NPM registry via the
npm or yarn commands
yarn add @css-system/gatsby-plugin-css-system
# OR
npm install @css-system/gatsby-plugin-css-system --saveAdd the plugin in your gatsby-config.js file with a theme object following the theme ui specifications:
module.exports = { plugins: [ { resolve: "@css-system/gatsby-plugin-css-system", options: { theme: { breakpoints: { s: "40em", m: "52em", l: "64em" }, space: [0, 4, 8, 16, 32], fontSizes: [12, 14, 16, 20, 24], colors: { // your colors } } } } ] };
It also provide support for multiple themes
module.exports = { plugins: [ { resolve: "@css-system/gatsby-plugin-css-system", options: { defaultTheme: "light", themes: { light: { breakpoints: { s: "40em", m: "52em", l: "64em" }, space: [0, 4, 8, 16, 32], fontSizes: [12, 14, 16, 20, 24], colors: { background: 'white' text: 'black' } }, dark: { breakpoints: { s: "40em", m: "52em", l: "64em" }, space: [0, 4, 8, 16, 32], fontSizes: [12, 14, 16, 20, 24], colors: { background: 'black' text: 'white' } } } { } } } ] }; // You can then create a toggler component like this in your application import {useSwitchTheme} from "@css-system/gatsby-plugin-css-system" export const ToggleDarkThemeButton = () => { const [themeKey, switchTheme] = useSwitchTheme() const handleToggleDarkMode = () => switchTheme(themeKey === "dark" ? "light" : "dark") return <button onClick={handleToggleDarkMode}>{themeKey === "dark" ? "π" : "π"}</button> }
For advanced configuration, please checkout documentation