shared.schemes._night.scss Maven / Gradle / Ivy
@import 'normal';
// Base colors for Nighttime theme
$base-night: #141414; // A very dark gray, almost black, for backgrounds
$base-midnight-blue: #2c3e50; // A dark blue, suitable for headers and footers
$base-twilight-blue: #34495e; // A slightly lighter shade of dark blue for accents
$base-dark-grey: #7f8c8d; // A muted grey for readable text that isn't too harsh
$base-moonlit-aqua: #1abc9c; // A muted aqua for subtle highlights and accents
$base-starlight-yellow: #f1c40f; // A soft yellow for important buttons or icons
$base-cloudy-grey: #bdc3c7; // A lighter grey for background contrasts
$base-meteorite-border: #95a5a6; // A medium grey for borders and lines
// Derived colors for Nighttime theme
$secondary-bg-color: $base-night;
$secondary-text-color: $base-cloudy-grey;
$applist-header-bg: $base-midnight-blue;
$applist-header-text: $base-cloudy-grey;
$applist-link-color: $base-starlight-yellow;
$applist-row-even-bg: $base-twilight-blue;
$applist-row-hover-bg: $base-dark-grey;
$border-color: $base-meteorite-border;
$border-radius: 4px;
$box-shadow: 0 2px 4px rgba($base-dark-grey, 0.2);
$close-color: $secondary-text-color;
$close-hover-color: darken($secondary-text-color, 10%);
$dropdown-btn-bg: $base-midnight-blue;
$dropdown-content-bg: $base-night;
$dropdown-content-hover-bg: $base-dark-grey;
$error-color: lighten($base-starlight-yellow, 10%);
$success-color: $base-moonlit-aqua;
$footer-link-color: $base-cloudy-grey;
$footer-link-hover-color: darken($footer-link-color, 10%);
$link-color: $base-moonlit-aqua;
$link-hover-color: darken($link-color, 10%);
$modal-overlay-color: rgba($base-midnight-blue, 0.7);
$new-session-link-bg: $base-moonlit-aqua;
$new-session-link-hover-bg: darken($new-session-link-bg, 10%);
$primary-bg-color: $base-night;
$primary-text-color: $base-cloudy-grey;
$reply-message-bg: darken($base-night, 5%);
$reply-message-border: $base-meteorite-border;
$response-message-bg: darken($base-night, 5%);
$response-message-border: $base-meteorite-border;
$spinner-border-color: lighten($base-meteorite-border, 10%);
$toolbar-bg-color: $base-midnight-blue;
$toolbar-hover-bg-color: $base-dark-grey;
$toolbar-hover-text-color: $base-cloudy-grey;
$toolbar-text-color: $base-cloudy-grey;
$transition-speed: 0.3s;
$user-message-bg: $base-twilight-blue;
$user-message-border: $base-meteorite-border;
$verbose-pre-bg: $base-dark-grey;
$verbose-pre-border: $base-meteorite-border;
// Buttons
$button-bg-color: $base-starlight-yellow;
$button-text-color: $base-night;
$button-hover-bg-color: darken($button-bg-color, 10%);
$button-hover-text-color: $button-text-color;
$button-border-radius: $border-radius;
$button-box-shadow: $box-shadow;
// Forms remain the same
// Messages and Modals
$message-info-bg-color: lighten($base-twilight-blue, 20%);
$message-info-text-color: $base-midnight-blue;
$message-success-bg-color: lighten($base-moonlit-aqua, 20%);
$message-success-text-color: $base-moonlit-aqua;
$message-error-bg-color: lighten($base-starlight-yellow, 20%);
$message-error-text-color: darken($base-starlight-yellow, 10%);
$modal-content-bg-color: $base-night;
$modal-content-text-color: $secondary-text-color;
$modal-content-shadow: 0 4px 8px rgba($base-dark-grey, 0.3);