Color: Dark Mode

<h2>Primary Colors</h2>
<div class="swatch-container">
    <div class="swatch js-copy" data-copy="#b794d1">
        <div class="color" style="background-color: var( --purple-200);"></div>
        <span>#b794d1</span>
    </div>
    <div class="swatch js-copy" data-copy="#FEC10D">
        <div class="color" style="background-color: var(--yellow-300-brand);"></div>
        <span>#FEC10D</span>
    </div>
</div>
<h2>Secondary Colors</h2>
<div class="swatch-container">
    <div class="swatch js-copy" data-copy="#8246AF">
        <div class="color" style="background-color:var(--purple-400-brand);"></div>
        <span>#8246AF</span>
    </div>
    <div class="swatch js-copy" data-copy="#FF9800">
        <div class="color" style="background-color:var(--orange-600-brand);"></div>
        <span>#FF9800</span>
    </div>
    <div class="swatch js-copy" data-copy="#84BD00">
        <div class="color" style="background-color:var(--green-500-brand);"></div>
        <span>#84BD00</span>
    </div>
    <div class="swatch js-copy" data-copy="#2E85BE">
        <div class="color" style="background-color:var(--blue-500);"></div>
        <span>#2E85BE</span>
    </div>
</div>
<h2>Other Dark Mode Colors</h2>
<div class="swatch-container">
    <div class="swatch js-copy" data-copy="#f0f1f4">
        <div class="color" style="background-color:var(--gray-100);"></div>
        <span>#f0f1f4 <br><small>Text</small></span>
    </div>
    <div class="swatch js-copy" data-copy="#1a1221">
        <div class="color" style="background-color:#1a1221;border: 1px solid var(--gray-700);"></div>
        <span>#1a1221 <br><small>Background</small></span>
    </div>
</div>