vikunja-frontend/src/styles/custom-properties/colors.scss

// Vikunja colors as CSS custom properties

:root {
  // Vikunja specific variables
  --grey-50: hsl(210, 20%, 98%);
  --grey-100: hsl(220, 14.3%, 95.9%);
  --grey-200: hsl(220, 13%, 91%);
  --grey-300: hsl(216, 12.2%, 83.9%);
  --grey-400: hsl(217.9, 10.6%, 64.9%);
  --grey-500-hsl: 220, 8.9%, 46.1%;
  --grey-500: hsl(var(--grey-500-hsl));
  --grey-600: hsl(215, 13.8%, 34.1%);
  --grey-700: hsl(216.9, 19.1%, 26.7%);
  --grey-800: hsl(215, 27.9%, 16.9%);
  --grey-900: hsl(220.9, 39.3%, 11%);
  --site-background: var(--grey-100);
  --scheme-main: var(--white);

  // Overrides of Bulma defaults
  --grey-darker: var(--grey-700);
  --grey-dark:  var(--grey-800);
  --grey:  var(--grey-500);
  --grey-light:  var(--grey-300);
  --grey-lighter:  var(--grey-200);
  --grey-lightest: var(--grey-100);
  --input-border-color: var(--grey-200);

  --white-h: 0deg;
  --white-s: 0%;
  --white-l: 100%;
  --white-a: 1;
  --white: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
  --white-translucent: hsla(var(--white-h), var(--white-s), var(--white-l), 0.75);

  --black-h: 0deg;
  --black-s: 0%;
  --black-l: 4%;
  --black-a: 1;
  --black: hsla(var(--black-h), var(--black-s), var(--black-l), var(--black-a));

  // $warning / $orange: #ff851b
  --warning-h: 27.9deg;
  --warning-s: 100%;
  --warning-l: 55.3%;
  --warning-a: 1;
  --warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));

	// $success / $green is #00db60
  --success-h: 146.3deg;
  --success-s: 100%;
  --success-l: 42.9%;
  --success-a: 1;
  --success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a));

	// $danger / $red is #ff4136
  --danger-h: 3.3deg;
  --danger-s: 100%;
  --danger-l: 60.6%;
  --danger-a: 1;
  --danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));

	// var(--primary) / $blue is #1973ff
  --primary-h: 216.5deg;
  --primary-s: 100%;
  --primary-l: 54.9%;
  --primary-a: 1;
  --primary-hsl: var(--primary-h), var(--primary-s), var(--primary-l);
  --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
  // END Overrides of Bulma defaults


  // Define custom color variable to prevent change in dark mode
  --switch-view-color: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));

  // Define custom color variable to alow change in dark mode
  --card-border-color: var(--grey-200);
  --logo-text-color: hsl(180, 1%, 15%);

  --link: var(--primary);
  --link-hover: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .75);
  --border: var(--grey-200);

  &.dark {
    // Light mode colours reversed for dark mode
    --grey-900-hsl: 210, 20%, 98%;
    --grey-900: hsl(var(--grey-900-hsl));
    --grey-800: hsl(220, 14.3%, 95.9%);
    --grey-700: hsl(220, 13%, 91%);
    --grey-600: hsl(216, 12.2%, 83.9%);
    --grey-500-hsl: 217.9, 10.6%, 64.9%;
    --grey-500: hsl(var(--grey-500-hsl));
    --grey-400: hsl(220, 8.9%, 46.1%);
    --grey-300: hsl(215, 13.8%, 34.1%);
    --grey-200: hsl(216.9, 19.1%, 26.7%);
    --grey-100-hsl: 215, 27.9%, 16.9%;
    --grey-100: hsl(var(--grey-100-hsl));
    --grey-50-hsl: 220.9, 39.3%, 11%;
    --grey-50: hsl(var(--grey-50-hsl));

    // Dark grey looks better than black
    --white: var(--grey-50);
    --black-l: 100%;

    // Text renders better in grey than black
    --text: var(--grey-800);
    --text-invert: #000;
    --text-light: var(--grey-300);
    --text-strong: var(--grey-900);

    // Elements that rely on Bulma defaults in light mode but
    // need to be overriden in dark mode
    --input-placeholder-color: hsla(var(--grey-900-hsl), 0.6);
    --tag-color: var(--grey-50);
    --table-row-hover-background-color: var(--grey-100);
    --dropdown-item-hover-background-color: var(--grey-100);
    --dropdown-item-hover-color: var(--text);
    --button-text-hover-background-color: var(--grey-200);
    --button-hover-color: var(--grey-600);

    // Custom color variables we need to override
    --card-border-color: hsla(var(--grey-100-hsl), 0.3);
    --logo-text-color: var(--grey-700);
  }
}