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

Override Foundational Colors

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

Override Semantic Colors

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

New Semantic Colors

Name
Color
backgroundPrimaryAccent
#f9f9f9
remove
backgroundSecondaryAccent
#dbdbdb
remove
Lighting
Name
Shadow
shadow400
2px 2px 0px 0px hsla(0,0%,0%,0.55)
remove
shadow500
4px 4px 0px 0px hsla(0,0%,0%,0.55)
remove
shadow600
8px 8px 0px 0px hsla(0,0%,0%,0.55)
remove
shadow700
10px 10px 0px 0px hsla(0,0%,0%,0.55)
remove
overlay0
inset 0 0 0 1000px hsla(0,0%,0%,0)
remove
overlay100
inset 0 0 0 1000px hsla(0,0%,0%,0.04)
remove
overlay200
inset 0 0 0 1000px hsla(0,0%,0%,0.08)
remove
overlay300
inset 0 0 0 1000px hsla(0,0%,0%,0.12)
remove
overlay400
inset 0 0 0 1000px hsla(0,0%,0%,0.16)
remove
overlay500
inset 0 0 0 1000px hsla(0,0%,0%,0.2)
remove
overlay600
inset 0 0 0 1000px hsla(0,0%,0%,0.24)
remove
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 2021

Created by

@ruucm