Theme

0.4.0

The Theme must be applied to the highest level of your application, usually in the root component. It is responsible for applying the default DS theme, which includes colors, typography, spacing, etc.

Installation

pnpm add @inpulse-ds/theme

Usage

We recommend applying the Theme in Root Layout. This ensures that the theme is applied to all routes in the application. Root Layout is the component responsible for modifying the initial HTML returned by the server.

app/layout.tsx

import React from 'react';
import { Theme } from '@inpulse-ds/theme';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <Theme
          background="0 0% 100%"
          foreground="222.2 47.4% 11.2%"
          ...
        >
          {children}
        </Theme>
      </body>
    </html>
  )
}

API

It is possible to change the colors applied to all components by changing the Theme properties. Colors are defined in HSL, which allows greater flexibility and control over the color palette.

Light

Prop	Type	Default value	Required
`background`	`string`	-	Yes
`foreground`	`string`	-	Yes
`primary`	`string`	-	Yes
`primaryForeground`	`string`	-	Yes
`secondary`	`string`	-	Yes
`secondaryForeground`	`string`	-	Yes
`muted`	`string`	-	Yes
`mutedForeground`	`string`	-	Yes
`accent`	`string`	-	Yes
`accentForeground`	`string`	-	Yes

Dark

All Dark theme colors are optional. If your project does not use a dark theme, the light theme will be applied to all components.

Prop	Type	Default value	Required
`darkBackground`	`string`	`background`	No
`darkForeground`	`string`	`foreground`	No
`darkPrimary`	`string`	`primary`	No
`darkPrimaryForeground`	`string`	`primaryForeground`	No
`darkSecondary`	`string`	`secondary`	No
`darkSecondaryForeground`	`string`	`secondaryForeground`	No
`darkMuted`	`string`	`muted`	No
`darkMutedForeground`	`string`	`mutedForeground`	No
`darkAccent`	`string`	`accent`	No
`darkAccentForeground`	`string`	`accentForeground`	No

Slot Visually Hidden