Cofffee-Assets/styles/material-light/color/mastodon-dark.scss
stux 33ad106a25 Custom themes
Added all custom themes from the collection.
2022-05-23 23:03:20 +02:00

135 lines
5.2 KiB
SCSS

@charset "UTF-8";
// Base color
$primary-color: #2b90d9;
$secondary-color: #2b90d9;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #ffffff;
$secondary-text-color: #9baec8;
$ui-text-color: #fff;
$inverted-text-color: #000000;
$section-text-color: $primary-color;
$info-text-color: #606984;
$tips-text-color: #6d7889;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4ea2df;
$menu-text-color: #282c37;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
$background-color: #191b22;
$menu-background-color: #d9e1e8;
$menu-background-hover-color: lighten($menu-background-color, 6%);
$menu-background-active-color: lighten($menu-background-color, 10%);
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
$card-background-color: #313543;
$card-background-hover-color: lighten($card-background-color, 6%);
$card-background-inactive-color: lighten($card-background-color, 10%);
$list-background-color: #282c37;
$list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-color: lighten($list-background-color, 10%);
$text-field-background-color: $card-background-color;
$verified-background-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #42485a;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$outlined-chip-color: #393f4f;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#42485a, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #9baec8;
$icon-hover-color: lighten($icon-color, 30%);
$icon-background-hover-color: lighten($background-color, 14%);
$icon-background-active-color: lighten($background-color, 18%);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #fff;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.7);
$text-button-focus-color: transparentize($text-button-color, 0.6);
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($primary-color, 18%);
// Border color
$border-color: #393f4f;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: lighten($background-color, 16%);
$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
$scroll-bar-thumb-active-color: lighten($background-color, 32%);
// App bar color
$top-bar-color: #313543;
$search-bar-color: lighten($top-bar-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: #d9e1e8;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: #1f232b;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $tab-indicator-color;
$text-tab-indicator-active-color: $tab-indicator-active-color;
$text-tab-background-color: $tab-background-color;
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);