Themes

How themes work

A Theme is just a name plus a Record<string, string> of CSS variables.

interface Theme {
  name: string
  variables: Record<string, string>
  styles?: string  // optional inline CSS injected once
}

<ThemeProvider> wraps children in a <div data-theme="..."> with the variables applied as inline style. No theme engine, no runtime cost.

Built-in themes

Five ship from @react-slides/themes: minimal, dark, light, corporate, hacker.

Preview Code

import { Slide } from '@react-slides/core'
import { ThemeProvider, dark } from '@react-slides/themes'

const slides = () => {
  return (
    <>
      <ThemeProvider theme={dark}>
      <Slide>
        <h1>Dark theme</h1>
        <p>Background, foreground, accent — all CSS variables.</p>
      </Slide>
      </ThemeProvider>
    </>
  )
}

export default slides

Preview Code

import { Slide } from '@react-slides/core'
import { ThemeProvider, minimal } from '@react-slides/themes'

const slides = () => {
  return (
    <>
      <ThemeProvider theme={minimal}>
      <Slide>
        <h1>Minimal theme</h1>
        <p>Clean, white, blue accent.</p>
      </Slide>
      </ThemeProvider>
    </>
  )
}

export default slides

Standard variables

Every built-in theme provides at least:

Variable	Purpose
--rs-bg	Slide background
--rs-fg	Default foreground/text
--rs-accent	Brand/highlight color
--rs-muted	Secondary text
--rs-border	Hairlines
--rs-shadow	Drop shadows
--rs-radius	Border radius default
--rs-code-bg	Code block background
--rs-highlight-bg	Line highlight in CodeStepper
--rs-fragment-transition	Fragment fade transition
--rs-spacing-slide	Slide padding default
--rs-font-heading / --rs-font-body / --rs-font-code	Type stacks
--rs-font-size-h1 / h2 / h3 / body / code	Type scale

Overriding

Compose with object spread — themes are plain data.

import { dark, defineTheme } from '@react-slides/themes'

const myTheme = defineTheme({
  ...dark,
  name: 'my-dark',
  variables: {
    ...dark.variables,
    '--rs-accent': '#ff5722',
  },
})

Or change one variable at runtime:

const { setVariable } = useTheme()
setVariable('--rs-accent', '#ff5722')

Custom theme from scratch

import { Slide } from '@react-slides/core'
import { defineTheme, ThemeProvider } from '@react-slides/themes'

const ocean = defineTheme({
  name: 'ocean',
  variables: {
    '--rs-bg': '#001f3f',
    '--rs-fg': '#7fdbff',
    '--rs-accent': '#39cccc',
  },
})

const slides = () => {
  return (
    <ThemeProvider theme={ocean}>
      <>
        <Slide>
          <h1>Ocean theme</h1>
        </Slide>
      </>
    </ThemeProvider>
  )
}

export default slides

Reset CSS

Optionally import the bundled reset:

import '@react-slides/themes/reset.css'