Skip to content

Commit 1a28728

Browse files
maxrjonesmaxrjones
committed
Customize color theme for docs
1 parent 24385ab commit 1a28728

File tree

3 files changed

+216
-58
lines changed

3 files changed

+216
-58
lines changed

‎docs/_static/logo_bw.png‎

44.1 KB
Loading

‎docs/overrides/stylesheets/extra.css‎

Lines changed: 206 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,214 @@
1-
:root,
2-
[data-md-color-scheme="default"] {
3-
/* --md-primary-fg-color: #cf3f02;
4-
--md-default-fg-color: #443f3f; */
5-
--boxShadowD: 0px 12px 24px 0px rgba(68, 63, 63, 0.08),
6-
0px 0px 4px 0px rgba(68, 63, 63, 0.08);
7-
}
8-
body {
9-
margin: 0;
10-
padding: 0;
11-
/* font-size: 16px; */
12-
}
13-
h1,
14-
h2,
15-
h3,
16-
h4,
17-
h5,
18-
h6 {
19-
font-family: var(--md-heading-font);
20-
font-weight: bold;
21-
}
22-
.md-typeset h1,
23-
.md-typeset h2 {
24-
font-weight: normal;
25-
color: var(--md-default-fg-color);
26-
}
27-
.md-typeset h3,
28-
.md-typeset h4 {
29-
font-weight: bold;
30-
color: var(--md-default-fg-color);
31-
}
32-
.md-button,
33-
.md-typeset .md-button {
34-
font-family: var(--md-heading-font);
35-
}
36-
.md-content .supheading {
37-
font-family: var(--md-heading-font);
38-
text-transform: uppercase;
1+
:root {
2+
--gradient-start: #e58077;
3+
--gradient-mid-1: #e57a77;
4+
--gradient-mid-2: #e46876;
5+
--gradient-mid-3: #e34b75;
6+
--gradient-mid-4: #e12374;
7+
--gradient-mid-5: #e01073;
8+
--gradient-end: #bb1085;
9+
10+
/* Primary theme colors
11+
--md-primary-fg-color: #e34b75;
12+
--md-primary-fg-color--light: #e57a77;
13+
--md-primary-fg-color--dark: #bb1085;
14+
15+
/* Accent colors */
16+
--md-accent-fg-color: #e01073;
17+
--md-accent-fg-color--transparent: rgba(224, 16, 115, 0.1);
18+
19+
/* Text colors that work well with the palette */
20+
--md-text-color: #333333;
21+
--md-text-color--light: #666666;
22+
}
23+
24+
/* Dark mode color adjustments */
25+
[data-md-color-scheme="slate"] {
26+
--md-primary-fg-color: #e57a77;
27+
--md-primary-fg-color--light: #e58077;
28+
--md-primary-fg-color--dark: #bb1085;
29+
--md-accent-fg-color: #e46876;
30+
--md-accent-fg-color--transparent: rgba(228, 104, 118, 0.1);
31+
}
32+
33+
/* Header styling with gradient background */
34+
.md-header {
35+
background: linear-gradient(
36+
135deg,
37+
var(--gradient-start) 0%,
38+
var(--gradient-mid-1) 16.66%,
39+
var(--gradient-mid-2) 33.33%,
40+
var(--gradient-mid-3) 50%,
41+
var(--gradient-mid-4) 66.66%,
42+
var(--gradient-mid-5) 83.33%,
43+
var(--gradient-end) 100%
44+
);
45+
box-shadow: 0 2px 8px rgba(187, 16, 133, 0.15);
46+
}
47+
48+
/* Ensure header text is readable over gradient */
49+
.md-header__title,
50+
.md-header__button,
51+
.md-header .md-icon {
52+
color: white;
53+
}
54+
55+
/* Search box styling */
56+
.md-search__input {
57+
background-color: rgba(255, 255, 255, 0.15);
58+
border: 1px solid rgba(255, 255, 255, 0.2);
59+
color: white;
60+
}
61+
62+
.md-search__input::placeholder {
63+
color: rgba(255, 255, 255, 0.7);
64+
}
65+
66+
/* Navigation tabs */
67+
.md-tabs {
68+
background: linear-gradient(
69+
90deg,
70+
var(--gradient-mid-3) 0%,
71+
var(--gradient-mid-4) 50%,
72+
var(--gradient-mid-5) 100%
73+
);
74+
}
75+
76+
.md-tabs__link {
77+
color: rgba(255, 255, 255, 0.9);
78+
}
79+
80+
.md-tabs__link--active,
81+
.md-tabs__link:hover {
82+
color: white;
83+
opacity: 1;
84+
}
85+
86+
/* Sidebar navigation */
87+
.md-nav__link--active {
88+
color: var(--md-primary-fg-color);
89+
font-weight: 500;
90+
}
91+
92+
.md-nav__link:hover {
93+
color: var(--md-accent-fg-color);
94+
}
95+
96+
/* Code blocks */
97+
.highlight {
98+
border-left: 4px solid var(--md-accent-fg-color);
99+
background-color: rgba(228, 104, 118, 0.05);
100+
}
101+
102+
/* Admonitions */
103+
.md-typeset .admonition.note {
104+
border-color: var(--md-primary-fg-color);
105+
}
106+
107+
.md-typeset .admonition.note > .admonition-title {
108+
background-color: rgba(227, 75, 117, 0.1);
109+
border-color: var(--md-primary-fg-color);
110+
}
111+
112+
.md-typeset .admonition.tip {
113+
border-color: var(--gradient-mid-1);
114+
}
115+
116+
.md-typeset .admonition.tip > .admonition-title {
117+
background-color: rgba(229, 122, 119, 0.1);
118+
border-color: var(--gradient-mid-1);
119+
}
120+
121+
.md-typeset .admonition.warning {
122+
border-color: var(--gradient-end);
123+
}
124+
125+
.md-typeset .admonition.warning > .admonition-title {
126+
background-color: rgba(187, 16, 133, 0.1);
127+
border-color: var(--gradient-end);
128+
}
129+
130+
/* Links */
131+
.md-content a {
132+
color: var(--md-accent-fg-color);
133+
}
134+
135+
.md-content a:hover {
136+
color: var(--gradient-end);
137+
}
138+
139+
/* Table of contents */
140+
.md-nav--secondary .md-nav__link--active {
141+
color: var(--md-accent-fg-color);
142+
border-left: 2px solid var(--md-accent-fg-color);
143+
padding-left: calc(1rem - 2px);
144+
}
145+
146+
/* Footer */
147+
.md-footer {
148+
background-color: var(--gradient-end);
149+
}
150+
151+
/* Buttons and interactive elements */
152+
.md-button {
153+
background: linear-gradient(135deg, var(--md-primary-fg-color), var(--md-accent-fg-color));
154+
border: none;
155+
color: white;
156+
transition: all 0.3s ease;
157+
}
158+
159+
.md-button:hover {
160+
transform: translateY(-2px);
161+
box-shadow: 0 4px 12px rgba(187, 16, 133, 0.3);
162+
}
163+
164+
/* Scrollbar styling */
165+
::-webkit-scrollbar {
166+
width: 8px;
167+
}
168+
169+
::-webkit-scrollbar-track {
170+
background: rgba(187, 16, 133, 0.1);
171+
}
172+
173+
::-webkit-scrollbar-thumb {
174+
background: linear-gradient(
175+
180deg,
176+
var(--md-primary-fg-color),
177+
var(--md-accent-fg-color)
178+
);
179+
border-radius: 4px;
180+
}
181+
182+
::-webkit-scrollbar-thumb:hover {
183+
background: linear-gradient(
184+
180deg,
185+
var(--md-accent-fg-color),
186+
var(--gradient-end)
187+
);
188+
}
189+
190+
/* Search results highlighting */
191+
.md-search-result__title {
39192
color: var(--md-primary-fg-color);
40-
font-size: 0.75rem;
41-
font-weight: bold;
193+
}
194+
195+
.md-search-result__teaser mark {
196+
background-color: rgba(224, 16, 115, 0.2);
197+
color: var(--gradient-end);
42198
}
43199

44200
.md-header__button.md-logo img,
45201
.md-header__button.md-logo svg {
46-
height: 2rem;
47-
width: auto;
202+
height: 42px !important; /* Increase from default ~24px */
203+
width: auto !important;
204+
max-height: none !important;
205+
padding: 0 0 0 16px !important; /* Keep left padding, remove others */
206+
margin: 0 !important; /* Remove any margin */
48207
}
49208

50-
.md-header {
51-
padding: 0.2rem 0;
209+
/* Also remove padding from the logo button container except left */
210+
.md-header__button.md-logo {
211+
padding: 0 0 0 8px !important; /* Keep some left padding on container */
212+
margin: 0 !important;
213+
min-width: auto !important;
52214
}

‎mkdocs.yml‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -62,30 +62,26 @@ theme:
6262
language: en
6363
name: material
6464
custom_dir: docs/overrides
65-
logo: _static/logo_horizontal.svg
66-
palette:
67-
# Palette toggle for automatic mode
68-
- media: "(prefers-color-scheme)"
69-
toggle:
70-
icon: material/brightness-auto
71-
name: Switch to light mode
65+
logo: _static/logo_bw.png
7266

73-
# Palette toggle for light mode
67+
palette:
68+
# Light mode
7469
- media: "(prefers-color-scheme: light)"
75-
primary: blue grey
76-
accent: pink
70+
scheme: default
71+
primary: custom
72+
accent: custom
7773
toggle:
7874
icon: material/brightness-7
7975
name: Switch to dark mode
8076

81-
# Palette toggle for dark mode
77+
# Dark mode
8278
- media: "(prefers-color-scheme: dark)"
8379
scheme: slate
84-
primary: grey
85-
accent: pink
80+
primary: custom
81+
accent: custom
8682
toggle:
8783
icon: material/brightness-4
88-
name: Switch to system preference
84+
name: Switch to light mode
8985

9086
font:
9187
text: Roboto

0 commit comments

Comments
 (0)