gatsby-plugin-css-system
Getting started
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 --save
Usage
Add 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