Create a Theme

This guide will help you understand the process of creating a custom UI theme for your app using the DAOhaus SDK.

Components

The Component Library packages hold the design theme for all React components in the SDK.

You can explore the components with the default theme in our Storybook (opens in a new tab).

Styled Components (opens in a new tab) are utilized for adding custom CSS.

Colors

The color system was created with Radix (opens in a new tab), which offers a refined and accessible approach to designing user interfaces, ensuring both aesthetics and accessibility. Key features include text colors that meet targeted contrast ratios, seamless automatic dark mode integration, transparent color variants, APCA text contrast targeting, and P3 color gamut support for vibrant hues.

The system is built on a 12-step scale, where each step corresponds to specific UI use cases—from app backgrounds to high-contrast text. Developers looking to grasp the intricacies of the color scales can find detailed documentation for Understanding the scale (opens in a new tab). Additionally, you can view the predefined color Scales (opens in a new tab) and gather tips for Composing a color palette (opens in a new tab).

Theme

You can view the code for the theme in our monorepo (opens in a new tab).

Setup

Setup your app to use the DAOhaus UI Library.

Install

yarn add @daohaus/ui

Add HausThemeProvider to the root of your app.

// main.tsx
import React from 'react';
import { HausThemeProvider } from '@daohaus/ui';
 
import { App } from './App';
 
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <HausThemeProvider>
      <App />
    </HausThemeProvider>
  </React.StrictMode>
);

🤔

If using Vite you will need to update your vite.config.ts similar to our dao-app-starter-vite (opens in a new tab)

You will now be able to add any component from the UI library to your app.

import { Button } from '@daohaus/ui';
 
export const ExampleComponent = () => {
  return <Button>I am Button</Button>;
};

Customizing the Theme

HausThemeProvider can be passed a new theme to override elements of the default theme.

Create a new theme object in your components directory.

// theme.ts
import { ThemeOverrides } from '@daohaus/ui';
 
export const customTheme: ThemeOverrides = {
  themeName: 'customThemeName',
};

Import the theme and pass the object to HausThemeProvider in main.tsx.

import React from 'react';
import { HausThemeProvider } from '@daohaus/ui';
 
import { App } from './App';
import { customTheme } from './components/theme';
 
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <HausThemeProvider themeOverrides={customTheme}>
      <App />
    </HausThemeProvider>
  </React.StrictMode>
);

Override elements in the theme object to change default styling

// theme.ts
import { ThemeOverrides, defaultDarkTheme } from '@daohaus/ui';
import { crimson } from '@radix-ui/colors';
 
export const customPrimary = {
  step1: crimson.crimson1,
  step2: crimson.crimson2,
  step3: crimson.crimson3,
  step4: crimson.crimson4,
  step5: crimson.crimson5,
  step6: crimson.crimson6,
  step7: crimson.crimson7,
  step8: crimson.crimson8,
  step9: crimson.crimson9,
  step10: crimson.crimson10,
  step11: crimson.crimson11,
  step12: crimson.crimson12,
};
 
export const customTheme: ThemeOverrides = {
  themeName: 'customThemeName',
  rootBgColor: customPrimary.step11,
  rootFontColor: customPrimary.step5,
  primary: { ...customPrimary },
  button: {
    ...defaultDarkTheme.button,
    radius: '10px',
  },
};

crimson-theme

Overriding Component Styles

You can also use styled-components to tweak individual component styles.

Create a new component in your components directory.

// ExampleComponent.tsx
import styled from 'styled-components';
import { H1, Tag } from '@daohaus/ui';
 
const CrazyH1 = styled(H1)`
  font-size: 17rem;
  text-decoration: underline;
  text-shadow: 0.03em 0.03em 0 hsla(230, 40%, 50%, 1);
`;
 
const BigTag = styled(Tag)`
  width: 30rem;
  height: 20rem;
  font-size: 8rem;
`;
 
export const ExampleComponent = () => {
  return (
    <div>
      <CrazyH1>CrazyHeading</CrazyH1>
      <BigTag tagColor="pink">BigTag</BigTag>
    </div>
  );
};

Import the component and add it to any page.

Scaffold an App Build a Form