Theme Color Schemes
About 1 minutes read
Retypeset defines theme color schemes based on the OKLCH color space, with a default black, white, and gray color scheme that simulates a print style.
To meet personalization needs, I’ve created several color schemes for the theme. You can replace the default color scheme in src/config.ts and restart the development server to preview the new color scheme.
Scallion White
light: {
primary: 'oklch(0.25 0.03 211.86)',
secondary: 'oklch(0.40 0.03 211.86)',
background: 'oklch(0.99 0.0039 106.47)',
highlight: 'oklch(0.93 0.195089 103.2532 / 0.5)',
},
dark: {
primary: 'oklch(0.92 0.0015 106.47)',
secondary: 'oklch(0.79 0.0015 106.47)',
background: 'oklch(0.24 0.0039 106.47)',
highlight: 'oklch(0.93 0.195089 103.2532 / 0.2)',
},Raven Teal
light: {
primary: 'oklch(0.24 0.0172 280.05)',
secondary: 'oklch(0.40 0.0172 280.05)',
background: 'oklch(0.98 0.0172 280.05)',
highlight: 'oklch(0.93 0.195089 103.2532 / 0.5)',
},
dark: {
primary: 'oklch(0.92 0.0172 280.05)',
secondary: 'oklch(0.79 0.0172 280.05)',
background: 'oklch(0.24 0.0172 280.05)',
highlight: 'oklch(0.93 0.195089 103.2532 / 0.2)',
},Ink Blue
light: {
primary: 'oklch(0.24 0.053 261.24)',
secondary: 'oklch(0.39 0.053 261.24)',
background: 'oklch(1 0 0)',
highlight: 'oklch(0.93 0.195089 103.2532 / 0.5)',
},
dark: {
primary: 'oklch(0.92 0 0)',
secondary: 'oklch(0.79 0 0)',
background: 'oklch(0.24 0.016 265.21)',
highlight: 'oklch(0.93 0.195089 103.2532 / 0.2)',
},Ecru
light: {
primary: 'oklch(0.25 0 0)',
secondary: 'oklch(0.41 0 0)',
background: 'oklch(0.95 0.0237 59.39)',
highlight: 'oklch(0.93 0.195089 103.2532 / 0.5)',
},
dark: {
primary: 'oklch(0.93 0.019 59.39)',
secondary: 'oklch(0.80 0.017 59.39)',
background: 'oklch(0.23 0 0)',
highlight: 'oklch(0.93 0.195089 103.2532 / 0.2)',
},