testing colors

Benchmark created on January 16, 2025

Preparation HTML

<style>
:root.light {
    --main-bg-color: #f9fafb;
    --main-text-color: #2e2e2e;
    --accent-color: #959afa;
    --accent-color-lighter: #646cff60;
    --accent-color-error: #ef4444;
    --accent-color-success: #10b981;
    --accent-color-error-lighter: #ef444470;

    --accent-bg-color: #e5e7eb;
    --accent-bg-color-lighter: #9ca3af30;
    --accent-sm-contrast: #f2f2f2;
    --accent-med-contrast: #8b8b8b;
    --accent-lg-contrast: #151515;
    --card-bg-color: #8b8b8b40;

    svg {
        fill: var(--accent-lg-contrast);
    }
}

:root.dark {
    --main-bg-color: #121212;
    --main-text-color: #fafafa;
    --accent-color: #646cff;
    --accent-color-lighter: #646cff50;
    --accent-color-error: #ef4444;
    --accent-color-success: #10b981;
    --accent-color-error-lighter: #ef444470;

    --accent-bg-color: #374151;
    --accent-bg-color-lighter: #2e333a;
    --accent-sm-contrast: #4b5563;
    --accent-med-contrast: #9ca3af;
    --accent-lg-contrast: #d1d5db;
    --card-bg-color: #4b556375;

}


$main-bg-color: var(--main-bg-color, #121212);
$main-text-color: var(--main-text-color, #fafafa);
$accent-color: var(--accent-color, #646cff);
$accent-color-lighter: var(--accent-color-lighter, #646cff50);
$accent-color-error: var(--accent-color-error, #ef4444);
$accent-color-success: var(--accent-color-success, #10b981);
$accent-color-error-lighter: var(--accent-color-error-lighter, #ef444470);

$accent-bg-color: var(--accent-bg-color, #374151);
$accent-bg-color-lighter: var(--accent-bg-color-lighter, #2e333a);
$accent-sm-contrast: var(--accent-sm-contrast, #4b5563);
$accent-med-contrast: var(--accent-med-contrast, #9ca3af);
$accent-lg-contrast: var(--accent-lg-contrast, #d1d5db);
$card-bg-color: var(--card-bg-color, #4b556375);
</style>

Test runner

console.log('hi')

console.log('hi')

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published on January 16, 2025