Interface ThemeService

A Theme Service that provides methods to interact with the chakra theme.

e.g. change the color mode of the application. or update the system config of the application.

interface ThemeService {
    colorMode: ColorModeValue;
    systemColorMode: ColorModeValue;
    systemConfig: SystemConfig | undefined;
    setColorMode(value: ColorModeValueSupplier | ColorModeValue): void;
    setSystemConfig(
        value: ChakraSystemConfigSupplier | SystemConfig | undefined,
    ): void;
}

Hierarchy (View Summary)

DeclaredService<"runtime.ThemeService">
- ThemeService

Index

Properties

colorMode systemColorMode systemConfig

Methods

setColorMode setSystemConfig

Properties

`Readonly`colorMode

colorMode: ColorModeValue

The currently active color mode. It is reactive. Defaults to `"light".

`Readonly`systemColorMode

systemColorMode: ColorModeValue

The color mode preferred by the system (browser or operating system).

`Readonly`systemConfig

systemConfig: SystemConfig | undefined

The currently active system config.

Methods

setColorMode

setColorMode(value: ColorModeValueSupplier | ColorModeValue): void
Updates the color mode of the application. Can be called with a direct value or a function that returns a value. The function form allows the use of reactive values, which will automatically trigger a color mode update.
Parameters
- value: ColorModeValueSupplier | ColorModeValue
Returns void
- Defined in api.ts:180

setSystemConfig

setSystemConfig(
value: ChakraSystemConfigSupplier | SystemConfig | undefined,
): void
Updates the system config of the application. Can be called with a direct value or a function that returns a value. The function form allows the use of reactive values, which will automatically trigger a system config update.
Parameters
- value: ChakraSystemConfigSupplier | SystemConfig | undefined
Returns void
- Defined in api.ts:192