Theming

Default theme

The theme object is where you define your application's color palette, type scale, font stacks, breakpoints, border radius values, and more.

Colors

The colors key allows you to customize the color palettes for your project. Hope UI uses color palettes of 10 shades ranging from 50 to 900.

tsx
import { createPalette } from "@hope-ui/core";
// example theme object
export default {
  colors: {
    light: {
      primary: createPalette({
        50: "#eff6ff",
        100: "#dbeafe",
        200: "#bfdbfe",
        300: "#93c5fd",
        400: "#60a5fa",
        500: "#3b82f6",
        600: "#2563eb",
        700: "#1d4ed8",
        800: "#1e40af",
        900: "#1e3a8a",
      }),
    },
  },
  dark: {
    // ...dark palettes, if needed
  },
};

tsx
import { createPalette } from "@hope-ui/core";
// example theme object
export default {
  colors: {
    light: {
      primary: createPalette({
        50: "#eff6ff",
        100: "#dbeafe",
        200: "#bfdbfe",
        300: "#93c5fd",
        400: "#60a5fa",
        500: "#3b82f6",
        600: "#2563eb",
        700: "#1d4ed8",
        800: "#1e40af",
        900: "#1e3a8a",
      }),
    },
  },
  dark: {
    // ...dark palettes, if needed
  },
};

the createPalette function will generate three additional values:

mainChannel: RGB color channel of the 500 shade.
lightChannel: RGB color channel of the 100 shade.
darkChannel: RGB color channel of the 900 shade.

These values allow you to create translucent colors using CSS variables.

tsx
<Box bg={theme => `rgb(${theme.vars.colors.primary.mainChannel} / 0.8)`}>
  Box with translucent background
</Box>

tsx
<Box bg={theme => `rgb(${theme.vars.colors.primary.mainChannel} / 0.8)`}>
  Box with translucent background
</Box>

Below is the list of all colors available in the default Hope UI theme. Switching to dark mode will show the proper values from the dark palette.

If you want to use your own colors, two popular options are TailwindCSS and OpenColor.

Common

white#ffffff

black#121212

foregroundvar(--hope-colors-neutral-800)

backgroundvar(--hope-colors-common-white)

focusRingvar(--hope-colors-primary-500)

Black alpha

50rgba(0, 0, 0, 0.04)

100rgba(0, 0, 0, 0.06)

200rgba(0, 0, 0, 0.08)

300rgba(0, 0, 0, 0.16)

400rgba(0, 0, 0, 0.24)

500rgba(0, 0, 0, 0.36)

600rgba(0, 0, 0, 0.48)

700rgba(0, 0, 0, 0.64)

800rgba(0, 0, 0, 0.80)

900rgba(0, 0, 0, 0.92)

White alpha

50rgba(255, 255, 255, 0.04)

100rgba(255, 255, 255, 0.06)

200rgba(255, 255, 255, 0.08)

300rgba(255, 255, 255, 0.16)

400rgba(255, 255, 255, 0.24)

500rgba(255, 255, 255, 0.36)

600rgba(255, 255, 255, 0.48)

700rgba(255, 255, 255, 0.64)

800rgba(255, 255, 255, 0.80)

900rgba(255, 255, 255, 0.92)

Primary

50#e6f6ff

100#bae3ff

200#7cc4fa

300#47a3f3

400#2186eb

500#0967d2

600#0552b5

700#03449e

800#01337d

900#002159

Neutral

50#f9fafa

100#f4f5f6

200#e3e5e8

300#cfd3d8

400#9aa1ac

500#67707e

600#49505a

700#393e46

800#22252a

900#151619

Success

50#e3f9e5

100#c1eac5

200#a3d9a5

300#7bc47f

400#57ae5b

500#3f9142

600#2f8132

700#207227

800#0e5814

900#05400a

Info

50#eae2f8

100#cfbcf2

200#a081d9

300#8662c7

400#724bb7

500#653cad

600#51279b

700#421987

800#34126f

900#240754

Warning

50#fffbea

100#fff3c4

200#fce588

300#fadb5f

400#f7c948

500#f0b429

600#de911d

700#cb6e17

800#b44d12

900#8d2b0b

Danger

50#ffe3e3

100#ffbdbd

200#ff9b9b

300#f86a6a

400#ef4e4e

500#e12d39

600#cf1124

700#ab091e

800#8a041a

900#610316

Typography

To manage typography options, the theme object supports the following keys:

fonts (font families)
fontSizes
fontWeights
lineHeights
letterSpacings

