Light Dark Color scheme/palette

README.md

Basic Light and Dark color scheme/palette

These colors are based on the Atlasian's design system.

This can be paired with my other animated-outline.css Gist

vars.css

:root {
  color-scheme: dark light;

  /* This can be paired with the animated outline */
  --outline-color: var(--magenta-700);
  --outline: 0.125rem solid var(--outline-color);
}

@media (prefers-color-scheme: dark) or (prefers-color-scheme: no-preference) {
  :root {
    /* lime */
    --lime-100: #28311b;
    --lime-200: #37471f;
    --lime-300: #4c6b1f;
    --lime-400: #5b7f24;
    --lime-500: #6a9a23;
    --lime-600: #82b536;
    --lime-700: #94c748;
    --lime-800: #b3df72;
    --lime-900: #d3f1a7;
    --lime-1000: #efffd6;

    /* red */
    --red-100: #42221f;
    --red-200: #5d1f1a;
    --red-300: #ae2e24;
    --red-400: #c9372c;
    --red-500: #e2483d;
    --red-600: #f15b50;
    --red-700: #f87168;
    --red-800: #fd9891;
    --red-900: #ffd5d2;
    --red-1000: #ffeceb;

    /* orange */
    --orange-100: #38291e;
    --orange-200: #702e00;
    --orange-300: #a54800;
    --orange-400: #c25100;
    --orange-500: #e56910;
    --orange-600: #f38a3f;
    --orange-700: #fea362;
    --orange-800: #fec195;
    --orange-900: #fedec8;
    --orange-1000: #fff3eb;

    /* yellow */
    --yellow-100: #332e1b;
    --yellow-200: #533f04;
    --yellow-300: #7f5f01;
    --yellow-400: #946f00;
    --yellow-500: #b38600;
    --yellow-600: #cf9f02;
    --yellow-700: #e2b203;
    --yellow-800: #f5cd47;
    --yellow-900: #f8e6a0;
    --yellow-1000: #fff7d6;

    /* green */
    --green-100: #1c3329;
    --green-200: #164b35;
    --green-300: #216e4e;
    --green-400: #1f845a;
    --green-500: #22a06b;
    --green-600: #2abb7f;
    --green-700: #4bce97;
    --green-800: #7ee2b8;
    --green-900: #baf3db;
    --green-1000: #dcfff1;

    /* teal */
    --teal-100: #1e3137;
    --teal-200: #164555;
    --teal-300: #206a83;
    --teal-400: #227d9b;
    --teal-500: #2898bd;
    --teal-600: #42b2d7;
    --teal-700: #6cc3e0;
    --teal-800: #9dd9ee;
    --teal-900: #c6edfb;
    --teal-1000: #e7f9ff;

    /* blue */
    --blue-100: #1c2b41;
    --blue-200: #09326c;
    --blue-300: #0055cc;
    --blue-400: #0c66e4;
    --blue-500: #1d7afc;
    --blue-600: #388bff;
    --blue-700: #579dff;
    --blue-800: #85b8ff;
    --blue-900: #cce0ff;
    --blue-1000: #e9f2ff;

    /* purple */
    --purple-100: #2b273f;
    --purple-200: #352c63;
    --purple-300: #5e4db2;
    --purple-400: #6e5dc6;
    --purple-500: #8270db;
    --purple-600: #8f7ee7;
    --purple-700: #9f8fef;
    --purple-800: #b8acf6;
    --purple-900: #dfd8fd;
    --purple-1000: #f3f0ff;

    /* magenta */
    --magenta-100: #3d2232;
    --magenta-200: #50253f;
    --magenta-300: #943d73;
    --magenta-400: #ae4787;
    --magenta-500: #cd519d;
    --magenta-600: #da62ac;
    --magenta-700: #e774bb;
    --magenta-800: #f797d2;
    --magenta-900: #fdd0ec;
    --magenta-1000: #ffecf8;

    /* neutral */
    --neutral-100: #1d2125;
    --neutral-200: #22272b;
    --neutral-300: #2c333a;
    --neutral-400: #454f59;
    --neutral-500: #596773;
    --neutral-600: #738496;
    --neutral-700: #8c9bab;
    --neutral-800: #9fadbc;
    --neutral-900: #b6c2cf;
    --neutral-1000: #c7d1db;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    /* lime */
    --lime-100: #efffd6;
    --lime-200: #d3f1a7;
    --lime-300: #b3df72;
    --lime-400: #94c748;
    --lime-500: #82b536;
    --lime-600: #6a9a23;
    --lime-700: #5b7f24;
    --lime-800: #4c6b1f;
    --lime-900: #37471f;
    --lime-1000: #28311b;

    /* red */
    --red-100: #ffeceb;
    --red-200: #ffd5d2;
    --red-300: #fd9891;
    --red-400: #f87168;
    --red-500: #f15b50;
    --red-600: #e2483d;
    --red-700: #c9372c;
    --red-800: #ae2e24;
    --red-900: #5d1f1a;
    --red-1000: #42221f;

    /* orange */
    --orange-100: #fff3eb;
    --orange-200: #fedec8;
    --orange-300: #fec195;
    --orange-400: #fea362;
    --orange-500: #f38a3f;
    --orange-600: #e56910;
    --orange-700: #c25100;
    --orange-800: #a54800;
    --orange-900: #702e00;
    --orange-1000: #38291e;

    /* yellow */
    --yellow-100: #fff7d6;
    --yellow-200: #f8e6a0;
    --yellow-300: #f5cd47;
    --yellow-400: #e2b203;
    --yellow-500: #cf9f02;
    --yellow-600: #b38600;
    --yellow-700: #946f00;
    --yellow-800: #7f5f01;
    --yellow-900: #533f04;
    --yellow-1000: #332e1b;

    /* green */
    --green-100: #dcfff1;
    --green-200: #baf3db;
    --green-300: #7ee2b8;
    --green-400: #4bce97;
    --green-500: #2abb7f;
    --green-600: #22a06b;
    --green-700: #1f845a;
    --green-800: #216e4e;
    --green-900: #164b35;
    --green-1000: #1c3329;

    /* teal */
    --teal-100: #e7f9ff;
    --teal-200: #c6edfb;
    --teal-300: #9dd9ee;
    --teal-400: #6cc3e0;
    --teal-500: #42b2d7;
    --teal-600: #2898bd;
    --teal-700: #227d9b;
    --teal-800: #206a83;
    --teal-900: #164555;
    --teal-1000: #1e3137;

    /* blue */
    --blue-100: #e9f2ff;
    --blue-200: #cce0ff;
    --blue-300: #85b8ff;
    --blue-400: #579dff;
    --blue-500: #388bff;
    --blue-600: #1d7afc;
    --blue-700: #0c66e4;
    --blue-800: #0055cc;
    --blue-900: #09326c;
    --blue-1000: #1c2b41;

    /* purple */
    --purple-100: #f3f0ff;
    --purple-200: #dfd8fd;
    --purple-300: #b8acf6;
    --purple-400: #9f8fef;
    --purple-500: #8f7ee7;
    --purple-600: #8270db;
    --purple-700: #6e5dc6;
    --purple-800: #5e4db2;
    --purple-900: #352c63;
    --purple-1000: #2b273f;

    /* magenta */
    --magenta-100: #ffecf8;
    --magenta-200: #fdd0ec;
    --magenta-300: #f797d2;
    --magenta-400: #e774bb;
    --magenta-500: #da62ac;
    --magenta-600: #cd519d;
    --magenta-700: #ae4787;
    --magenta-800: #943d73;
    --magenta-900: #50253f;
    --magenta-1000: #3d2232;

    /* neutral */
    --neutral-100: #f7f8f9;
    --neutral-200: #f1f2f4;
    --neutral-300: #dcdfe4;
    --neutral-400: #b3b9c4;
    --neutral-500: #8590a2;
    --neutral-600: #758195;
    --neutral-700: #626f86;
    --neutral-800: #44546f;
    --neutral-900: #2c3e5d;
    --neutral-1000: #172b4d;
  }
}