Skip to content
Grammar Web (Dev)

Theming

Setting theme

Auto theme

On top of your main css file, add the following to enable auto theme

@import '@tpg/grammar-web/styles/brands/ENTER_BRAND_HERE/theme/dark/auto-theme.css';
@import '@tpg/grammar-web/styles/brands/ENTER_BRAND_HERE/theme/light/auto-theme.css';
@import '@tpg/grammar-web/styles/brands/ENTER_BRAND_HERE/device/tablet-lg/device.css';

Singular color theme

To force one theme, you can import just the theme.css instead of the auto-theme.css

@import '@tpg/grammar-web/styles/brands/ENTER_BRAND_HERE/theme/dark/theme.css';
@import '@tpg/grammar-web/styles/brands/ENTER_BRAND_HERE/device/tablet-lg/device.css';

More information about theming

We currently support three brands. Facnav, ISR and NORA and four different color themes. dark, light, high-contrast-dark and high-contrast-light.

Inside theme we have the following files

  • auto-theme.css - Automatically applies the css variables based based on conditions. Use this one for auto themeing. Remmeber to also import the other variant (e.g. make sure to import both dark and light version of this theme.css)
  • theme.css - Applies the css color variables. Use this if you only want to support one color theme.

Inside the device folder, you will find the differnet devices that we support and the following.

  • device.css - Size and spacing variables.

Make sure to only import theme or auto-theme, don’t combine these two. If you import auto-theme, make sure to import both the dark and light version. You can import device.css based on sizes for a more responsive experience.