tsx
export default {
  fonts: {
    sans: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
    serif: "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
    mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
  },
  fontSizes: {
    xs: "0.75rem",
    sm: "0.875rem",
    base: "1rem",
    lg: "1.125rem",
    xl: "1.25rem",
    "2xl": "1.5rem",
    "3xl": "1.875rem",
    "4xl": "2.25rem",
    "5xl": "3rem",
    "6xl": "3.75rem",
    "7xl": "4.5rem",
    "8xl": "6rem",
    "9xl": "8rem",
  },
  fontWeights: {
    hairline: 100,
    thin: 200,
    light: 300,
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
    extrabold: 800,
    black: 900,
  },
  lineHeights: {
    none: 1,
    shorter: 1.25,
    short: 1.375,
    base: 1.5,
    tall: 1.625,
    taller: 2,
    "3": "0.75rem",
    "4": "1rem",
    "5": "1.25rem",
    "6": "1.5rem",
    "7": "1.75rem",
    "8": "2rem",
    "9": "2.25rem",
    "10": "2.5rem",
  },
  letterSpacings: {
    tighter: "-0.05em",
    tight: "-0.025em",
    normal: "0",
    wide: "0.025em",
    wider: "0.05em",
    widest: "0.1em",
  },
};

tsx
export default {
  fonts: {
    sans: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
    serif: "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
    mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
  },
  fontSizes: {
    xs: "0.75rem",
    sm: "0.875rem",
    base: "1rem",
    lg: "1.125rem",
    xl: "1.25rem",
    "2xl": "1.5rem",
    "3xl": "1.875rem",
    "4xl": "2.25rem",
    "5xl": "3rem",
    "6xl": "3.75rem",
    "7xl": "4.5rem",
    "8xl": "6rem",
    "9xl": "8rem",
  },
  fontWeights: {
    hairline: 100,
    thin: 200,
    light: 300,
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
    extrabold: 800,
    black: 900,
  },
  lineHeights: {
    none: 1,
    shorter: 1.25,
    short: 1.375,
    base: 1.5,
    tall: 1.625,
    taller: 2,
    "3": "0.75rem",
    "4": "1rem",
    "5": "1.25rem",
    "6": "1.5rem",
    "7": "1.75rem",
    "8": "2rem",
    "9": "2.25rem",
    "10": "2.5rem",
  },
  letterSpacings: {
    tighter: "-0.05em",
    tight: "-0.025em",
    normal: "0",
    wide: "0.025em",
    wider: "0.05em",
    widest: "0.1em",
  },
};

Space

The space key allows you to customize the global spacing scale for your project.

tsx
export default {
  space: {
    "0.5": "0.125rem",
    "1": "0.25rem",
    "1.5": "0.375rem",
    "2": "0.5rem",
    "2.5": "0.625rem",
    "3": "0.75rem",
    "3.5": "0.875rem",
    "4": "1rem",
    "5": "1.25rem",
    "6": "1.5rem",
    "7": "1.75rem",
    "8": "2rem",
    "9": "2.25rem",
    "10": "2.5rem",
    "12": "3rem",
    "14": "3.5rem",
    "16": "4rem",
    "20": "5rem",
    "24": "6rem",
    "28": "7rem",
    "32": "8rem",
    "36": "9rem",
    "40": "10rem",
    "44": "11rem",
    "48": "12rem",
    "52": "13rem",
    "56": "14rem",
    "60": "15rem",
    "64": "16rem",
    "72": "18rem",
    "80": "20rem",
    "96": "24rem",
  },
};

tsx
export default {
  space: {
    "0.5": "0.125rem",
    "1": "0.25rem",
    "1.5": "0.375rem",
    "2": "0.5rem",
    "2.5": "0.625rem",
    "3": "0.75rem",
    "3.5": "0.875rem",
    "4": "1rem",
    "5": "1.25rem",
    "6": "1.5rem",
    "7": "1.75rem",
    "8": "2rem",
    "9": "2.25rem",
    "10": "2.5rem",
    "12": "3rem",
    "14": "3.5rem",
    "16": "4rem",
    "20": "5rem",
    "24": "6rem",
    "28": "7rem",
    "32": "8rem",
    "36": "9rem",
    "40": "10rem",
    "44": "11rem",
    "48": "12rem",
    "52": "13rem",
    "56": "14rem",
    "60": "15rem",
    "64": "16rem",
    "72": "18rem",
    "80": "20rem",
    "96": "24rem",
  },
};

Sizes

