The Tempo Platform 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 TPDS'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 '@tempoplatform/tpds/elements/layout'
2import { P } from '@tempoplatform/tpds/elements/typography'
3
4<Section> // the "body" element
5  <Container>
6    <Window> // the window element
7      <P className='text-primary'>Text Primary</P>
8      <br />
9      <P className='text-secondary'>Text Secondary</P>
10      <br />
11      <P className='text-tertiary'>Text Tertiary</P>
12    </Window>
13  </Container>
14</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 '@tempoplatform/tpds/elements/typography' // use TPDS's "P" to enable responsive type
2
3// the body element
4<div className='bg-body p-8'>
5  // the window element
6  <div className='bg-window border-window border w-[50%] p-8 my-10 mx-auto'>
7    <P className='text-primary'>Text Primary</P>
8    <br />
9    <P className='text-secondary'>Text Secondary</P>
10    <br />
11    <P className='text-tertiary'>Text Tertiary</P>
12  </div>
13</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 '@tempoplatform/tpds/elements/typography'
2
3<P className='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:

1<div className='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 '@tempoplatform/tpds/elements/typography'
2
3<P className='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:

1<div className='bg-[#ff0000] dark:bg-[#00ff00] h-28 w-28'/>