Skip to content

Instantly share code, notes, and snippets.

@Merovex

Merovex/color-scheme-blue.css

Created July 25, 2024 09:33
Show Gist options
  • Save Merovex/88abb9b736df54bfe02ed3a2f5110601 to your computer and use it in GitHub Desktop.
Save Merovex/88abb9b736df54bfe02ed3a2f5110601 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
color-scheme-blue.css
[data-color='blue'][data-color-scheme='light'] {
--primary: #445E91;
--surface-tint: #445E91;
--on-primary: #FFFFFF;
--primary-container: #D8E2FF;
--on-primary-container: #001A42;
--secondary: #575E71;
--on-secondary: #FFFFFF;
--secondary-container: #DBE2F9;
--on-secondary-container: #141B2C;
--tertiary: #715573;
--on-tertiary: #FFFFFF;
--tertiary-container: #FCD7FB;
--on-tertiary-container: #29132D;
--error: #BA1A1A;
--on-error: #FFFFFF;
--error-container: #FFDAD6;
--on-error-container: #410002;
--background: #F9F9FF;
--on-background: #1A1B20;
--surface: #f9fafb;
--on-surface: #111827;
--surface-variant: #e5e7eb;
--on-surface-variant: #44474F;
--outline: #75777F;
--outline-variant: #C4C6D0;
--shadow: #000000;
--scrim: #000000;
--inverse-surface: #2F3036;
--inverse-on-surface: #F0F0F7;
--inverse-primary: #ADC6FF;
--primary-fixed: #D8E2FF;
--on-primary-fixed: #001A42;
--primary-fixed-dim: #ADC6FF;
--on-primary-fixed-variant: #2B4678;
--secondary-fixed: #DBE2F9;
--on-secondary-fixed: #141B2C;
--secondary-fixed-dim: #BFC6DC;
--on-secondary-fixed-variant: #3F4759;
--tertiary-fixed: #FCD7FB;
--on-tertiary-fixed: #29132D;
--tertiary-fixed-dim: #DEBCDF;
--on-tertiary-fixed-variant: #583E5B;
--surface-dim: #f3f4f6;
--surface-bright: #f9fafb;
--surface-container-lowest: #ffffff;
--surface-container-low: #f9fafb;
--surface-container: #f3f4f6;
--surface-container-high: #f3f4f6;
--surface-container-highest: #e5e7eb;
}
[data-color='blue'][data-color-scheme='dark'] {
--primary: #ADC6FF;
--surface-tint: #ADC6FF;
--on-primary: #112F60;
--primary-container: #2B4678;
--on-primary-container: #D8E2FF;
--secondary: #BFC6DC;
--on-secondary: #293041;
--secondary-container: #3F4759;
--on-secondary-container: #DBE2F9;
--tertiary: #DEBCDF;
--on-tertiary: #402843;
--tertiary-container: #583E5B;
--on-tertiary-container: #FCD7FB;
--error: #FFB4AB;
--on-error: #690005;
--error-container: #93000A;
--on-error-container: #FFDAD6;
--background: #111318;
--on-background: #E2E2E9;
--surface: #111318;
--on-surface: #E2E2E9;
--surface-variant: #44474F;
--on-surface-variant: #C4C6D0;
--outline: #8E9099;
--outline-variant: #44474F;
--shadow: #000000;
--scrim: #000000;
--inverse-surface: #E2E2E9;
--inverse-on-surface: #2F3036;
--inverse-primary: #445E91;
--primary-fixed: #D8E2FF;
--on-primary-fixed: #001A42;
--primary-fixed-dim: #ADC6FF;
--on-primary-fixed-variant: #2B4678;
--secondary-fixed: #DBE2F9;
--on-secondary-fixed: #141B2C;
--secondary-fixed-dim: #BFC6DC;
--on-secondary-fixed-variant: #3F4759;
--tertiary-fixed: #FCD7FB;
--on-tertiary-fixed: #29132D;
--tertiary-fixed-dim: #DEBCDF;
--on-tertiary-fixed-variant: #583E5B;
--surface-dim: #111318;
--surface-bright: #37393E;
--surface-container-lowest: #0C0E13;
--surface-container-low: #1A1B20;
--surface-container: #1E1F25;
--surface-container-high: #282A2F;
--surface-container-highest: #33353A;
}
@media (prefers-contrast: more) {
[data-color='blue'][data-color-scheme='light'] {
--primary: #00204E;
--surface-tint: #445E91;
--on-primary: #FFFFFF;
--primary-container: #274274;
--on-primary-container: #FFFFFF;
--secondary: #1A2233;
--on-secondary: #FFFFFF;
--secondary-container: #3B4355;
--on-secondary-container: #FFFFFF;
--tertiary: #311934;
--on-tertiary: #FFFFFF;
--tertiary-container: #543A56;
--on-tertiary-container: #FFFFFF;
--error: #4E0002;
--on-error: #FFFFFF;
--error-container: #8C0009;
--on-error-container: #FFFFFF;
--background: #F9F9FF;
--on-background: #1A1B20;
--surface: #f9fafb;
--on-surface: #111827;
--surface-variant: #e5e7eb;
--on-surface-variant: #21242B;
--outline: #40434B;
--outline-variant: #40434B;
--shadow: #000000;
--scrim: #000000;
--inverse-surface: #2F3036;
--inverse-on-surface: #FFFFFF;
--inverse-primary: #E6ECFF;
--primary-fixed: #274274;
--on-primary-fixed: #FFFFFF;
--primary-fixed-dim: #0B2B5C;
--on-primary-fixed-variant: #FFFFFF;
--secondary-fixed: #3B4355;
--on-secondary-fixed: #FFFFFF;
--secondary-fixed-dim: #252D3E;
--on-secondary-fixed-variant: #FFFFFF;
--tertiary-fixed: #543A56;
--on-tertiary-fixed: #FFFFFF;
--tertiary-fixed-dim: #3C243F;
--on-tertiary-fixed-variant: #FFFFFF;
--surface-dim: #f3f4f6;
--surface-bright: #f9fafb;
--surface-container-lowest: #ffffff;
--surface-container-low: #f9fafb;
--surface-container: #f3f4f6;
--surface-container-high: #f3f4f6;
--surface-container-highest: #e5e7eb;
}
}
@media (prefers-contrast: more) {
[data-color='blue'][data-color-scheme='dark'] {
--primary: #FBFAFF;
--surface-tint: #ADC6FF;
--on-primary: #000000;
--primary-container: #B4CBFF;
--on-primary-container: #000000;
--secondary: #FBFAFF;
--on-secondary: #000000;
--secondary-container: #C3CAE1;
--on-secondary-container: #000000;
--tertiary: #FFF9FA;
--on-tertiary: #000000;
--tertiary-container: #E3C0E3;
--on-tertiary-container: #000000;
--error: #FFF9F9;
--on-error: #000000;
--error-container: #FFBAB1;
--on-error-container: #000000;
--background: #111318;
--on-background: #E2E2E9;
--surface: #111318;
--on-surface: #FFFFFF;
--surface-variant: #44474F;
--on-surface-variant: #FBFAFF;
--outline: #C9CAD4;
--outline-variant: #C9CAD4;
--shadow: #000000;
--scrim: #000000;
--inverse-surface: #E2E2E9;
--inverse-on-surface: #000000;
--inverse-primary: #072859;
--primary-fixed: #DEE6FF;
--on-primary-fixed: #000000;
--primary-fixed-dim: #B4CBFF;
--on-primary-fixed-variant: #001538;
--secondary-fixed: #DFE6FD;
--on-secondary-fixed: #000000;
--secondary-fixed-dim: #C3CAE1;
--on-secondary-fixed-variant: #0E1626;
--tertiary-fixed: #FFDCFF;
--on-tertiary-fixed: #000000;
--tertiary-fixed-dim: #E3C0E3;
--on-tertiary-fixed-variant: #240D27;
--surface-dim: #111318;
--surface-bright: #37393E;
--surface-container-lowest: #0C0E13;
--surface-container-low: #1A1B20;
--surface-container: #1E1F25;
--surface-container-high: #282A2F;
--surface-container-highest: #33353A;
}
}
@media (prefers-contrast: less) {
[data-color='blue'][data-color-scheme='light'] {
--primary: #274274;
--surface-tint: #445E91;
--on-primary: #FFFFFF;
--primary-container: #5B74A9;
--on-primary-container: #FFFFFF;
--secondary: #3B4355;
--on-secondary: #FFFFFF;
--secondary-container: #6D7488;
--on-secondary-container: #FFFFFF;
--tertiary: #543A56;
--on-tertiary: #FFFFFF;
--tertiary-container: #886B8A;
--on-tertiary-container: #FFFFFF;
--error: #8C0009;
--on-error: #FFFFFF;
--error-container: #DA342E;
--on-error-container: #FFFFFF;
--background: #F9F9FF;
--on-background: #1A1B20;
--surface: #f9fafb;
--on-surface: #111827;
--surface-variant: #e5e7eb;
--on-surface-variant: #40434B;
--outline: #5C5F67;
--outline-variant: #787A83;
--shadow: #000000;
--scrim: #000000;
--inverse-surface: #2F3036;
--inverse-on-surface: #F0F0F7;
--inverse-primary: #ADC6FF;
--primary-fixed: #5B74A9;
--on-primary-fixed: #FFFFFF;
--primary-fixed-dim: #425B8F;
--on-primary-fixed-variant: #FFFFFF;
--secondary-fixed: #6D7488;
--on-secondary-fixed: #FFFFFF;
--secondary-fixed-dim: #545C6F;
--on-secondary-fixed-variant: #FFFFFF;
--tertiary-fixed: #886B8A;
--on-tertiary-fixed: #FFFFFF;
--tertiary-fixed-dim: #6F5371;
--on-tertiary-fixed-variant: #FFFFFF;
--surface-dim: #f3f4f6;
--surface-bright: #f9fafb;
--surface-container-lowest: #ffffff;
--surface-container-low: #f9fafb;
--surface-container: #f3f4f6;
--surface-container-high: #f3f4f6;
--surface-container-highest: #e5e7eb;
}
}
@media (prefers-contrast: less) {
[data-color='blue'][data-color-scheme='dark'] {
--primary: #B4CBFF;
--surface-tint: #ADC6FF;
--on-primary: #001538;
--primary-container: #7790C7;
--on-primary-container: #000000;
--secondary: #C3CAE1;
--on-secondary: #0E1626;
--secondary-container: #8990A5;
--on-secondary-container: #000000;
--tertiary: #E3C0E3;
--on-tertiary: #240D27;
--tertiary-container: #A687A7;
--on-tertiary-container: #000000;
--error: #FFBAB1;
--on-error: #370001;
--error-container: #FF5449;
--on-error-container: #000000;
--background: #111318;
--on-background: #E2E2E9;
--surface: #111318;
--on-surface: #FBFAFF;
--surface-variant: #44474F;
--on-surface-variant: #C9CAD4;
--outline: #A1A2AC;
--outline-variant: #81838C;
--shadow: #000000;
--scrim: #000000;
--inverse-surface: #E2E2E9;
--inverse-on-surface: #282A2F;
--inverse-primary: #2D4779;
--primary-fixed: #D8E2FF;
--on-primary-fixed: #00102E;
--primary-fixed-dim: #ADC6FF;
--on-primary-fixed-variant: #183566;
--secondary-fixed: #DBE2F9;
--on-secondary-fixed: #091121;
--secondary-fixed-dim: #BFC6DC;
--on-secondary-fixed-variant: #2E3647;
--tertiary-fixed: #FCD7FB;
--on-tertiary-fixed: #1E0822;
--tertiary-fixed-dim: #DEBCDF;
--on-tertiary-fixed-variant: #462D49;
--surface-dim: #111318;
--surface-bright: #37393E;
--surface-container-lowest: #0C0E13;
--surface-container-low: #1A1B20;
--surface-container: #1E1F25;
--surface-container-high: #282A2F;
--surface-container-highest: #33353A;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment