Skip to main content

Themes

latest

Introduction to Theming in Arc​

Theming is an integral part of the Arc design system, allowing you to tailor the visual appearance of your application to match your brand or project requirements. With the introduction of tokenized theming, the process has become more flexible, enabling precise control over various design elements.

Tokenized Theming​

Arc's tokenized theming approach leverages a system of design tokens—configurable values for properties such as colors, typography, and spacing. These tokens serve as the building blocks for defining the visual language of your application. By utilizing tokens, you can easily maintain a consistent and coherent design across different components.

Available Themes​

Arc currently offers three distinct themes: BT Enterprise, EE and BT Business. Each theme comes with its set of design tokens.

Getting Started​

To get started with theming in Arc, consider the following steps:

  1. Choose a Theme: Select the theme that aligns with your brand or project requirements.

  2. Import Theme Package: Integrate the theme styles and fonts into your application by importing the corresponding package.

// _app.js

// bt-business fonts and style tokens
import "@arc-ui/themes/lib/bt-business.css";

// component styles
import "@arc-ui/components/lib/styles.css";
  1. Import Theme icons Arc provides an icons package containing icons for each brand (BT and EE) which can be used to import SVGs into your project - whether to use with our components (button etc) or generally for use in your project.
// bt and ee icons
import { <the-icon-you-want> } from "@arc-ui/icons/<the-icon-you-want>";
  1. Optional - Utilize Design Tokens: Leverage the design tokens provided by your selected theme to style your custom components. This can include adjusting colors, typography, and other visual properties using the predefined tokens. Vist the getting started page for more information.
import "@arc-ui/tokens-bt-business/dist/index.css";
import { SemSizeBreakpointsXs } "@arc-ui/tokens-bt-business/";
  1. Theme Component:

You can wrap your app in the theme component passing the theme you want as a prop.

<Theme theme="bt-business">
  <Main />
</Theme>