Repository navigation
Expand file tree
/
Copy path_contrast_dark.scss
More file actions
119 lines (107 loc) · 3.86 KB
/
Copy path_contrast_dark.scss
File metadata and controls
119 lines (107 loc) · 3.86 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
/* ==========================================================================
CONTRAST THEME - DARK VERSION
========================================================================== */
/* Color codes used for the theme */
$primary-color : #ff6c60;
$background : #000000;
$background-light : #1a1a1a;
$background-lighter : #2a2a2a;
$text : #ffffff;
$text-muted : #d9d9d9;
$link : #96cbfe;
$link-dark : #c6c5fe;
$link-light : #ff73fd;
$footer : #000000;
$border : #4d4d4d;
$border-light : #666666;
$selection-bg : #264f78;
$selection-text : #ffffff;
/* Color codes used for the site */
$danger-color : #ff6c60;
$info-color : #96cbfe;
$notice-color : #ffffff;
$success-color : #a8ff60;
$warning-color : #e9c062;
/* Other basic settings for the template */
$border-radius : 4px;
$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125);
$global-transition : all 0.2s ease-in-out;
$masthead-height : 70px;
$navicon-width : 28px;
$navicon-height : 4px;
$sidebar-link-max-width : 250px;
$sidebar-screen-min-width : 1024px;
/* Dark theme for the site */
html[data-theme="dark"] {
--global-base-color : #{$primary-color};
--global-bg-color : #{$background};
--global-footer-bg-color : #{$footer};
--global-border-color : #{$border};
--global-dark-border-color : #{$border-light};
--global-code-background-color : #{$background-light};
--global-code-text-color : #{$text-muted};
--global-fig-caption-color : #{$text-muted};
--global-link-color : #{$link};
--global-link-color-hover : #{$link-dark};
--global-link-color-visited : #{$link-light};
--global-masthead-link-color : #{$text};
--global-masthead-link-color-hover : #{$primary-color};
--global-text-color : #{$text};
--global-text-color-light : #{$text-muted};
--global-thead-color : #{$background-lighter};
--global-toc-bg-color : #{$background-light};
--global-selection-bg-color : #{$selection-bg};
--global-selection-text-color : #{$selection-text};
}
/* Text selection styling for dark theme */
html[data-theme="dark"] ::selection {
background-color: var(--global-selection-bg-color);
color: var(--global-selection-text-color);
}
html[data-theme="dark"] ::-moz-selection {
background-color: var(--global-selection-bg-color);
color: var(--global-selection-text-color);
}
/* Override notice colors for high contrast in dark mode */
html[data-theme="dark"] {
.page__content {
.notice,
.notice--primary,
.notice--info,
.notice--warning,
.notice--success,
.notice {
background-color: mix($background, $notice-color, 85%);
color: #{$text};
border-color: #{$text};
}
.notice--primary {
background-color: mix($background, $notice-color, 85%);
color: #{$text};
border-color: #{$text};
}
.notice--info {
background-color: mix($background, $info-color, 85%);
color: #{$text};
border-color: #{$text};
}
.notice--warning {
background-color: mix($background, $warning-color, 85%);
color: #{$text};
border-color: #{$text};
}
.notice--success {
background-color: mix($background, $success-color, 85%);
color: #{$text};
border-color: #{$text};
}
.notice--danger {
background-color: mix($background, $danger-color, 85%);
color: #{$text};
border-color: #{$text};
}
}
.page__footer {
color: #{$text};
}
}