DocsTheming

Theming

UI Kit is built on a design system–agnostic architecture, powered by a flexible theming system that supports multiple themes out of the box.

Theme Object

The theme object serves as the UI Kit foundation, defining all styling specifications — including colors, font sizes, spacing, shadows, and more.

[Sample]

Theme Configuration

UI Kit includes three default themes, each available in two color modes: dawn (light) and wicked (dark):

  • ds3 and ds5 — aligned with the Next Design System
  • pentahoPlus — aligned with the Pentaho Design System

Use the HvProvider to configure the active theme and color mode:

<HvProvider themes={[pentahoPlus]} theme="pentahoPlus" colorMode="dawn">
  <App />
</HvProvider>
  • If themes is not provided, the default is ds5.
  • If only one theme is provided, theme can be omitted.
  • If colorMode is omitted, dawn is used by default.

Creating a New Theme

Use createTheme() to define a custom theme based on existing ones. This allows you to:

  • Create custom color modes
  • Override design tokens like colors, spacing, or fonts
  • Extend the theme with new properties
const myTheme = createTheme({
  name: "myTheme",
  base: "pentahoPlus",
  inheritColorModes: false,
  colors: {
    modes: {
      sand: {
        backgroundColor: "#EAE7DC",
        primary: "#536f8f",
        positive: "#738f54",
        warning: "#d9905f",
      },
    },
  },
  fontFamily: {
    body: "Courier New",
  },
});
 
<HvProvider themes={[myTheme]} colorMode="sand">
  <App />
</HvProvider>;

Theme Context

Use the useTheme() hook to dynamically access or update theme information:

const {
  selectedTheme, // Active theme name
  selectedMode, // Active color mode
  themes, // Available themes
  colorModes, // Modes for the current theme
  changeTheme, // Function to switch theme or color mode
  activeTheme, // The active theme object
  colors, // Active color palette
} = useTheme();

Change Themes at Runtime

Toggle themes or color modes at runtime — ideal for user preferences (e.g. light/dark mode):

const MyComponent = () => {
  const { selectedTheme, selectedMode, changeTheme } = useTheme();
 
  return (
    <HvButton
      icon
      variant="secondaryGhost"
      onClick={() =>
        changeTheme(selectedTheme, selectedMode === "dawn" ? "wicked" : "dawn")
      }
    >
      <ThemeSwitcher />
    </HvButton>
  );
};

CSS Variables

All theme tokens are exported as CSS variables prefixed with --uikit-*. You can access them directly via the theme object from @hitachivantara/uikit-react-core:

import { HvTypography, theme } from "@hitachivantara/uikit-react-core";
 
const CssVariables = () => {
  return (
    <HvTypography
      style={{
        color: theme.colors.neutral, // resolves to var(--uikit-colors-neutral)
        fontWeight: theme.fontWeights.semibold, // resolves to var(--uikit-fontWeights-semibold)
        fontSize: theme.fontSizes.lg, // resolves to var(--uikit-fontSizes-lg)
      }}
    >
      CSS variables!
    </HvTypography>
  );
};

Default Props and Class Overrides

You can globally define default props and custom styles for any component using the components key inside your theme. This reduces boilerplate and improves consistency.

const newTheme = createTheme({
  name: "myTheme",
  base: "ds5",
  components: {
    HvAvatar: {
      variant: "square",
      // 👆 override "normal" props
    },
    HvButton: {
      classes: {
        // 👇 override classes styles
        primarySubtle: {
          color: theme.colors.brand,
        },
      },
    },
  },
});
 
const DefaultProps = () => {
  return (
    <HvProvider cssTheme="scoped" themes={[newTheme]}>
      <HvButton variant="primarySubtle">Hey!</HvButton>
      <HvAvatar />
    </HvProvider>
  );
};

Utilities

Spacing

Use the spacing() utility to apply consistent spacing based on an 8px grid:

theme.spacing(2); // "16px"
theme.spacing(1, 0); // "8px 0px"
theme.spacing("sm"); // "16px"
theme.spacing("sm", "inherit", "42px"); // "16px inherit 42px"

Alpha Colors

Use the alpha() utility to apply transparency to a color:

theme.alpha("primary", 0.5); // rgba(...)

By following these theming capabilities, you can fully leverage UI Kit’s flexibility and maintain consistent branding across your applications.

ReleasesColor Tokens