Node Permanently Moved

    @css-system/gatsby-plugin-css-system

    0.6.0 • Public • Published

    gatsby-plugin-css-system

    npm package

    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

    Install

    npm i @css-system/gatsby-plugin-css-system

    DownloadsWeekly Downloads

    20

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    7.65 kB

    Total Files

    6

    Last publish

    Collaborators

    • myagoo
    • cedricdelpoux