Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit2d3d790

Browse files
maxrjonesd-v-b
andauthored
Customize color theme for docs (#3477)
Co-authored-by: Davis Bennett <davis.v.bennett@gmail.com>
1 parent64c2bdc commit2d3d790

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
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:0px12px24px0pxrgba(68,63,63,0.08),
6-
0px0px4px0pxrgba(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-typeseth1,
23-
.md-typeseth2 {
24-
font-weight: normal;
25-
color:var(--md-default-fg-color);
26-
}
27-
.md-typeseth3,
28-
.md-typeseth4 {
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:02px8pxrgba(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 solidrgba(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 solidvar(--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-contenta {
132+
color:var(--md-accent-fg-color);
133+
}
134+
135+
.md-contenta: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 solidvar(--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: all0.3s ease;
157+
}
158+
159+
.md-button:hover {
160+
transform:translateY(-2px);
161+
box-shadow:04px12pxrgba(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__teasermark {
196+
background-color:rgba(224,16,115,0.2);
197+
color:var(--gradient-end);
42198
}
43199

44200
.md-header__button.md-logoimg,
45201
.md-header__button.md-logosvg {
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:00016px!important;/* Keep left padding, remove others */
206+
margin:0!important;/* Remove any margin */
48207
}
49208

50-
.md-header {
51-
padding:0.2rem0;
209+
/* Also remove padding from the logo button container except left */
210+
.md-header__button.md-logo {
211+
padding:0008px!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 tosystem preference
84+
name:Switch tolight mode
8985

9086
font:
9187
text:Roboto

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp