Skip to content

Instantly share code, notes, and snippets.

/colors-dark.css Secret

Created January 15, 2018 12:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/89425281c7fa5845763d3b8254cbe6cf to your computer and use it in GitHub Desktop.
Save anonymous/89425281c7fa5845763d3b8254cbe6cf to your computer and use it in GitHub Desktop.
/*
* Darker theme
*/
:root {
/* Main colors */
--background_color: #1d242f;
--page_background_color: #141a24;
--foreground_color: #e0e0e0;
--base_color: #546c99;
--primary_light_color: #1a4c6b;
--success_light_color: #144714;
--danger_light_color: #66211f;
--warning_light_color: #7d4825;
--meta_color: #191f2a;
--header_color: #284371;
--header_field_color: #1c3252;
--header_secondary_color: #1d2b44;
--header_admin_color: #3b1d1d;
--block_header_color: #2e3a52;
--block_header_link_text_color: #4f95db;
--block_header_light_color: #252d3c;
--block_header_light_link_text_color: #6198c2;
--border_color: #2d3649;
--media_box_color: #3d4657;
--link_color: #478acc;
--link_hover_color: #b099dd;
--fave_color: #a18e27;
--vote_up_color: #5b9b26;
--vote_down_color: #da3412;
--hide_color: #da3412;
--assistant_color: #511b4e;
--tag_normal_color: #4aa158;
--tag_category_rating_color: #418dd9;
--tag_category_spoiler_color: #d49b39;
--tag_category_origin_color: #6f66d6;
--tag_category_oc_color: #b157b7;
--tag_category_error_color: #d45460;
--tag_category_character_color: #4aaabf;
--tag_category_episode_color: #b9b541;
--commission_category_color: #e07b27;
--site_notice_color: #07070a;
/* Derived colors */
}
/*
* Default theme - the same colors they've been for years
*/
:root {
/* Main colors */
--background-color: #ffffff;
--page-background-color: #f8fafc;
--foreground-color: #333333;
--base-color: #62a7d9;
--primary-color: #c1e4f9;
--success-color: #bde9a3; /* tag added, currently banned, view post history--added */
--danger-color: #ebc0bb; /* tag removed, currently not banned, view post history--deleted */
--warning-color: #eee9bc; /* image spoilered, things like that */
--link-color: #419cd9;
--link-hover-color: #9273d0;
--fave-color: #c4b246;
--vote-up-color: #67af2b;
--vote-down-color: #cf0001;
--hide-color: #cf0001;
--assistant-color: #eeceed;
--tag-normal-color: #6f8f0e;
--tag-category-rating-color: #267ead;
--tag-category-spoiler-color: #c24523;
--tag-category-origin-color: #393f85;
--tag-category-oc-color: #9852a3;
--tag-category-error-color: #ad263f;
--tag-category-character-color: #2d8677;
--tag-category-episode-color: #998e1a;
--commission-category-color: #986f3d;
--image-overlay-color: #ffffff;
--image-overlay-background-color: #000000;
/* Derived colors */
/* This is way, way too many unique colors ... */
--text-light-color: var(--background-color);
--meta-color: #f5f5f5; /* mix(--foreground-color, --background-color, 5%) */
--meta-border-color: #cecece; /* mix(--foreground-color, --meta-color, 20%) */
--header-color: #3d92d0; /* darken(--base-color, 9%) */
--header-hover-color: #2d80bc; /* darken(--base-color, 16%) */
--header-field-color: var(--base-color);
--header-field-hover-color: #4597d2; /* darken(--base-color, 7%) */
--header-secondary-color: #e2ebf2; /* desaturate(lighten(--base-color, 30%), 25%) */
--header-secondary-hover-color: #cadae6; /* darken(--header-secondary-color, 7%) */
--header-admin-color: #f7d6d6; /* mix(--vote-down-color, --background-color, 16%) */
--header-admin-hover-color: #f1b3b3; /* mix(--vote-down-color, --background-color, 30%) */
--block-header-color: #d5e7f5; /* lighten(--base-color, 28%) */
--block-header-hover-color: #b6d5eb; /* desaturate(lighten(--base-color, 20%), 5%); */
--block-header-link-text-color: #2887cb; /* saturate(darken(--header-color, 5%), 6%) */
--block-header-link-text-hover-color: #266a9b; /* darken(--header-color, 15%) */
--block-header-light-color: #e4eef5; /* desaturate(lighten(--base-color, 31%), 16%) */
--block-header-light-hover-color: #d1dfe9; /* lighten(--header-secondary-hover-color, 2%) */
--block-header-light-link-text-color: #498aba; /* darken(--block-header-light-color, 42%) */
--block-header-light-link-text-hover-color: #396f97; /* darken(--block-header-light-color, 52%) */
--border-color: #d9e7f1; /* darken(--block-header-light-color, 3%); */
--media-box-color: #e6eef3; /* desaturate(--block-header-light-color, 10%) */
--media-box-hover-color: #cfdfeb; /* saturate(darken(--media-box-color, 6%), 6%) */
--media-box-header-link-text-color: var(--link-color);
--media-box-header-link-text-hover-color: #2783c1; /* darken(--media-box-header-link-text-color, 10%) */
--primary-light-color: #d8eefb; /* lighten(--primary-color, 5%) */
--success-light-color: #d2f0c0; /* lighten(--success-color, 7%) */
--danger-light-color: #f0cfcb; /* lighten(--danger-color, 4%) */
--warning-light-color: #f4f1d4; /* lighten(--warning-color, 6%) */
--link-dark-color: #1e6696; /* darken(--link-color, 20%) */
/* why do these even exist? */
--image-show-link-color: var(--link-color);
--image-show-link-hover-color: var(--link-hover-color);
/* In default theme, except odd color to be darker! */
/* also used as 'alt background color' in various places */
--background-odd-color: #f2f8fc; /* lighten(--base-color, 35%) */
--background-even-color: var(--background-color);
/* Depending on the theme, you may want to swap even and odd colors */
--success-odd-color: #c8f1b0; /* saturate(darken(--success-light-color, 3%), 8%) */
--success-even-color: #e3f6d9; /* lighten(--success-color, 13%) */
--warning-odd-color: #f1ebb3; /* saturate(darken(--warning-light-color, 7%), 10%) */
--warning-even-color: #f3f0d0; /* lighten(--warning-color, 5%) */
--danger-odd-color: #f3c8c2; /* saturate(darken(--danger-light-color, 1%), 12%) */
--danger-even-color: #f0dcd9; /* desaturate(lighten(--danger-color, 7%), 10%) */
/* used for weird h's (on image pages like Metadata Editing and Information)
* and also footer text color */
--foreground-half-color: #999999; /* mix(--foreground-color, --background-color) */
--sparkline-color: #77b3de; /* lighten(--base-color, 5%) */
--assistant-border-color: #e3b0e2; /* darken(--assistant-color, 8%) */
--admin-links-color: #f7d4d4; /* mix(--vote-down-color, --background-color, 17%) */
--admin-links-hover-color: #e88585; /* mix(--vote-down-color, --background-color, 48%) */
--input-text-color: var(--foreground-color);
--input-color: var(--meta-color);
--input-border: var(--meta-border-color);
--input-color-active: #e1ecf3; /* desaturate(lighten(--base-color, 30%), 16%) */
--input-border-active: #8bbee3; /* lighten(--base-color, 10%) */
--tag-normal-background: #d0e29c; /* desaturate(lighten(--tag-normal-color, 44%), 28%) */
--tag-normal-border: #b3cf5d; /* darken(--tag-normal-background, 16%) */
--tag-category-rating-background: #c1d7e4; /* desaturate(lighten(--tag-category-rating-color, 41%), 25%) */
--tag-category-rating-border: #9dc1d4; /* darken(--tag-category-rating-background, 10%) */
--tag-category-spoiler-background: #f4cdc2; /* lighten(--tag-category-spoiler-color, 41%) */
--tag-category-spoiler-border: #eeb0a0; /* darken(--tag-category-spoiler-background, 8%) */
--tag-category-origin-background: #b9bce1; /* lighten(--tag-category-origin-color, 43%) */
--tag-category-origin-border: #959ad1; /* darken(--tag-category-origin-background, 10%) */
--tag-category-oc-background: #dec5e2; /* lighten(--tag-category-oc-color, 35%) */
--tag-category-oc-border: #cda7d3; /* darken(--tag-category-oc-background, 9%) */
--tag-category-error-background: #eeb1bc; /* lighten(--tag-category-error-color, 40%) */
--tag-category-error-border: #e790a0; /* darken(--tag-category-error-background, 8%) */
--tag-category-character-background: #b5dfd8; /* desaturate(lighten(--tag-category-character-color, 44%), 10%) */
--tag-category-character-border: #5bc8b6; /* lighten(--tag-category-character-color, 22%) */
--tag-category-episode-background: #ede697; /* lighten(--tag-category-episode-color, 41%) */
--tag-category-episode-border: #dcce33; /* lighten(--tag-category-episode-color, 18%) */
--commission-category-background: #ead3b7; /* saturate(lighten(--commission-category-color, 40%), 12%) */
--commission-category-border: #986f3d; /* lighten(--commission-category-color, 20%) */
--site-notice-color: #1e537a; /* darken(--base-color, 32%) */
--site-notice-link-color: var(--block-header-light-color);
--site-notice-link-hover-color: var(--block-header-hover-color);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment