Dark/Light Mode

The Hummingbot design system provides an automatic dark mode out of the box. By applying the TailwindCSS classes correctly, the UI will adapt to the current color scheme.

See below the appearence of the different color schemes. See further below on how to implement them.

Dark Mode

Appearance of Body, Window and Text variants in dark mode:

Light Mode

Appearance of Body, Window and Text variants in light mode:

Implementation

You should use HBUI's layout elements to achieve this effect systematically. The required classes have already been added for you, saving you time and possible errors.

1import { Section, Container, Window } from '@hummingbot/hbui/elements/layout'
2import { P } from '@hummingbot/hbui/elements/typography'
3import tw  from 'twin.macro' // required for the tw property to work
4
5<Section> // the "body" element
6  <Container>
7    <Window> // the window element
8      <P tw='text-primary'>Text Primary</P>
9      <br />
10      <P tw='text-secondary'>Text Secondary</P>
11      <br />
12      <P tw='text-tertiary'>Text Tertiary</P>
13    </Window>
14  </Container>
15</Section>

The code above produces the following HTML block. Press the Sun/Moon icon on the left sidebar to see the effect. (Note that the whole page will change as well)

Doing it by hand

It is useful to know how to achieve the same "by hand". The following code would produce the same effect:

1import { P } from '@hummingbot/hbui/elements/typography' // use HBUI's "P" to enable responsive type
2import tw  from 'twin.macro' // required for the tw property to work
3
4// the body element
5<div tw='bg-body p-8'>
6  // the window element
7  <div tw='bg-window border-window border w-[50%] p-8 my-10 mx-auto'>
8    <P tw='text-primary'>Text Primary</P>
9    <br />
10    <P tw='text-secondary'>Text Secondary</P>
11    <br />
12    <P tw='text-tertiary'>Text Tertiary</P>
13  </div>
14</div>

Result is the same:

(Press the Sun/Moon icon on the left sidebar to test)

Understanding the classes in use:

The class bg-body tells the element to assume the current scheme's background color.

The class bg-window tells the element to assume the current scheme's window color.

The class bg-border tells the element to assume the current scheme's background-specific border color.

The class window-border tells the element to assume the current scheme's window-specific border color.

The class text-primary tells the element to assume the current scheme's primary text color.

The class text-secondary tells the element to assume the current scheme's secondary text color.

The class text-tertiary tells the element to assume the current scheme's tertiary text color.

Different colors per scheme

It is also possible to achieve different colors per color scheme. See the example below:

Text

This text will be magenta on light mode, and blue on dark mode.

1import { P } from '@hummingbot/hbui/elements/typography'
2import tw  from 'twin.macro'
3
4<P tw='text-magenta dark:text-blue'>This text will be magenta on light mode, and blue on dark mode.</P>

Background

Make a square magenta on light mode, and blue on dark mode:

1import tw  from 'twin.macro'
2
3<div tw='bg-magenta dark:bg-blue h-28 w-28'/>

Custom colors per scheme

It is also possible to achieve completely custom colors per color scheme. See the example below:

Text

This text will be red on light mode, and green on dark mode.

1import { P } from '@hummingbot/hbui/elements/typography'
2import tw  from 'twin.macro'
3
4<P tw='text-[#ff0000] dark:text-[#00ff00]'>This text will be red on light mode, and gren on dark mode.</P>

Background

Make a square red on light mode, and green on dark mode:

1import tw  from 'twin.macro'
2
3<div tw='bg-[#ff0000] dark:bg-[#00ff00] h-28 w-28'/>