metu.life/app/javascript/styles/mfc/0-palette.css

/*------------------------------------------------------------------------------
* DEFINE COLOR PALETTE
*
* Choose the CSS Variables that will be applied to recolor elements.
* The current format is to use hex codes, e.g. #00FF00.
*
* A future refactor to use rgb() instead may allow transparency mods
* via using these variables with rgba(). Hex codes currently do not
* work with rgba(), so no transparency mods are included except for
* those defined in absolute terms (i.e., non-variable colors).
* 
* Foreground Colors:
*            --bg: | Background for foreground elements.
*          --text: | A color that stands out against bg.
*      --textBold: | A color that stands out strongly against bg.
*     --textMuted: | A color that stands out slightly against bg.
*
* Background Colors:
*        --bgPage: | Background for non-foreground elements.
*      --textPage: | A color that stands out against bgPage.
*  --textPageBold: | A color that stands out strongly against bgPage.
* --textPageMuted: | A color that stands out slightly against bgPage.
*
* Highlights Colors:
*        --bgHead: | Background for column headers.
*      --textHead: | A color that stands out (strongly) against bgHead.
*        --accent: | An accent color for links and buttons.
*    --accentText: | A color that stands out (strongly) against accent.
*
* Palette advisories for choosing colors:
*   - Consider using an off-white or off-black for text tones,
*     but not necessary as long as there is sufficient contrast.
*   - Bold colors are highly recommended to be strong colors,
*     like pure white or pure black.
*   - Muted colors can be off-grey or any mid-tone with slight contrast.
*   - It might be best to base the background palette on a slightly
*     darker or lighter version of the foreground palette, but
*     this is no longer strictly necessary; you may use mixed palettes.
*     It is now possible to use a dark bgPage and light bg, or vice-versa.
------------------------------------------------------------------------------*/

/* copy and paste the desired palette at the end of this section,
* or you can delete the ones you don't want, or comment them out.
*/


/* Clean Slate:
* white columns on a light-grey page, with dark grey headers and blue accent.
*/
:root {
--bg: #fff;
--text: #123;
--textBold: #000;
--textMuted: #666;

--bgPage: #ddd;
--textPage: var(--text);
--textPageBold: var(--textBold);
--textPageMuted: var(--textMuted);

--bgHead: #333;
--textHead: #fff;
--accent: #09f;
--accentText: var(--textHead);
}

/* Droid/Flamingo:
* dark neutral-grey page, with either Android Green or Flamingo accent.
*/
:root {
--bg: #222;
--text: #ddd;
--textBold: #fff;
--textMuted: #777;

--bgPage: #111;
--textPage: var(--text);
--textPageBold: var(--textBold);
--textPageMuted: var(--textMuted);

--bgHead: #333;
--textHead: var(--textBold);
--accent: #a4c639;  /* flamingo: #f09 */
--accentText: var(--textHead);
}

/* Midnight Blue:
* a dark blue palette based loosely on Twitter's night mode.
*/
:root {
--bg: #123;
--text: #d0d8e0;
--textBold: #fff;
--textMuted: #808890;

--bgPage: #051119;
--textPage: var(--text);
--textPageBold: var(--textBold);
--textPageMuted: var(--textMuted);

--bgHead: #357;
--textHead: var(--textBold);
--accent: #09f;
--accentText: var(--textBold);
}

/*  
* Testing palette:
* light grey columns, slate grey background, turquoise headers, orange accents.
* (a bit garish, but sufficiently "different" to catch any unthemed elements.)
*/
:root {
--bg: #d9e1e8;
--text: #234;
--textBold: #000000;
--textMuted: #579;

--bgPage: #345;
--textPage: #ddd;
--textPageBold: #fff;
--textPageMuted: #aaa;

--bgHead: darkturquoise;
--textHead: #345;
--accent: #ff3e00;
--accentText: var(--textPageBold);
}