Skip to content

Commit 911471d

Browse files
authored
Added Dark Theme (#92)
* Added Dark Theme * updated dark theme & added Text Selection color * Dark theme file updated with cosmo
1 parent efab65e commit 911471d

File tree

2 files changed

+135
-0
lines changed

2 files changed

+135
-0
lines changed

_quarto.yml

+1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ format:
6262
html:
6363
theme:
6464
light: cosmo
65+
dark: [cosmo, theming/theme-dark.scss]
6566
css: theming/styles.css
6667
toc: true
6768
smooth-scroll: true

theming/theme-dark.scss

+134
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
/*-- scss:defaults --*/
2+
// Cosmo 5.3.3
3+
// Bootswatch
4+
5+
$theme: "cosmo" !default;
6+
7+
// Manually-added colors
8+
9+
$background-nav: #192222;
10+
$background-body: #131818;
11+
$foreground: #1bb3ac;
12+
$foreground-dark: #073c44;
13+
$links:#2aa198;
14+
$links-hover: #31dce6;
15+
$code-background-color: #172424;
16+
$li: #bcbcbc;
17+
18+
// Quarto default colors
19+
20+
$white: #ffffff !default;
21+
$gray-100: #f8f9fa !default;
22+
$gray-200: #e9ecef !default;
23+
$gray-300: #dee2e6 !default;
24+
$gray-400: #ced4da !default;
25+
$gray-500: #adb5bd !default;
26+
$gray-600: #868e96 !default;
27+
$gray-700: #495057 !default;
28+
$gray-800: #373a3c !default;
29+
$gray-900: #212529 !default;
30+
$black: #000000 !default;
31+
32+
$indigo: #6610f2 !default;
33+
$purple: #613d7c !default;
34+
$pink: #e83e8c !default;
35+
$red: #ff0039 !default;
36+
$orange: #f0ad4e !default;
37+
$yellow: #ff7518 !default;
38+
$green: #3fb618 !default;
39+
$teal: #20c997 !default;
40+
$cyan: #9954bb !default;
41+
42+
$primary: $links-hover !default;
43+
$secondary: $gray-800 !default;
44+
$success: $green !default;
45+
$info: $cyan !default;
46+
$warning: $yellow !default;
47+
$danger: $red !default;
48+
$light: $gray-100 !default;
49+
$dark: $gray-800 !default;
50+
51+
$min-contrast-ratio: 2.6 !default;
52+
53+
// Options
54+
55+
$enable-rounded: false !default;
56+
57+
// Fonts
58+
59+
// stylelint-disable-next-line value-keyword-case
60+
$font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
61+
$headings-font-weight: 400 !default;
62+
63+
// Tables
64+
65+
$table-color: initial !default;
66+
67+
// Alerts
68+
69+
$alert-border-width: 0 !default;
70+
71+
// Progress bars
72+
73+
$progress-height: .5rem !default;
74+
75+
76+
// Custom tweaks for Quarto-Cosmo
77+
78+
$navbar-bg: $background-nav;
79+
$navbar-fg: $foreground;
80+
$footer-bg: $background-nav;
81+
$footer-fg: $foreground;
82+
$body-color: $white;
83+
$body-bg: $background-body;
84+
85+
a {
86+
color: $links !important;
87+
}
88+
89+
a:hover {
90+
color: $links-hover !important;
91+
}
92+
93+
code, p code {
94+
background-color: $code-background-color !important;
95+
color: $links;
96+
}
97+
98+
li {
99+
color: $li !important;
100+
}
101+
102+
.menu-text:hover {
103+
color: $links-hover !important;
104+
}
105+
106+
.quarto-title-banner {
107+
background-color: $foreground-dark !important;
108+
}
109+
110+
.title {
111+
color: $white !important;
112+
}
113+
114+
.listing-description a {
115+
color: $li !important;
116+
}
117+
118+
p {
119+
color: $li !important;
120+
}
121+
122+
123+
.team-member, .input-group-text {
124+
background-color: $background-nav !important;
125+
}
126+
127+
.level4, .listing-category {
128+
color: $foreground !important;
129+
}
130+
131+
::selection {
132+
color: $links-hover;
133+
background: $background-nav;
134+
}

0 commit comments

Comments
 (0)