Skip to content

Commit f30f0ee

Browse files
authored
added dark theme (#509)
* added dark theme * Updated breadcrumb bg-color * Updated Code * gitignored unwanted dir * Removed .DS_Store and updated .gitignore * Theme updation complete * minor correction - updation now complete
1 parent 0142603 commit f30f0ee

File tree

3 files changed

+127
-0
lines changed

3 files changed

+127
-0
lines changed

.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,4 @@ venv
2626

2727
404.html
2828
site_libs
29+
.DS_Store

_quarto.yml

+1
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,7 @@ format:
147147
html:
148148
theme:
149149
light: cosmo
150+
dark: [cosmo, theming/theme-dark.scss]
150151
css: theming/styles.css
151152
toc: true
152153
smooth-scroll: true

theming/theme-dark.scss

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
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+
$links:#2aa198;
13+
$links-hover: #31dce6;
14+
$code-background-color: #172424;
15+
$li: #bcbcbc;
16+
17+
// Quarto default colors
18+
19+
$white: #ffffff !default;
20+
$gray-100: #f8f9fa !default;
21+
$gray-200: #e9ecef !default;
22+
$gray-300: #dee2e6 !default;
23+
$gray-400: #ced4da !default;
24+
$gray-500: #adb5bd !default;
25+
$gray-600: #868e96 !default;
26+
$gray-700: #495057 !default;
27+
$gray-800: #373a3c !default;
28+
$gray-900: #212529 !default;
29+
$black: #000000 !default;
30+
31+
$indigo: #6610f2 !default;
32+
$purple: #613d7c !default;
33+
$pink: #e83e8c !default;
34+
$red: #ff0039 !default;
35+
$orange: #f0ad4e !default;
36+
$yellow: #ff7518 !default;
37+
$green: #3fb618 !default;
38+
$teal: #20c997 !default;
39+
$cyan: #9954bb !default;
40+
41+
$primary: $links-hover !default;
42+
$secondary: $gray-800 !default;
43+
$success: $green !default;
44+
$info: $cyan !default;
45+
$warning: $yellow !default;
46+
$danger: $red !default;
47+
$light: $gray-100 !default;
48+
$dark: $gray-800 !default;
49+
50+
$min-contrast-ratio: 2.6 !default;
51+
52+
// Options
53+
54+
$enable-rounded: false !default;
55+
56+
// Fonts
57+
58+
// stylelint-disable-next-line value-keyword-case
59+
$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;
60+
$headings-font-weight: 400 !default;
61+
62+
// Tables
63+
64+
$table-color: initial !default;
65+
66+
// Alerts
67+
68+
$alert-border-width: 0 !default;
69+
70+
// Progress bars
71+
72+
$progress-height: .5rem !default;
73+
74+
75+
// Custom tweaks for Quarto-Cosmo
76+
77+
$navbar-bg: $background-nav;
78+
$navbar-fg: $foreground;
79+
$footer-bg: $background-nav;
80+
$footer-fg: $foreground;
81+
$body-color: $white;
82+
$body-bg: $background-body;
83+
84+
a, pre code {
85+
color: $links !important;
86+
}
87+
88+
a:hover {
89+
color: $links-hover !important;
90+
}
91+
92+
code, p code, ol code, li code, h1 code {
93+
background-color: $code-background-color !important;
94+
color: $links;
95+
}
96+
97+
.cell, .anchored code {
98+
background-color: $code-background-color !important;
99+
color: $links;
100+
}
101+
102+
div.sourceCode {
103+
background-color: $code-background-color !important;
104+
}
105+
106+
li {
107+
color: $li !important;
108+
}
109+
110+
.menu-text:hover {
111+
color: $links-hover !important;
112+
}
113+
114+
p {
115+
color: $li !important;
116+
}
117+
118+
.quarto-title-breadcrumbs .breadcrumb li:last-of-type a {
119+
color: #6c757d !important;
120+
}
121+
122+
::selection {
123+
color: $links-hover;
124+
background: $background-nav;
125+
}

0 commit comments

Comments
 (0)