Lighthouse Design System

Start Design

Start Code

View All Components

GitHub

Theme Generator






Use the Theme Generator to customize your theme.Make changes and copy the final output from the bottom of the page.


All changes are applied directly to this site.

Colors

Color Scale

Name
Color
white
#ffffff
remove
copy
gray50
#f4f4f4
remove
copy
gray100
#e8e8e8
remove
copy
gray200
#d1d1d1
remove
copy
gray300
#bababa
remove
copy
gray400
#a3a3a3
remove
copy
gray500
#8c8c8c
remove
copy
gray600
#757575
remove
copy
gray700
#5e5e5e
remove
copy
gray800
#474747
remove
copy
gray900
#303030
remove
copy
gray1000
#1a1a1a
remove
copy
black
#000000
remove
copy
red50
#ffeae8
remove
copy
red100
#ffd4cf
remove
copy
red200
#ffa89d
remove
copy
red300
#ff8070
remove
copy
red400
#ff6149
remove
copy
red500
#ef492d
remove
copy
red600
#db3819
remove
copy
red700
#c32d0c
remove
copy
red800
#a62505
remove
copy
red900
#861f01
remove
copy
red1000
#661a00
remove
copy
green50
#c9ffe8
remove
copy
green100
#92ffd4
remove
copy
green200
#4cf5b5
remove
copy
green300
#08e59d
remove
copy
green400
#0eb783
remove
copy
green500
#0d8f6a
remove
copy
green600
#0a6d53
remove
copy
green700
#05513f
remove
copy
green800
#023a2e
remove
copy
green900
#00261f
remove
copy
green1000
#001411
remove
copy
blue50
#daecff
remove
copy
blue100
#c0dfff
remove
copy
blue200
#8ec5ff
remove
copy
blue300
#62acfe
remove
copy
blue400
#3d95fd
remove
copy
blue500
#2080fd
remove
copy
blue600
#0a6cfc
remove
copy
blue700
#005dfa
remove
copy
blue800
#0052f9
remove
copy
blue900
#0047f7
remove
copy
blue1000
#003df5
remove
copy
yellow50
#fffaf0
remove
copy
yellow100
#fff2d9
remove
copy
yellow200
#ffe3ac
remove
copy
yellow300
#ffcf70
remove
copy
yellow400
#ffc043
remove
copy
yellow500
#bc8b2c
remove
copy
yellow600
#997328
remove
copy
yellow700
#674d1b
remove
copy

Override Foundational Colors

Name
Color
primaryA
colors.black
remove
copy
primaryB
colors.white
remove
copy
primary
colors.blue700
remove
copy
primary50
colors.blue50
remove
copy
primary100
colors.blue100
remove
copy
primary200
colors.blue200
remove
copy
primary300
colors.blue300
remove
copy
primary400
colors.blue400
remove
copy
primary500
colors.blue500
remove
copy
primary600
colors.blue600
remove
copy
primary700
colors.blue700
remove
copy
negative
colors.red400
remove
copy
negative50
colors.red50
remove
copy
negative100
colors.red100
remove
copy
negative200
colors.red200
remove
copy
negative300
colors.red300
remove
copy
negative400
colors.red400
remove
copy
negative500
colors.red500
remove
copy
negative600
colors.red600
remove
copy
negative700
colors.red700
remove
copy
warning
colors.yellow400
remove
copy
warning50
colors.yellow50
remove
copy
warning100
colors.yellow100
remove
copy
warning200
colors.yellow200
remove
copy
warning300
colors.yellow300
remove
copy
warning400
colors.yellow400
remove
copy
warning500
colors.yellow500
remove
copy
warning600
colors.yellow600
remove
copy
warning700
colors.yellow700
remove
copy
positive
colors.green400
remove
copy
positive50
colors.green50
remove
copy
positive100
colors.green100
remove
copy
positive200
colors.green200
remove
copy
positive300
colors.green300
remove
copy
positive400
colors.green400
remove
copy
positive500
colors.green500
remove
copy
positive600
colors.green600
remove
copy
positive700
colors.green700
remove
copy
white
colors.white
remove
copy
black
colors.black
remove
copy
mono100
colors.white
remove
copy
mono200
colors.gray50
remove
copy
mono300
colors.gray100
remove
copy
mono400
colors.gray200
remove
copy
mono500
colors.gray300
remove
copy
mono600
colors.gray400
remove
copy
mono700
colors.gray500
remove
copy
mono800
colors.gray600
remove
copy
mono900
colors.gray700
remove
copy
mono1000
colors.black
remove
copy

Override Semantic Colors

Name
Color
backgroundPrimary
foundation.white
remove
copy
backgroundSecondary
colors.gray50
remove
copy
backgroundTertiary
colors.gray100
remove
copy
backgroundInversePrimary
foundation.black
remove
copy
backgroundInverseSecondary
colors.gray600
remove
copy
contentPrimary
foundation.black
remove
copy
contentSecondary
colors.gray600
remove
copy
contentTertiary
colors.gray300
remove
copy
contentInversePrimary
foundation.white
remove
copy
contentInverseSecondary
colors.gray300
remove
copy
contentInverseTertiary
colors.gray400
remove
copy

