Theme

Spaceweb themes is built from the combination of

• TailwindCSS providing the basic set of atomic utilities
• @sprinklr/style-dictionary providing the style-tokens

We provide two themes out of the box, Light and Dark, which style components in light & dark variants.

Toggling light and dark theme

If you want to allow for toggling between the two themes at runtime, you need to allocate some state for determining which theme is passed to SpacewebProvider.

import React, { ReactElement } from 'react';

import SpacewebProvider from '@sprinklrjs/spaceweb/spacewebProvider';
import { Direction, ThemeModule } from '@sprinklrjs/spaceweb-themes/types';
import sprLight from '@sprinklrjs/spaceweb-themes/space/light';
import sprLight from '@sprinklrjs/spaceweb-themes/space/dark';

type State = {
  theme: 'light' | 'dark';
  direction: Direction;
};

const App = (): ReactElement => {
    const [state, setState] = useState<State>({
      theme: 'dark',
      direction: 'ltr'
    });

    return (
        <SpacewebProvider direction={state.direction} theme={state.theme === 'light' ? sprLight : sprDark}>
            {/* your application code here */}
        </SpacewebProvider>
    );
};

export default App;

Override Theme

You can override the theme with the help of ThemeProvider.

import React, { ReactElement } from 'react';

import SpacewebProvider from '@sprinklrjs/spaceweb/spacewebProvider';
import { ThemeProvider } from '@sprinklrjs/spaceweb/theme';

import { Box } from '@sprinklrjs/spaceweb-themes/box';
import sprLight from '@sprinklrjs/spaceweb-themes/space/light';
import hyperspaceLight from '@sprinklrjs/spaceweb-themes/hyperspace/light';

const App = (): ReactElement => (

  <SpacewebProvider theme={sprLight}>

    <Box className="spr-text-04">This is text is sprLight themed</Box>

    <ThemeProvider theme={hyperspaceLight}>
      <Box className="spr-text-04">This is text is hyperspaceLight themed</Box>
    </ThemeProvider>

  </SpacewebProvider>

);

export default App;

Theme Properties

The theme object organizes its various properties according to their respective concerns.

Using Theme Properties in Code

Head over to the styling guide on how to use these theme properties to style your code.