docs-v2/assets/styles/themes/_theme-dark.scss

227 lines
6.1 KiB
SCSS

/*
DARK THEME
____________________________________________________________
Notes:
- This file is interchangeable with themes/theme-light.scss
- Only contains color variables
*/
// General Styles
// --------------------------------------------------
@import "tools/color-palette";
$body-bg: $grey5;
// TopNav Colors
$topnav-link: $g20-white;
$topnav-link-hover: $b-pool;
$default-dropdown-gradient: $grad-Miyazakisky;
$theme-switch-light: inline-block;
$theme-switch-dark: none;
// Search
$sidebar-search-bg: $grey15;
$sidebar-search-shadow: rgba($g0-obsidian, .5);
$sidebar-search-highlight: $b-pool;
$sidebar-search-text: $g20-white;
// Left Navigation
$nav-category: $b-pool;
$nav-category-hover: $g20-white;
$nav-item: $g15-platinum;
$nav-item-hover: $b-pool;
$nav-border: $grey25;
$nav-toggle: $g16-pearl;
$nav-toggle-hover: $g16-pearl;
$nav-toggle-bg-hover: $b-pool;
$nav-active: $br-chartreuse;
// Product Flags
$product-cloud: $b-pool;
$product-oss: $p-potassium;
$product-enterprise: $br-galaxy;
// Article Content
$article-bg: $grey10;
$article-heading: $g20-white;
$article-heading-alt: $g19-ghost;
$article-text: $g15-platinum;
$article-bold: $g19-ghost;
$article-link: $b-pool;
$article-link-hover: $g20-white;
$article-hr: $g5-pepper;
$article-shadow: $grey5;
// Article Code
$article-code: $cp-munchkin;
$article-code-bg: $grey5;
$article-code-shadow: $g0-obsidian;
$article-code-accent1: $g7-graphite;
$article-code-accent2: $b-pool;
$article-code-accent3: $gr-viridian;
$article-code-accent4: $r-ruby;
$article-code-accent5: #ff6db0;
$article-code-accent6: $b-pool;
$article-code-accent7: #e90;
$article-code-select: $b-pool;
$article-code-link: $b-pool;
$article-code-link-hover: $g20-white;
$article-code-scrollbar: $g3-castle;
// Article Tables
$article-table-header: $grad-GundamPilot;
$article-table-row-alt: $grey20;
$article-table-scrollbar: $g0-obsidian;
// Article Notes, Warnings, & Messages
$article-note-base: $gr-viridian;
$article-note-heading: $g20-white;
$article-note-text: $gr-honeydew;
$article-note-strong: $gr-krypton;
$article-note-link: $gr-wasabi;
$article-note-link-hover: $g20-white;
$article-note-table-header: $grad-green-dark;
$article-note-table-row-alt: #1a3c34;
$article-note-table-scrollbar: #162627;
$article-note-shadow: $g0-obsidian;
$article-note-code: $br-galaxy;
$article-note-code-bg: #040d0e;
$article-note-code-accent1: #567375;
$article-note-code-accent2: $b-pool;
$article-note-code-accent3: $gr-viridian;
$article-note-code-accent4: $r-ruby;
$article-note-code-accent5: #ff6db0;
$article-note-code-accent6: $b-pool;
$article-note-code-accent7: #e90;
$article-note-code-scrollbar: #162627;
$article-warn-base: $r-dreamsicle;
$article-warn-bg: #ff61851a;
$article-warn-heading: $g20-white;
$article-warn-text: $r-tungsten;
$article-warn-link: $r-marmelade;
$article-warn-link-hover: $g20-white;
$article-warn-table-header: $grad-red;
$article-warn-table-row-alt: #4a2a2a;
$article-warn-table-scrollbar: #1f181b;
$article-warn-shadow: #0d0610;
$article-warn-code: #ec6e6e;
$article-warn-code-bg: #0d0610;
$article-warn-code-accent1: #844c4c;
$article-warn-code-accent2: $b-pool;
$article-warn-code-accent3: $gr-viridian;
$article-warn-code-accent4: $r-ruby;
$article-warn-code-accent5: #ffb4fb;
$article-warn-code-accent6: $b-pool;
$article-warn-code-accent7: #e90;
$article-warn-code-scrollbar: #2a2025;
$article-cloud-base: $b-pool;
$article-cloud-heading: $g20-white;
$article-cloud-text: $b-neutrino;
$article-cloud-link: $g20-white;
$article-cloud-link-hover: $b-hydrogen;
$article-cloud-table-header: $grad-blue-dark;
$article-cloud-table-row-alt: #1b3a58;
$article-cloud-table-scrollbar: #192a3a;
$article-cloud-shadow: $g0-obsidian;
$article-cloud-code: $b-laser;
$article-cloud-code-bg: #0a071c;
$article-cloud-code-accent1: #567375;
$article-cloud-code-accent2: $b-pool;
$article-cloud-code-accent3: $gr-viridian;
$article-cloud-code-accent4: $r-ruby;
$article-cloud-code-accent5: #ff6db0;
$article-cloud-code-accent6: $b-pool;
$article-cloud-code-accent7: #e90;
$article-cloud-code-scrollbar: #192a3a;
$article-enterprise-base: $br-galaxy;
$article-enterprise-text: $cp-melrose;
$article-enterprise-link: $cp-titan;
$article-enterprise-link-hover: $g20-white;
// Article Tabs for tabbed content
$article-tab-text: $g12-forge;
$article-tab-bg: $grey5;
$article-tab-active-text: $g20-white;
$article-tab-active-bg: $b-pool;
$article-tab-code-text: $g20-white;
// Article page buttons
$article-btn-gradient: $grad-blue;
$article-btn-text: $g20-white;
$article-btn-gradient-hover: $grad-blue-light;
$article-btn-text-hover: $g20-white;
// Article UI nav icons
$article-nav-icon-bg: $g5-pepper;
$article-nav-acct-bg: $g3-castle;
// Error Page Colors
$error-page-btn: $b-pool;
$error-page-btn-text: $g20-white;
$error-page-btn-hover: $g20-white;
$error-page-btn-hover-text: $b-pool;
// Landing Page colors
$landing-artwork-gradient: $grad-GrapeSoda;
$landing-artwork-color: rgba($br-galaxy, .25);
$landing-sm-bg: rgba($g1-raven, .4);
$landing-sm-bg-hover: $b-pool;
$landing-btn-text: $g20-white;
$landing-btn-grad: $grad-blue;
$landing-btn-grad-hover: $grad-blue-light;
// Home page colors
$home-icon-c1: $g20-white;
$home-icon-c2: $body-bg;
// Tooltip colors
$tooltip-color: $br-chartreuse;
$tooltip-color-alt: $br-chartreuse;
$tooltip-bg: $br-chartreuse;
$tooltip-text: $g2-kevlar;
// Support and feedback buttons
$feedback-btn-bg: $grey25;
// URL Modal colors
$modal-field-bg: $g1-raven;
// SVG colors
$svg-table-header: $g6-smoke;
$svg-table-stroke: $g0-obsidian;
$svg-table-row-alt1: $br-magenta;
$svg-table-row-alt2: $gr-rainforest;
$svg-table-code: $article-code;
$svg-table-code-bg: $g0-obsidian;
$svg-table-code-operator: $b-pool;
$svg-table-code-string: $gr-viridian;
$svg-geo-s2-cell: $b-dodger;
$svg-geo-region: $p-comet;
$svg-geo-point: $br-chartreuse;
// HTML diagram colors
$html-diagram-shard-group-bg: $article-table-row-alt;
// Diagram colors
$diagram-arrow: $g6-smoke;
$flux-water-process-img: url('/img/flux/0-x-water-process-dark.svg');
$influxdb-logo: url('/svgs/influxdb-logo-white.svg') !default;
// Code placeholder colors
$code-placeholder: #e659a2;
$code-placeholder-hover: $br-teal;
@import "dark/telegraf",
"dark/chronograf",
"dark/kapacitor";