Themes – DDI

Out of the box a light and a dark theme is supported.

Dark theme

Everything inside this data-ddi-theme="dark" block picks up the dark palette automatically.

Links should work both with normal `bg` background, and with alternative backgrounds

A boxed section

A .box is a padded container with a border.

An ordered list:

First item
Second item
Third item

An unordered list:

Volvo
SAAB
Opel

Volvo
Mercedes
Honda

<div data-ddi-theme="dark" class="bg p:m-l m:m-l flow gap:m-l">
    <div class="body-text p:0">
        <h2>Dark theme</h2>
        <p class="pane">
            Everything inside this <code>data-ddi-theme="dark"</code> block picks
            up the dark palette automatically.
        </p>
        <p>
            <a href="">Links</a> should work both with normal `bg` background, and
            with <span class="d:inline-block p:4xs bg:alt"
                ><a href="">alternative</a></span
            > backgrounds
        </p>
    </div>

    <div class="x-flow items:center">
        <button>Primary</button>
        <button class="secondary">Secondary</button>
        <button class="tertiary">Tertiary</button>
    </div>

    <div class="box flow">
        <div class="body-text">
            <h3>A boxed section</h3>
            <p>A <code>.box</code> is a padded container with a border.</p>
        </div>

        <div class="body-text">
            <p>An ordered list:</p>
            <ol>
                <li>First item</li>
                <li>Second item</li>
                <li>Third item</li>
            </ol>

            <p>An unordered list:</p>
            <ul>
                <li>Volvo</li>
                <li>SAAB</li>
                <li>Opel</li>
            </ul>
        </div>
    </div>

    <ul class="lined">
        <li>Volvo</li>
        <li>Mercedes</li>
        <li>Honda</li>
    </ul>

    <ul class="lined menu">
        <li>
            <a href="https://volvo.com">Volvo</a>
        </li>
        <li>
            <a href="https://mercedes.com">Mercedes</a>
        </li>
        <li>
            <a href="https://honda.com">Honda</a>
        </li>
    </ul>
</div>

Light theme

Everything inside this data-ddi-theme="light" block picks up the light palette automatically. The light theme is also the default so if there is no data-ddi-theme attribute at all, the theme will default to the light theme.

A boxed section

A .box is a padded container with a border.

An ordered list:

First item
Second item
Third item

An unordered list:

Volvo
SAAB
Opel

Volvo
Mercedes
Honda

<div data-ddi-theme="light" class="bg p:m-l m:m-l flow gap:m-l">
    <div class="body-text p:0">
        <h2>Light theme</h2>
        <p class="pane">
            Everything inside this <code>data-ddi-theme="light"</code> block picks
            up the light palette automatically. The light theme is also the default
            so if there is no data-ddi-theme attribute at all, the theme will default
            to the light theme.
        </p>
    </div>

    <div class="x-flow items:center">
        <button>Primary</button>
        <button class="secondary">Secondary</button>
        <button class="tertiary">Tertiary</button>
    </div>

    <div class="box flow">
        <div class="body-text">
            <h3>A boxed section</h3>
            <p>A <code>.box</code> is a padded container with a border.</p>
        </div>

        <div class="body-text">
            <p>An ordered list:</p>
            <ol>
                <li>First item</li>
                <li>Second item</li>
                <li>Third item</li>
            </ol>

            <p>An unordered list:</p>
            <ul>
                <li>Volvo</li>
                <li>SAAB</li>
                <li>Opel</li>
            </ul>
        </div>
    </div>

    <ul class="lined">
        <li>Volvo</li>
        <li>Mercedes</li>
        <li>Honda</li>
    </ul>

    <ul class="lined menu">
        <li>
            <a href="https://volvo.com">Volvo</a>
        </li>
        <li>
            <a href="https://mercedes.com">Mercedes</a>
        </li>
        <li>
            <a href="https://honda.com">Honda</a>
        </li>
    </ul>
</div>