Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
1960230d
Commit
1960230d
authored
Jun 11, 2020
by
Andrew Fontaine
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'psi-dark-theme' into 'master'
Add dark theme alpha See merge request gitlab-org/gitlab!28252
parents
8592a578
95ce5f5a
Changes
17
Show whitespace changes
Inline
Side-by-side
Showing
17 changed files
with
323 additions
and
131 deletions
+323
-131
app/assets/stylesheets/application_dark.scss
app/assets/stylesheets/application_dark.scss
+3
-0
app/assets/stylesheets/components/popover.scss
app/assets/stylesheets/components/popover.scss
+1
-1
app/assets/stylesheets/framework/common.scss
app/assets/stylesheets/framework/common.scss
+1
-1
app/assets/stylesheets/framework/dropdowns.scss
app/assets/stylesheets/framework/dropdowns.scss
+1
-0
app/assets/stylesheets/framework/filters.scss
app/assets/stylesheets/framework/filters.scss
+2
-1
app/assets/stylesheets/framework/gitlab_theme.scss
app/assets/stylesheets/framework/gitlab_theme.scss
+12
-0
app/assets/stylesheets/framework/selects.scss
app/assets/stylesheets/framework/selects.scss
+3
-1
app/assets/stylesheets/framework/variables.scss
app/assets/stylesheets/framework/variables.scss
+119
-121
app/assets/stylesheets/notify.scss
app/assets/stylesheets/notify.scss
+1
-1
app/assets/stylesheets/pages/issuable.scss
app/assets/stylesheets/pages/issuable.scss
+1
-1
app/assets/stylesheets/pages/profiles/preferences.scss
app/assets/stylesheets/pages/profiles/preferences.scss
+12
-2
app/assets/stylesheets/themes/_dark.scss
app/assets/stylesheets/themes/_dark.scss
+131
-0
app/views/layouts/_head.html.haml
app/views/layouts/_head.html.haml
+4
-1
changelogs/unreleased/psi-dark-theme.yml
changelogs/unreleased/psi-dark-theme.yml
+5
-0
config/application.rb
config/application.rb
+2
-0
doc/user/profile/preferences.md
doc/user/profile/preferences.md
+23
-0
lib/gitlab/themes.rb
lib/gitlab/themes.rb
+2
-1
No files found.
app/assets/stylesheets/application_dark.scss
0 → 100644
View file @
1960230d
@import
"./themes/dark"
;
@import
"./application"
;
app/assets/stylesheets/components/popover.scss
View file @
1960230d
.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 @
1960230d
...
...
@@ -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 @
1960230d
...
...
@@ -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 @
1960230d
...
...
@@ -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 @
1960230d
...
...
@@ -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 @
1960230d
...
...
@@ -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 @
1960230d
...
...
@@ -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-90
0
,
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 @
1960230d
...
...
@@ -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 @
1960230d
...
...
@@ -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 @
1960230d
...
...
@@ -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 @
1960230d
$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 @
1960230d
...
...
@@ -47,6 +47,9 @@
=
favicon_link_tag
favicon
,
id:
'favicon'
,
data:
{
original_href:
favicon
},
type:
'image/png'
-
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'
]
...
...
changelogs/unreleased/psi-dark-theme.yml
0 → 100644
View file @
1960230d
---
title
:
Add dark theme (alpha)
merge_request
:
28252
author
:
type
:
added
config/application.rb
View file @
1960230d
...
...
@@ -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 @
1960230d
...
...
@@ -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 @
1960230d
...
...
@@ -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
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment