Skip to content

Commit c68ab4f

Browse files
committed
Dark theme file updated with cosmo
1 parent 829585f commit c68ab4f

File tree

2 files changed

+99
-23
lines changed

2 files changed

+99
-23
lines changed

_quarto.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ format:
6262
html:
6363
theme:
6464
light: cosmo
65-
dark: [solar, theming/theme-dark.scss]
65+
dark: [cosmo, theming/theme-dark.scss]
6666
css: theming/styles.css
6767
toc: true
6868
smooth-scroll: true

theming/theme-dark.scss

Lines changed: 98 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,134 @@
11
/*-- scss:defaults --*/
2+
// Cosmo 5.3.3
3+
// Bootswatch
24

3-
$navbar-bg: #192222;
4-
$navbar-fg: #1bb3ac;
5-
$footer-bg: #192222;
6-
$footer-fg: #1bb3ac;
7-
$body-color: #fff;
8-
$body-bg: #131818;
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;
984

1085
a {
11-
color: #2aa198 !important;
86+
color: $links !important;
1287
}
1388

1489
a:hover {
15-
color: #31dce6 !important;
90+
color: $links-hover !important;
1691
}
1792

1893
code, p code {
19-
background-color: #172424 !important;
20-
color: #2aa198;
94+
background-color: $code-background-color !important;
95+
color: $links;
2196
}
2297

2398
li {
24-
color: #979c9c !important;
99+
color: $li !important;
25100
}
26101

27102
.menu-text:hover {
28-
color: #31dce6 !important;
103+
color: $links-hover !important;
29104
}
30105

31106
.quarto-title-banner {
32-
background-color: #073c44 !important;
107+
background-color: $foreground-dark !important;
33108
}
34109

35110
.title {
36-
color: #ffffff !important;
111+
color: $white !important;
37112
}
38113

39114
.listing-description a {
40-
color: #979c9c !important;
115+
color: $li !important;
41116
}
42117

43118
p {
44-
color: #979c9c !important;
119+
color: $li !important;
45120
}
46121

47-
.team-member {
48-
background-color: #192222 !important;
122+
123+
.team-member, .input-group-text {
124+
background-color: $background-nav !important;
49125
}
50126

51-
.level4 {
52-
color: #1bb3ac !important;
127+
.level4, .listing-category {
128+
color: $foreground !important;
53129
}
54130

55131
::selection {
56-
color: #31dce6;
57-
background: #192222;
132+
color: $links-hover;
133+
background: $background-nav;
58134
}

0 commit comments

Comments
 (0)