Themed

Built-in themes

Preview Code

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

const slides = () => {
  return (
    <>
      <ThemeProvider theme={hacker}>
      <Slide>
        <h1>Terminal vibes</h1>
        <Fragment><p>Green on black</p></Fragment>
      </Slide>
      </ThemeProvider>
    </>
  )
}

export default slides

Preview Code

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

const slides = () => {
  return (
    <>
      <ThemeProvider theme={light}>
      <Slide>
        <h1>Light theme</h1>
      </Slide>
      </ThemeProvider>
    </>
  )
}

export default slides

Override one variable

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

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

const slides = () => {
  return (
    <ThemeProvider theme={orangeAccent}>
      <>
        <Slide>
          <h1>Orange accent</h1>
        </Slide>
      </>
    </ThemeProvider>
  )
}

export default slides

Runtime override

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

function AccentSwitcher() {
  const { setVariable } = useTheme()
  return (
    <button type="button" onClick={() => setVariable('--rs-accent', '#22c55e')}>
      Green accent
    </button>
  )
}

const slides = () => {
  return (
    <ThemeProvider theme={dark}>
      <>
        <Slide>
          <h1>Themed slide</h1>
          <AccentSwitcher />
        </Slide>
      </>
    </ThemeProvider>
  )
}

export default slides

Custom theme

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',
    '--rs-muted': '#39476a',
  },
})

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

export default slides