Reflexjs
DocumentationBlocks LibraryGuidesGitHub
/
,

Theme Specification

Reflexjs themes are based on an extension of the Theme UI specification.


The theme object is made up of the following data types:

  • Scales: plain objects or arrays of values for related CSS properties
  • Styles: global styles that are injected via the GlobalStyles component.
  • Variants: composable variants for your components.
  • Icons: The svg icon library used by the Icon component.

You can read more about the Theme UI theme specification here.

Configuration Flags

The following configuration flags can be enabled in your theme.

FlagDefaultDescription
useCustomPropertiestrueEnables CSS custom properties to help mitigate a flash of unstyled content during rehydration
useRootStylesfalseAdds styles defined in theme.styles.root to the <html> element along with color and background-color
useBodyStylestrue(Will be deprecated in future) Adds styles defined in theme.styles.root to the <body> element along with color and background-color
initialColorModeName'default'The key used for the top-level color palette in theme.colors
useColorSchemeMediaQueryfalseInitializes the color mode based on the prefers-color-scheme media query
useBorderBoxtrueAdds a global box-sizing: border-box style
useLocalStoragetruePersists the color mode in localStorage

These flags are from the Theme UI specs. You can read more about it here.

Example theme

theme.ts
import { Theme } from "reflexjs"
const theme: Theme = {
breakpoints: ["640px", "768px", "1024px", "1280px"],
colors: {
text: "#111",
background: "#fff",
primary: "#06f",
modes: {
dark: {
text: "#ededee",
background: "#1a202c",
primary: "#fb3640",
},
},
},
fonts: {
body: "system-ui, sans-serif",
heading: "system-ui, sans-serif",
monospace: "Menlo, monospace",
},
fontWeights: {
body: 400,
heading: 700,
bold: 700,
},
lineHeights: {
body: 1.5,
heading: 1.125,
},
styles: {
// Global styles.
root: {
"*": {
m: 0,
p: 0,
},
},
},
// Variants
// <p variant="text.lead" />
text: {
color: "text",
fontFamily: "body",
lead: {
fontSize: "2xl",
lineHeight: "normal",
fontWeight: "normal",
},
},
// Icons.
// <Icon name="arrow-right" />
icons: {
"arrow-right": `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" ...></path></svg>`,
},
}
Create React AppStyle props

© 2022 Reflexjs

DocumentationBlocks LibraryGuidesGitHub