Skip to content
Lemonade

Theme

Lemonade exports two theme objects: lightTheme and darkTheme, using the former as default.

You can switch this site documentation theme between light/dark by using the light bulb icon on the top right corner of the page.

Customizing the theme

The theme can be changed using the ThemeProvider component:

import { Button, darkTheme, HFlow, ThemeProvider } from '@lemonade/ui'
import React from 'react'

function CustomizeDemo() {
  return (
    <ThemeProvider theme={darkTheme}>
      <HFlow>
        <Button kind='primary'>Hello</Button>
        <Button>Dark theme!</Button>
      </HFlow>
    </ThemeProvider>
  )
}

export default CustomizeDemo

Accessing the current theme variable

Use the useTheme or useStyles hooks to access the theme variable:

{
  "pallete": {
    "gray": {
      "c10": "#24252E",
      "c20": "#3A3A47",
      "c30": "#515162",
      "c40": "#696979",
      "c50": "#7A7B8E",
      "c60": "#8F8FA2",
      "c70": "#AAAAB9",
      "c80": "#D3D4DD",
      "c90": "#F0F0F5",
      "c100": "#FFFFFF"
    },
    "divider": "#D3D4DD",
    "highlight": "#FCCE74",
    "primary": {
      "c10": "#1C2200",
      "c20": "#2E3800",
      "c30": "#455400",
      "c40": "#5E7300",
      "c50": "#7A9200",
      "c60": "#9BB800",
      "c70": "#C2DC4E",
      "c80": "#E2F0A0",
      "c90": "#F5FADB",
      "c100": "#FFFFFF",
      "main": "#5E7300"
    },
    "text": {
      "main": "#24252E",
      "secondary": "#696979",
      "disabled": "#AAAAB9"
    },
    "surface": {
      "main": "#FFFFFF",
      "background": "#F0F0F5"
    },
    "status": {
      "danger": {
        "c10": "#510609",
        "c20": "#790C14",
        "c30": "#A4151E",
        "c40": "#D01E29",
        "c50": "#F02532",
        "c60": "#F75B60",
        "c70": "#FF888B",
        "c80": "#FAC8C9",
        "c90": "#FEECED",
        "c100": "#FFFFFF",
        "main": "#D01E29",
        "background": "#FEECED",
        "onColor": "#FFFFFF"
      },
      "success": {
        "c10": "#052D00",
        "c20": "#0E4700",
        "c30": "#166000",
        "c40": "#217B00",
        "c50": "#2E8E16",
        "c60": "#40A42B",
        "c70": "#54C241",
        "c80": "#9DE695",
        "c90": "#E1F6DF",
        "c100": "#FFFFFF",
        "main": "#217B00",
        "background": "#E1F6DF",
        "onColor": "#FFFFFF"
      },
      "info": {
        "c10": "#002451",
        "c20": "#003A79",
        "c30": "#0051A2",
        "c40": "#0069D0",
        "c50": "#007AF0",
        "c60": "#498FFF",
        "c70": "#84AAFF",
        "c80": "#C5D4FF",
        "c90": "#ECF0FF",
        "c100": "#FFFFFF",
        "main": "#0069D0",
        "background": "#ECF0FF",
        "onColor": "#FFFFFF"
      },
      "alert": {
        "c10": "#421A00",
        "c20": "#642B00",
        "c30": "#873D00",
        "c40": "#AD5000",
        "c50": "#C85D00",
        "c60": "#E76F00",
        "c70": "#FF8C54",
        "c80": "#FFC8B8",
        "c90": "#FFECE8",
        "c100": "#FFFFFF",
        "main": "#AD5000",
        "background": "#FFECE8",
        "onColor": "#FFFFFF"
      }
    }
  },
  "typography": {
    "fontFamily": "\"IBM Plex Sans\", sans-serif",
    "lineHeight": "1.5",
    "sizes": {
      "html": 16,
      "text": "0.8125rem",
      "button": "0.875rem"
    }
  },
  "breakpoints": {
    "size": {
      "xs": 0,
      "sm": 600,
      "md": 960,
      "lg": 1280,
      "xl": 1920
    }
  },
  "zIndex": {
    "popper": 1200,
    "dropdown": 1300,
    "tooltip": 2000
  },
  "radius": {
    "button": 4,
    "popper": 2,
    "modal": 4,
    "input": 2,
    "paper": 4,
    "tag": 12
  },
  "shadows": {
    "outer": {
      "10": "0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 1px 0 rgba(0, 0, 0, 0.04)",
      "20": "0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.14)",
      "40": "0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 4px 5px 0 rgba(0, 0, 0, 0.14)",
      "60": "0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.14)",
      "80": "0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 8px 9px 1px rgba(0, 0, 0, 0.14)",
      "160": "0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 16px 24px 2px rgba(0, 0, 0, 0.14)",
      "240": "0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 16px 24px 2px rgba(0, 0, 0, 0.14)"
    },
    "inner": {
      "10": "inset 0 1px 4px 0 rgba(0, 0, 0, 0.14), inset 0 2px 4px 0 rgba(0, 0, 0, 0.08)"
    }
  },
  "animation": {
    "spinAround": "animation-1scjtrl"
  }
}
import { useCss, useTheme } from '@lemonade/ui'
import React from 'react'

function CustomizeDemo() {
  const theme = useTheme()
  const { css } = useCss()

  return (
    <div className={css({ overflow: 'auto', height: '300px' })}>
      <pre className={css({ color: theme.pallete.text.main })}>
        <code>{JSON.stringify(theme, null, 2)}</code>
      </pre>
    </div>
  )
}

export default CustomizeDemo

Custom themes

Create a custom theme using the createTheme function.

import { Button, colors, createTheme, HFlow, ThemeProvider } from '@lemonade/ui'
import React from 'react'

const myTheme = createTheme({
  pallete: {
    primaryScale: colors.pink,
  },
})

function CustomTheme() {
  return (
    <ThemeProvider theme={myTheme}>
      <HFlow>
        <Button kind='primary'>My custom theme!</Button>
      </HFlow>
    </ThemeProvider>
  )
}

export default CustomTheme