The sizes key allows you to customize the global sizing of components you build for your project.

jsx
export default {
  sizes: {
    ...space,
    max: "max-content",
    min: "min-content",
    full: "100%",
    screenW: "100vw",
    screenH: "100vh",
    xs: "20rem",
    sm: "24rem",
    md: "28rem",
    lg: "32rem",
    xl: "36rem",
    "2xl": "42rem",
    "3xl": "48rem",
    "4xl": "56rem",
    "5xl": "64rem",
    "6xl": "72rem",
    "7xl": "80rem",
    "8xl": "90rem",
  },
};

jsx
export default {
  sizes: {
    ...space,
    max: "max-content",
    min: "min-content",
    full: "100%",
    screenW: "100vw",
    screenH: "100vh",
    xs: "20rem",
    sm: "24rem",
    md: "28rem",
    lg: "32rem",
    xl: "36rem",
    "2xl": "42rem",
    "3xl": "48rem",
    "4xl": "56rem",
    "5xl": "64rem",
    "6xl": "72rem",
    "7xl": "80rem",
    "8xl": "90rem",
  },
};

Radii

The radii key allows you to customize the global radii (border radius) scale for your project.

tsx
export default {
  radii: {
    none: "0",
    xs: "0.125rem",
    sm: "0.25rem",
    md: "0.375rem",
    lg: "0.5rem",
    xl: "0.75rem",
    "2xl": "1rem",
    "3xl": "1.5rem",
    full: "9999px",
  },
};

tsx
export default {
  radii: {
    none: "0",
    xs: "0.125rem",
    sm: "0.25rem",
    md: "0.375rem",
    lg: "0.5rem",
    xl: "0.75rem",
    "2xl": "1rem",
    "3xl": "1.5rem",
    full: "9999px",
  },
};

Shadows

The shadows key allows you to customize the global shadow scale for your project.

tsx
export default {
  shadows: {
    none: "0 0 #0000",
    xs: "0px 1px 2px rgb(16 24 40 / 5%)",
    sm: "0px 1px 3px rgb(16 24 40 / 10%), 0px 1px 2px rgb(16 24 40 / 6%)",
    md: "0px 4px 8px -2px rgb(16 24 40 / 10%), 0px 2px 4px -2px rgb(16 24 40 / 6%)",
    lg: "0px 12px 16px -4px rgb(16 24 40 / 8%), 0px 4px 6px -2px rgb(16 24 40 / 3%)",
    xl: "0px 20px 24px -4px rgb(16 24 40 / 8%), 0px 8px 8px -4px rgb(16 24 40 / 3%)",
    "2xl": "0px 24px 48px -12px rgb(16 24 40 / 18%)",
    "3xl": "0px 32px 64px -12px rgb(16 24 40 / 14%)",
    inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.06)",
  },
};

tsx
export default {
  shadows: {
    none: "0 0 #0000",
    xs: "0px 1px 2px rgb(16 24 40 / 5%)",
    sm: "0px 1px 3px rgb(16 24 40 / 10%), 0px 1px 2px rgb(16 24 40 / 6%)",
    md: "0px 4px 8px -2px rgb(16 24 40 / 10%), 0px 2px 4px -2px rgb(16 24 40 / 6%)",
    lg: "0px 12px 16px -4px rgb(16 24 40 / 8%), 0px 4px 6px -2px rgb(16 24 40 / 3%)",
    xl: "0px 20px 24px -4px rgb(16 24 40 / 8%), 0px 8px 8px -4px rgb(16 24 40 / 3%)",
    "2xl": "0px 24px 48px -12px rgb(16 24 40 / 18%)",
    "3xl": "0px 32px 64px -12px rgb(16 24 40 / 14%)",
    inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.06)",
  },
};

zIndices

The zIndices key allows you to customize the global z-indices (z-index) scale for your project.

tsx
export default {
  zIndices: {
    hide: -1,
    base: 0,
    docked: 10,
    sticky: 1000,
    banner: 1100,
    overlay: 1200,
    modal: 1300,
    dropdown: 1400,
    popover: 1500,
    tooltip: 1600,
    skipLink: 1700,
    toast: 1800,
  },
};

tsx
export default {
  zIndices: {
    hide: -1,
    base: 0,
    docked: 10,
    sticky: 1000,
    banner: 1100,
    overlay: 1200,
    modal: 1300,
    dropdown: 1400,
    popover: 1500,
    tooltip: 1600,
    skipLink: 1700,
    toast: 1800,
  },
};