MediaWiki:Citizen.css

/* All CSS here will be loaded for users of the Citizen skin */

/* Global Variables */
/* TODO: We should define these in another file maybe 
   See: https://www.w3schools.com/css/css3_variables.asp
*/
:root {
    --color-brand-hero-cyan: #61d1fa40;
    --color-brand-hero-green: #59eb5c40;
    --color-brand-hero-orange: #e69e5040;
    --color-brand-hero-red: #ff767640;
    --color-information: var(--color-brand-hero-cyan);
    --color-suggestion: var(--color-brand-hero-green);
    --color-success: var(--color-brand-hero-green);
    --color-warning: var(--color-brand-hero-orange);
    --color-danger: var(--color-brand-hero-red);
}

/* Dark Mode Only*/
:root.skin-citizen-dark {
    /* Edited Colors to match Resonite Branding */
    /* Based on Resonite Neutrals*/
    /* Dark */
    --color-surface-0: #11151d;

    /* Neutrals: Mid */
    --color-surface-1: #2b2f35;

    /* Neutrals: Light (disabled for now Prime needs to talk to Chroma) */
    /*--color-surface-2: #e1e1e0;*/

   /* Based on resonite Mid Colors */

   /* Cyan Hero*/
   --color-primary: #61d1fa;

   /* Red Mid*/
   --color-destructive: #ae5458;

   /* Green Mid */
   --color-success: #3f9e44;

   /* Orange Mid */
   --color-warning: #a0a14e;

}
/* Invert the icons for the translate screen(they're black by default) */
.skin-citizen-dark .ext-translate-language-icon {
   filter: var(--filter-invert);
}
.skin-citizen-dark .ext-translate-language-selector-expand {
   filter: var(--filter-invert);
}

/* Slightly tweak the coloring of the edit buttons */
#ca-ve-edit > a {
  background-color: hsl(var(--color-primary__h),var(--color-primary__s),calc(var(--color-primary__l) * 1.2))
}
#ca-edit > a {
  background-color: hsl(var(--color-primary__h),var(--color-primary__s),calc(var(--color-primary__l) * 1.2))
}