Skip to content

G
gitlab-ce
Commit 95ce5f5a authored by Simon Knox's avatar Simon Knox Committed by Andrew Fontaine
Browse files
Options

Add Dark Mode 

Basically invert color scales, plus a bit of palette
reduction to make things easier

Mark color vars in variables as !default, then they can
be overridden by importing a theme first. Export separate
application_dark.css file
parent e1dedad4
Hide whitespace changes
Inline Side-by-side
Showing with 323 additions and 131 deletions
app/assets/stylesheets/application_dark.scss 0 → 100644
View file @ 95ce5f5a
@import "./themes/dark";
@import "./application";
app/assets/stylesheets/components/popover.scss
View file @ 95ce5f5a
.popover {
max-width: $popover-max-width;
border: 1px solid $gray-200;
box-shadow: 0 2px 3px 1px $gray-200;
box-shadow: $popover-box-shadow;
font-size: $gl-font-size-small;
/**
......
app/assets/stylesheets/framework/common.scss
View file @ 95ce5f5a
......@@ -111,7 +111,7 @@ pre {
hr {
margin: 24px 0;
border-top: 1px solid darken($gray-normal, 8%);
border-top: 1px solid $gray-darker;
}
.str-truncated {
......
app/assets/stylesheets/framework/dropdowns.scss
View file @ 95ce5f5a
......@@ -657,6 +657,7 @@
.dropdown-input-field,
.default-dropdown-input {
background-color: $input-bg;
display: block;
width: 100%;
min-height: 30px;
......
app/assets/stylesheets/framework/filters.scss
View file @ 95ce5f5a
......@@ -96,7 +96,7 @@
}
.name {
background-color: $white-normal;
background-color: $gray-50;
color: $gl-text-color-secondary;
border-radius: 2px 0 0 2px;
margin-right: 1px;
......@@ -259,6 +259,7 @@
flex: 1;
position: relative;
min-width: 0;
background-color: $input-bg;
}
.filtered-search-input-dropdown-menu {
......
app/assets/stylesheets/framework/gitlab_theme.scss
View file @ 95ce5f5a
......@@ -308,6 +308,7 @@ body {
);
}
&.gl-dark,
&.ui-light {
@include gitlab-theme(
$gray-700,
......@@ -388,4 +389,15 @@ body {
color: $gray-900;
}
}
&.gl-dark {
@include gitlab-theme(
$gray-900,
$gray-500,
$gray-700,
$gray-800,
$gray-50,
$gray-100
);
}
}
app/assets/stylesheets/framework/selects.scss
View file @ 95ce5f5a
......@@ -72,6 +72,7 @@
.select2-drop,
.select2-drop.select2-drop-above {
background: $white;
box-shadow: 0 2px 4px $dropdown-shadow-color;
border-radius: $border-radius-base;
border: 1px solid $border-color;
......@@ -166,7 +167,8 @@
input {
padding: $grid-size;
background: $white image-url('select2.png');
background: transparent image-url('select2.png');
color: $gl-text-color;
background-clip: content-box;
background-origin: content-box;
background-repeat: no-repeat;
......
app/assets/stylesheets/framework/variables.scss
View file @ 95ce5f5a
......@@ -73,108 +73,106 @@ $size-scale: (
'xl': #{70 * $grid-size}
);
/*
* Color schema
*/
$darken-normal-factor: 7%;
$darken-dark-factor: 10%;
$darken-border-factor: 5%;
$darken-border-dashed-factor: 25%;
$white: #fff;
$white-normal: #f0f0f0;
$white-dark: #eaeaea;
$white-transparent: rgba(255, 255, 255, 0.8);
$gray-lightest: #fdfdfd;
$gray-light: #fafafa;
$gray-lighter: #f9f9f9;
$gray-normal: #f5f5f5;
$gray-dark: darken($gray-light, $darken-dark-factor);
$gray-darker: #eee;
$gray-darkest: #c4c4c4;
$purple: #6d49cb;
$purple-light: #ede8fb;
$black: #000;
$black-transparent: rgba(0, 0, 0, 0.3);
$almost-black: #242424;
$t-gray-a-02: rgba($black, 0.02);
$t-gray-a-04: rgba($black, 0.04);
$t-gray-a-06: rgba($black, 0.06);
$t-gray-a-08: rgba($black, 0.08);
$gl-gray-100: #ddd;
$gl-gray-200: #ccc;
$gl-gray-350: #aaa;
$gl-gray-400: #999;
$gl-gray-500: #777;
$gl-gray-600: #666;
$gl-gray-700: #555;
$gl-gray-800: #333;
$green-50: #f1fdf6;
$green-100: #dcf5e7;
$green-200: #b3e6c8;
$green-300: #75d09b;
$green-400: #37b96d;
$green-500: #1aaa55;
$green-600: #168f48;
$green-700: #12753a;
$green-800: #0e5a2d;
$green-900: #0a4020;
$green-950: #072b15;
$blue-50: #f6fafe;
$blue-100: #e4f0fb;
$blue-200: #b8d6f4;
$blue-300: #73afea;
$blue-400: #418cd8;
$blue-500: #1f78d1;
$blue-600: #1b69b6;
$blue-700: #17599c;
$blue-800: #134a81;
$blue-900: #0f3b66;
$blue-950: #0a2744;
$orange-50: #fffaf4;
$orange-100: #fff1de;
$orange-200: #fed69f;
$orange-300: #fdbc60;
$orange-400: #fca429;
$orange-500: #fc9403;
$orange-600: #de7e00;
$orange-700: #c26700;
$orange-800: #a35200;
$orange-900: #853c00;
$orange-950: #592800;
$red-50: #fef6f5;
$red-100: #fbe5e1;
$red-200: #f2b4a9;
$red-300: #ea8271;
$red-400: #e05842;
$red-500: #db3b21;
$red-600: #c0341d;
$red-700: #a62d19;
$red-800: #8b2615;
$red-900: #711e11;
$red-950: #4b140b;
$gray-10: #fafafa;
$gray-50: #f0f0f0;
$gray-100: #dbdbdb;
$gray-200: #dfdfdf;
$gray-300: #ccc;
$gray-400: #bababa;
$gray-500: #a7a7a7;
$gray-600: #919191;
$gray-700: #707070;
$gray-800: #4f4f4f;
$gray-900: #2e2e2e;
$gray-950: #1f1f1f;
// Color schema
$darken-normal-factor: 7% !default;
$darken-dark-factor: 10% !default;
$darken-border-factor: 5% !default;
$darken-border-dashed-factor: 25% !default;
$white: #fff !default;
$white-normal: #f0f0f0 !default;
$white-dark: #eaeaea !default;
$white-transparent: rgba(255, 255, 255, 0.8) !default;
$gray-lightest: #fdfdfd !default;
$gray-light: #fafafa !default;
$gray-lighter: #f9f9f9 !default;
$gray-normal: #f5f5f5 !default;
$gray-dark: darken($gray-light, $darken-dark-factor) !default;
$gray-darker: #eee !default;
$gray-darkest: #c4c4c4 !default;
$purple: #6d49cb !default;
$purple-light: #ede8fb !default;
$black: #000 !default;
$black-transparent: rgba(0, 0, 0, 0.3) !default;
$almost-black: #242424 !default;
$t-gray-a-02: rgba($black, 0.02) !default;
$t-gray-a-04: rgba($black, 0.04) !default;
$t-gray-a-06: rgba($black, 0.06) !default;
$t-gray-a-08: rgba($black, 0.08) !default;
$gl-gray-100: #ddd !default;
$gl-gray-200: #ccc !default;
$gl-gray-350: #aaa !default;
$gl-gray-400: #999 !default;
$gl-gray-500: #777 !default;
$gl-gray-600: #666 !default;
$gl-gray-700: #555 !default;
$gl-gray-800: #333 !default;
$green-50: #f1fdf6 !default;
$green-100: #dcf5e7 !default;
$green-200: #263a2e !default;
$green-300: #75d09b !default;
$green-400: #37b96d !default;
$green-500: #1aaa55 !default;
$green-600: #168f48 !default;
$green-700: #12753a !default;
$green-800: #0e5a2d !default;
$green-900: #0a4020 !default;
$green-950: #072b15 !default;
$blue-50: #f6fafe !default;
$blue-100: #e4f0fb !default;
$blue-200: #b8d6f4 !default;
$blue-300: #73afea !default;
$blue-400: #418cd8 !default;
$blue-500: #1f78d1 !default;
$blue-600: #1b69b6 !default;
$blue-700: #17599c !default;
$blue-800: #134a81 !default;
$blue-900: #0f3b66 !default;
$blue-950: #0a2744 !default;
$orange-50: #fffaf4 !default;
$orange-100: #fff1de !default;
$orange-200: #fed69f !default;
$orange-300: #fdbc60 !default;
$orange-400: #fca429 !default;
$orange-500: #fc9403 !default;
$orange-600: #de7e00 !default;
$orange-700: #c26700 !default;
$orange-800: #a35200 !default;
$orange-900: #853c00 !default;
$orange-950: #592800 !default;
$red-50: #fef6f5 !default;
$red-100: #fbe5e1 !default;
$red-200: #f2b4a9 !default;
$red-300: #ea8271 !default;
$red-400: #e05842 !default;
$red-500: #db3b21 !default;
$red-600: #c0341d !default;
$red-700: #a62d19 !default;
$red-800: #8b2615 !default;
$red-900: #711e11 !default;
$red-950: #4b140b !default;
$gray-10: #fafafa !default;
$gray-50: #f0f0f0 !default;
$gray-100: #dbdbdb !default;
$gray-200: #dfdfdf !default;
$gray-300: #ccc !default;
$gray-400: #bababa !default;
$gray-500: #a7a7a7 !default;
$gray-600: #919191 !default;
$gray-700: #707070 !default;
$gray-800: #4f4f4f !default;
$gray-900: #2e2e2e !default;
$gray-950: #1f1f1f !default;
$greens: (
'50': $green-50,
......@@ -325,8 +323,8 @@ $theme-light-red-500: #c24b38;
$theme-light-red-600: #b03927;
$theme-light-red-700: #a62e21;
$border-white-light: darken($white, $darken-border-factor);
$border-white-normal: darken($white-normal, $darken-border-factor);
$border-white-light: darken($white, $darken-border-factor) !default;
$border-white-normal: darken($white-normal, $darken-border-factor) !default;
$border-gray-light: darken($gray-light, $darken-border-factor);
$border-gray-normal: darken($gray-normal, $darken-border-factor);
......@@ -335,7 +333,7 @@ $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor);
/*
* UI elements
*/
$border-color: #e5e5e5;
$border-color: $gray-200;
$shadow-color: $t-gray-a-08;
$well-expand-item: #e8f2f7;
$well-inner-border: #eef0f2;
......@@ -356,7 +354,7 @@ $gl-text-color-secondary: $gray-700;
$gl-text-color-tertiary: $gray-600;
$gl-text-color-quaternary: #d6d6d6;
$gl-text-color-inverted: $white;
$gl-text-color-secondary-inverted: rgba(255, 255, 255, 0.85);
$gl-text-color-secondary-inverted: rgba($white, 0.85);
$gl-text-color-disabled: $gray-600;
$gl-grayish-blue: #7f8fa4;
$gl-gray-dark: #313236;
......@@ -435,7 +433,6 @@ $layout-link-gray: #7e7c7c;
$btn-side-margin: 10px;
$btn-sm-side-margin: 7px;
$btn-margin-5: 5px;
$sidebar-block-hover-color: #ebebeb;
$count-arrow-border: #dce0e5;
$general-hover-transition-duration: 100ms;
$general-hover-transition-curve: linear;
......@@ -491,8 +488,8 @@ $line-number-select: #fbf2da;
$line-target-blue: $blue-50;
$line-select-yellow: #fcf8e7;
$line-select-yellow-dark: #f0e2bd;
$dark-diff-match-bg: rgba(255, 255, 255, 0.3);
$dark-diff-match-color: rgba(255, 255, 255, 0.1);
$dark-diff-match-bg: rgba($white, 0.3);
$dark-diff-match-color: rgba($white, 0.1);
$diff-image-info-color: #808080;
$diff-view-modes-color: #808080;
$diff-view-modes-border: #c1c1c1;
......@@ -520,7 +517,7 @@ $dropdown-shadow-color: rgba(#000, 0.1);
$dropdown-title-btn-color: #bfbfbf;
$dropdown-input-fa-color: #c7c7c7;
$dropdown-input-focus-shadow: rgba($blue-300, 0.4);
$dropdown-loading-bg: rgba(#fff, 0.6);
$dropdown-loading-bg: rgba($white, 0.6);
$dropdown-chevron-size: 10px;
$dropdown-toggle-active-border-color: darken($border-color, 14%);
$dropdown-fade-mask-height: 32px;
......@@ -534,9 +531,9 @@ $filtered-search-term-shadow-color: rgba(0, 0, 0, 0.09);
/*
* Contextual Sidebar
*/
$link-active-background: rgba(0, 0, 0, 0.04);
$link-hover-background: rgba(0, 0, 0, 0.06);
$inactive-badge-background: rgba(0, 0, 0, 0.08);
$link-active-background: rgba($black, 0.04);
$link-hover-background: rgba($gray-900, 0.06);
$inactive-badge-background: rgba($black, 0.08);
$sidebar-toggle-height: 60px;
$sidebar-toggle-width: 40px;
$sidebar-milestone-toggle-bottom-margin: 10px;
......@@ -544,8 +541,8 @@ $sidebar-milestone-toggle-bottom-margin: 10px;
/*
* Buttons
*/
$btn-active-gray: #ececec;
$btn-active-gray-light: #e4e7ed;
$btn-active-gray: $gray-50;
$btn-active-gray-light: $gray-50;
$btn-white-active: #848484;
$gl-btn-padding: 10px;
$gl-btn-line-height: 16px;
......@@ -602,12 +599,12 @@ $note-icon-gutter-width: 55px;
/*
* Identicon
*/
$identicon-red: #ffebee;
$identicon-purple: #f3e5f5;
$identicon-indigo: #e8eaf6;
$identicon-blue: #e3f2fd;
$identicon-teal: #e0f2f1;
$identicon-orange: #fbe9e7;
$identicon-red: #ffebee !default;
$identicon-purple: #f3e5f5 !default;
$identicon-indigo: #e8eaf6 !default;
$identicon-blue: #e3f2fd !default;
$identicon-teal: #e0f2f1 !default;
$identicon-orange: #fbe9e7 !default;
/*
* Calendar
......@@ -871,6 +868,7 @@ $priority-label-empty-state-width: 114px;
Popovers
*/
$popover-max-width: 384px;
$popover-box-shadow: 0 2px 3px 1px $gray-200;
/*
Issues Analytics
......
app/assets/stylesheets/notify.scss
View file @ 95ce5f5a
......@@ -36,5 +36,5 @@ pre.commit-message {
}
.gl-label-text-dark {
color: $gl-gray-800;
color: $gl-text-color;
}
app/assets/stylesheets/pages/issuable.scss
View file @ 95ce5f5a
......@@ -396,7 +396,7 @@
overflow: hidden;
&:hover {
background-color: $sidebar-block-hover-color;
background-color: $gray-200;
}
&.issuable-sidebar-header {
......
app/assets/stylesheets/pages/profiles/preferences.scss
View file @ 95ce5f5a
......@@ -15,6 +15,10 @@
}
.application-theme {
$ui-dark-bg: #2e2e2e;
$ui-light-bg: #dfdfdf;
$ui-dark-mode-bg: #1f1f1f;
label {
margin: 0 $gl-padding-32 $gl-padding 0;
text-align: center;
......@@ -60,11 +64,17 @@
}
&.ui-dark {
background-color: $gray-900;
background-color: $ui-dark-bg;
border: solid 1px $border-color;
}
&.ui-light {
background-color: $gray-200;
background-color: $ui-light-bg;
}
&.gl-dark {
background-color: $ui-dark-mode-bg;
border: solid 1px $border-color;
}
}
......
app/assets/stylesheets/themes/_dark.scss 0 → 100644
View file @ 95ce5f5a
$gray-10: #1f1f1f;
$gray-50: #2e2e2e;
$gray-100: #4f4f4f;
$gray-200: #707070;
$gray-300: #919191;
$gray-400: #a7a7a7;
$gray-500: #bababa;
$gray-600: #ccc;
$gray-700: #dfdfdf;
$gray-800: #f2f2f2;
$gray-900: #fafafa;
$gray-950: #fff;
$gl-gray-100: #333;
$gl-gray-200: #555;
$gl-gray-350: #666;
$gl-gray-400: #777;
$gl-gray-500: #999;
$gl-gray-600: #aaa;
$gl-gray-700: #ccc;
$gl-gray-800: #ddd;
$green-50: #072b15;
$green-100: #0a4020;
$green-200: #0e5a2d;
$green-300: #12753a;
$green-400: #168f48;
$green-500: #1aaa55;
$green-600: #37b96d;
$green-700: #75d09b;
$green-800: #b3e6c8;
$green-900: #dcf5e7;
$green-950: #f1fdf6;
$blue-50: #0a2744;
$blue-100: #0f3b66;
$blue-200: #134a81;
$blue-300: #17599c;
$blue-400: #1b69b6;
$blue-500: #1f78d1;
$blue-600: #418cd8;
$blue-700: #73afea;
$blue-800: #b8d6f4;
$blue-900: #e4f0fb;
$blue-950: #f6fafe;
$orange-50: #592800;
$orange-100: #853c00;
$orange-200: #a35200;
$orange-300: #c26700;
$orange-400: #de7e00;
$orange-500: #fc9403;
$orange-600: #fca429;
$orange-700: #fdbc60;
$orange-800: #fed69f;
$orange-900: #fff1de;
$orange-950: #fffaf4;
$red-50: #4b140b;
$red-100: #711e11;
$red-200: #8b2615;
$red-300: #a62d19;
$red-400: #c0341d;
$red-500: #db3b21;
$red-600: #e05842;
$red-700: #ea8271;
$red-800: #f2b4a9;
$red-900: #fbe5e1;
$red-950: #fef6f5;
$indigo-50: #1a1a40;
$indigo-100: #292961;
$indigo-200: #393982;
$indigo-300: #4b4ba3;
$indigo-400: #5b5bbd;
$indigo-500: #6666c4;
$indigo-600: #7c7ccc;
$indigo-700: #a6a6de;
$indigo-800: #d1d1f0;
$indigo-900: #ebebfa;
$indigo-950: #f7f7ff;
$gray-lightest: #222;
$gray-light: $gray-50;
$gray-lighter: #303030;
$gray-normal: #333;
$gray-dark: $gray-100;
$gray-darker: #4f4f4f;
$gray-darkest: #c4c4c4;
$black: #fff;
$white: #333;
$white-light: #2b2b2b;
$white-normal: #333;
$white-dark: #444;
$border-white-light: $gray-900;
$border-white-normal: $gray-900;
$body-bg: $gray-50;
$input-bg: $gray-100;
$input-focus-bg: $gray-50;
$input-color: $gray-900;
$input-group-addon-bg: $gray-900;
$tooltip-bg: $gray-800;
$tooltip-color: $gray-10;
$popover-color: $gray-950;
$popover-box-shadow: 0 2px 3px 1px $gray-700;
$popover-arrow-outer-color: $gray-800;
$secondary: $gray-600;
.gl-label {
filter: brightness(0.9) contrast(1.1);
}
// white-ish text for light labels
// and for scoped label value (the right section)
.gl-label-text-light.gl-label-text-light,
.gl-label-text-dark + .gl-label-text-dark {
color: $gray-900;
}
// duplicated class as the original .atwho-view style is added later
.atwho-view.atwho-view {
background-color: $white;
color: $gray-900;
border-color: $gray-800;
}
app/views/layouts/_head.html.haml
View file @ 95ce5f5a
......@@ -47,7 +47,10 @@
= favicon_link_tag favicon, id: 'favicon', data: { original_href: favicon }, type: 'image/png'
= stylesheet_link_tag "application", media: "all"
- if user_application_theme == 'gl-dark'
= stylesheet_link_tag "application_dark", media: "all"
- else
= stylesheet_link_tag "application", media: "all"
= stylesheet_link_tag "print", media: "print"
= stylesheet_link_tag "disable_animations", media: "all" if Rails.env.test? || Gitlab.config.gitlab['disable_animations']
= stylesheet_link_tag 'performance_bar' if performance_bar_enabled?
......
changelogs/unreleased/psi-dark-theme.yml 0 → 100644
View file @ 95ce5f5a
---
title: Add dark theme (alpha)
merge_request: 28252
author:
type: added
config/application.rb
View file @ 95ce5f5a
......@@ -164,6 +164,8 @@ module Gitlab
config.assets.paths << Gemojione.images_path
config.assets.paths << "#{config.root}/vendor/assets/fonts"
config.assets.precompile << "application_dark.css"
config.assets.precompile << "print.css"
config.assets.precompile << "mailer.css"
config.assets.precompile << "mailer_client_specific.css"
......
doc/user/profile/preferences.md
View file @ 95ce5f5a
......@@ -36,6 +36,29 @@ The default theme is Indigo. You can choose between 10 themes:
![Profile preferences navigation themes](img/profil-preferences-navigation-theme.png)
## Dark mode
> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/28252) in GitLab 13.1 as an Alpha release.
GitLab has started work on dark mode! The dark mode Alpha release is available in the
spirit of iteration and the lower expectations of
[Alpha versions](https://about.gitlab.com/handbook/product/#alpha).
Progress on dark mode is tracked in the [Dark theme epic](https://gitlab.com/groups/gitlab-org/-/epics/2902). See the epic for:
- A list of known issues.
- Our planned direction and next steps.
If you find an issue that isn’t listed, please leave a comment on the epic or create a
new issue.
Dark mode is available as a navigation theme, for MVC and compatibility reasons. In
the future, we plan to make it configurable in its own section along with support for
[different navigation themes](https://gitlab.com/gitlab-org/gitlab/-/issues/219512).
NOTE: **Note:**
Dark theme currently only works with the 'Dark' syntax highlighting.
## Syntax highlighting theme
NOTE: **Note:**
......
lib/gitlab/themes.rb
View file @ 95ce5f5a
......@@ -23,7 +23,8 @@ module Gitlab
Theme.new(9, 'Red', 'ui-red'),
Theme.new(10, 'Light Red', 'ui-light-red'),
Theme.new(2, 'Dark', 'ui-dark'),
Theme.new(3, 'Light', 'ui-light')
Theme.new(3, 'Light', 'ui-light'),
Theme.new(11, 'Dark Mode (alpha)', 'gl-dark')
].freeze
# Convenience method to get a space-separated String of all the theme
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7