Theme configuration

This setup allows the user to define partial theme colors. That means it’s not required to specify every color — only the ones you wish to customize. Any colors not explicitly defined will automatically fall back to the default values.

Import necessary modules and create a custom theme configuration.

import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import App from "./App"
import { Provider, createTheme } from "@dxdns-kit/react"

const theme = createTheme({
  colors: { light: { bg: "orange" } }
})

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Provider theme={theme}>
      <App />
    </Provider>
  </StrictMode>
)

Accessing Theme Colors

You can access and use theme colors throughout your components. For example, you might want to use colors defined in the theme for different parts of your app.

Preview

light

toggle theme

• primary:
• onPrimary:
• secondary:
• onSecondary:
• muted:
• bg:
• onBg:
• surface:
• onSurface:
• border:
• disabled:
• onDisabled:
• skeleton:
• onSkeleton:
• overlay:
• shadow:
• success:
• onSuccess:
• error:
• onError:
• warning:
• onWarning:
• info:
• onInfo:

Usage

import {
  Badge,
  Button,
  Card,
  Provider,
  themeConfig
} from "@dxdns-kit/react"

function ThemeColorPreview() {
  const theme = themeConfig()

  return (
    <>
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          gap: "1rem",
          alignItems: "center"
        }}
      >
        <h2>{theme.mode}</h2>
        <Button variant="outlined" onClick={theme.toggle}>
          toggle theme
        </Button>
      </div>
      <Card
        style={{
          background: theme.mode === "dark" ? "green" : "red"
        }}
      >
        <ul style={{ lineHeight: 2 }}>
          {Object.keys(theme.colors).map((t) => {
            const color = theme.colors[t as keyof typeof theme.colors]
            return (
              <li key={t}>
                <span
                  style={{
                    color: "aqua"
                  }}
                >
                  {t}
                </span>
                :
                <Badge
                  roundedFull
                  style={{
                    background: color
                  }}
                  size="sm"
                ></Badge>
              </li>
            )
          })}
        </ul>
      </Card>
    </>
  )
}

export default function () {
  return (
    <Provider>
      <ThemeColorPreview />
    </Provider>
  )
}