New Semantic Colors

Name
Color
backgroundPrimaryAccent
#f9f9f9
remove
copy
backgroundSecondaryAccent
#dbdbdb
remove
copy
Lighting
Name
Shadow
shadow400
2px 2px 0px 0px hsla(0,0%,0%,0.55)
remove
copy
shadow500
4px 4px 0px 0px hsla(0,0%,0%,0.55)
remove
copy
shadow600
8px 8px 0px 0px hsla(0,0%,0%,0.55)
remove
copy
shadow700
10px 10px 0px 0px hsla(0,0%,0%,0.55)
remove
copy
overlay0
inset 0 0 0 1000px hsla(0,0%,0%,0)
remove
copy
overlay100
inset 0 0 0 1000px hsla(0,0%,0%,0.04)
remove
copy
overlay200
inset 0 0 0 1000px hsla(0,0%,0%,0.08)
remove
copy
overlay300
inset 0 0 0 1000px hsla(0,0%,0%,0.12)
remove
copy
overlay400
inset 0 0 0 1000px hsla(0,0%,0%,0.16)
remove
copy
overlay500
inset 0 0 0 1000px hsla(0,0%,0%,0.2)
remove
copy
overlay600
inset 0 0 0 1000px hsla(0,0%,0%,0.24)
remove
copy
Import and Export Theme

Simply copy and save it as "my-theme.json".

(It only saves Colors and Lighting data now. Others will be added.)

Typography

Pass custom values to primitives as the first parameter of the createTheme function.

Then, import web font files to your app. Lighthouse doesn't include any font files.

(Dynamic Generator feature of these values is work in progress.)

const primitives = {
  primaryFontFamily: "system-ui, Helvetica, Arial, sans-serif",
}
Sizings / Breakpoints / Z-Index

Pass custom values to overrides as the second parameter of the createTheme function.

Below are the default theme values for each kind.

(Dynamic Generator feature of these values is work in progress.)

const overrides = {
  sizings: {
    // 2px scale
    scale0: "2px",
    scale100: "4px",
    scale200: "6px",
    scale300: "8px",
    scale400: "10px",
    scale500: "12px",
    // 4px scale
    scale550: "14px",
    scale600: "16px",
    scale650: "18px",
    scale700: "20px",
    scale750: "22px",
    scale800: "24px",
    // 8px scale
    scale900: "32px",
    scale1000: "40px",
    // 4px scale
    scale1200: "48px",
    scale1400: "56px",
    scale1600: "64px",
    scale2400: "96px",
    scale3200: "128px",
    scale4800: "192px",
  },
  breakpoints: {
    small: 320,
    medium: 600,
    large: 1080,
    xLarge: 1200,
  },
  zIndex: {
    drawer: 100,
    header: 100,
    overlay: 100,
    modal: 200,
    select: 200,
    alert: 300,
  },
}
Using with Design

Change ThemeSwitcher component's Theme property as "Custom" and Upload "my-theme.json" file to "Theme File" Property.


More information in Start Design.

Using with Code

Locate the "my-theme.json" file to your App's root.

(The below example wrote for next.js, and you can customize it for others.)


More information in Start Code.

import App from "next/app"
import { Provider as StyletronProvider } from "styletron-react"
import { styletron, debug } from "../styletron"
import { createTheme, LighthouseProvider } from "@harborschool/lighthouse"
import * as output from './my-theme.json'
export default class MyApp extends App {
  render() {
    const typography = {
      primaryFontFamily: 'system-ui, Helvetica, Arial, sans-serif',
    }
    const customTheme = generateCustomTheme({
      tokens: output['default'], // Add imported tokens
      typography, // Add your custom font
    })
    const { Component, pageProps } = this.props
    return (
      <StyletronProvider value={styletron} debug={debug}>
        <LighthouseProvider theme={customTheme}>
          <Component {...pageProps} />
        </LighthouseProvider>
      </StyletronProvider>
    )
  }
}
let colors, foundation, semantic, newSemantic // declare outsite to share variable to eval()
export function generateCustomTheme({ tokens, typography }) {
  if (tokens) {
    // Custom Color Scale
    colors = tokens.colors.colorScale
    // Foundational Colors
    foundation = trimStringValues(tokens.colors.colorFoundation)
    // Semantic Colors
    semantic = trimStringValues(tokens.colors.colorSemantic)
    // New Semantic Colors
    newSemantic = tokens.colors.newColorSemantic
    const primitives = {
      ...newSemantic,
      ...typography,
    }
    const overrides = {
      colors: {
        ...foundation,
        ...semantic,
      },
      lighting: {
        ...tokens.lighting,
      },
      sizings: {},
      breakpoints: {},
      zIndex: {},
    }
    const customTheme = createTheme(primitives, overrides)
    return customTheme
  }
}
function trimStringValues(obj) {
  Object.keys(obj).forEach(
    (key) => (obj[key] = isHex(obj[key]) ? obj[key] : eval(obj[key]))
  )
  return obj
}
function isHex(value) {
  return /^#[0-9A-F]{6}$/i.test(value)
}

© Lighthouse Design System 2022

Created by

@ruucm