Color Mode

We have two color modes that can be used in your Digital Church website. Light and Dark. Light mode is the default color mode, meant to work primarily with lighter backgrounds. Dark mode is an inverse color mode, meant to work primarily with darker backgrounds.

Light Mode

Using the .light class, you can force a container to use light mode, even if the rest of the site or the user's device is set to dark mode. Here's the code that controls light mode:

.light {
    --base-50: var(--slate-50);
    --base-100: var(--slate-100);
    --base-200: var(--slate-200);
    --base-300: var(--slate-300);
    --base-400: var(--slate-400);
    --base-500: var(--slate-500);
    --base-600: var(--slate-600);
    --base-700: var(--slate-700);
    --base-800: var(--slate-800);
    --base-900: var(--slate-900);
    --base-950: var(--slate-950);
    --brand-300: hsla(235, 100%, 83%, 1.000);
    --brand-400: hsla(235, 100%, 73%, 1.000);
    --brand-500: hsla(235, 100%, 63%, 1.000);
    --brand-600: hsla(235, 100%, 53%, 1.000);
    --brand-700: hsla(235, 100%, 43%, 1.000);
    --primary-400: hsla(317, 93%, 62%, 1.000);
    --primary-500: hsla(317, 93%, 62%, 1.000);
    --primary-600: hsla(317, 93%, 62%, 1.000);
    --action-secondary-400: ;
    --action-secondary-500: ;
    --action-secondary-600: ;
    --success-400: hsla(142, 70%, 55%, 1.000);
    --success-500: hsla(142, 70%, 45%, 1.000);
    --success-600: hsla(142, 70%, 35%, 1.000);
    --warning-400: hsla(46, 97%, 64%, 1.000);
    --warning-500: hsla(46, 97%, 54%, 1.000);
    --warning-600: hsla(46, 97%, 44%, 1.000);
    --danger-400: hsla(360, 84%, 70%, 1.000);
    --danger-500: hsla(360, 84%, 60%, 1.000);
    --danger-600: hsla(360, 84%, 50%, 1.000);
}

Dark Mode

Using the .dark class, you can force a container to use dark mode, even if the rest of the site or the user's device is set to light mode. Here's the code that controls dark mode:

.dark {
    --base-50: var(--slate-950);
    --base-100: var(--slate-900);
    --base-200: var(--slate-800);
    --base-300: var(--slate-700);
    --base-400: var(--slate-600);
    --base-500: var(--slate-500);
    --base-600: var(--slate-400);
    --base-700: var(--slate-300);
    --base-800: var(--slate-200);
    --base-900: var(--slate-100);
    --base-950: var(--slate-50);
    --brand-700: hsla(235, 100%, 83%, 1.000);
    --brand-600: hsla(235, 100%, 73%, 1.000);
    --brand-500: hsla(235, 100%, 63%, 1.000);
    --brand-400: hsla(235, 100%, 53%, 1.000);
    --brand-300: hsla(235, 100%, 43%, 1.000);
    --primary-400: hsla(317, 93%, 62%, 1.000);
    --primary-500: hsla(317, 93%, 62%, 1.000);
    --primary-600: hsla(317, 93%, 62%, 1.000);
    --action-secondary-400: ;
    --action-secondary-500: ;
    --action-secondary-600: ;
    --success-600: hsla(142, 70%, 55%, 1.000);
    --success-500: hsla(142, 70%, 45%, 1.000);
    --success-400: hsla(142, 70%, 35%, 1.000);
    --warning-600: hsla(46, 97%, 64%, 1.000);
    --warning-500: hsla(46, 97%, 54%, 1.000);
    --warning-400: hsla(46, 97%, 44%, 1.000);
    --danger-600: hsla(360, 84%, 70%, 1.000);
    --danger-500: hsla(360, 84%, 60%, 1.000);
    --danger-400: hsla(360, 84%, 50%, 1.000);
}