How to use themes in your project

How to use themes in your project

Enable usage of themes

Firstly, you should enable usage of themes in the config.

You can enable usage of themes for colors or effects now.

Set an array of allowedThemes and defaultTheme in Config -> styles.

After that, you may set useTHeme: true field inside Config -> styles -> colors or Config -> styles -> effects to enable usage of themes.

figma-extractor.config.js
module.exports = {
  ...
  allowedThemes: ['light','dark'],
  defaultTheme: 'light',
  styles: {
    exportPath: './theme',
    colors: {
      ...,
      useTheme: true,
    },
    effects: {
      ...,
      useTheme: true,
    },
    ...
  },
...
};

For more information to follow there

Launch the extractor.

After successfully launching of the extractor you see created files like that:

  • ui
    • themes-list.ts
    /* eslint-disable max-lines */
/* eslint-disable @typescript-eslint/naming-convention */
 
// THIS FILE IS GENERATED AUTOMATICALLY. DON'T CHANGE IT.
 
export const DEFAULT_THEME = 'light';
 
export const THEMES = ['dark', 'light'];
 
export type Theme = (typeof THEMES)[number];

    Install next-themes package in your project

    Generated files can be used with https://github.com/pacocoursey/next-themes (opens in a new tab).

    next-themes is a great solution for switching themes.

    Include received themes in next-themes

    Inside app.tsx you should add following code:

    app.tsx
    import { THEMES, DEFAULT_THEME } from '@sh/ui/theme/themes-list';
 
<ThemeProvider attribute="data-theme" defaultTheme={DEFAULT_THEME} themes={THEMES}>
  {children}
</ThemeProvider>

    Include generated js files in tailwind.config.js

    tailwind.config.js
    const colors = require('./theme/colors/with-vars');
const effects = require('./theme/effects/with-vars');
 
/** @type {import('tailwindcss').Config} */
module.exports = {
  ...
  theme: {
    ...
    ...effects,
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      ...colors,
    },
  },
  ...
};
    ⚠️

    Note: You should import with-vars.js file instead of index.js.

    index.js contents real data from Figma and it's been left only for legacy code.

    with-vars.js contents CSS variables for correctly working with themes.

    Include generated CSS files in global-styles.

    You should include all CSS variables for each theme and a root theme.

    In ui/organisms/global-styles/index.css add following lines:

    ui/organisms/global-styles/index.css
     
@import "@sh/ui/theme/colors/vars.css";
@import "@sh/ui/theme/colors/light/vars.css";
@import "@sh/ui/theme/colors/dark/vars.css";
 
@import "@sh/ui/theme/effects/vars.css";
@import "@sh/ui/theme/effects/light/vars.css";
@import "@sh/ui/theme/effects/dark/vars.css";
 
@tailwind base;
@tailwind components;
@tailwind utilities;

    Finish.

    Now you can use tailwind's classes as usually.

    How to find node id