Skip to content

Small tweaks to color scheme #61

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
egrace479 merged 9 commits into from
Mar 24, 2026
Merged

Small tweaks to color scheme #61

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6ba9d87
Adjust colors for admonition tip
annavik Mar 23, 2026
a748483
Adjust colors for small screen navigation
annavik Mar 23, 2026
2532f32
Make links more distinguishable
annavik Mar 23, 2026
4a70b79
Adjust colors for admonition info
annavik Mar 23, 2026
a5c9573
Tweak link appearance
annavik Mar 23, 2026
39a8bb7
Apply link tweak suggestions from code review
annavik Mar 24, 2026
50e5d24
Tweak logic for admonition colors
annavik Mar 24, 2026
1abff02
Set colors for summary component
annavik Mar 24, 2026
e2614fa
Add background color definition clarification
egrace479 Mar 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 41 additions & 8 deletions docs/stylesheets/extra.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,48 +56,71 @@ body {
background-color: var(--md-primary-fg-color);
}

/* Set colors for collapsible summary component */
.md-typeset details {
border-color: var(--color-lm-url);
box-shadow: none !important;
}

/* icon color */
.md-typeset summary:before {
background-color: var(--color-lm-url);
}

/* shaded part (title/heading) */
.md-typeset summary {
background-color: var(--color-lm-url-10);
}

/*
Set admonition (Note) colors to stand out better
Set admonition (note and info) colors to stand out better
Define through LM/DM scheme color variables to change with mode
*/
.md-typeset .admonition.note, .md-typeset details.note {
.md-typeset .admonition.note, .md-typeset details.note,
.md-typeset .admonition.info, .md-typeset details.info {
border-color: var(--color-lm-url);
box-shadow: var(--color-lm-url-10);
}

/* icon color */
.md-typeset .admonition.note > .admonition-title::before {
.md-typeset .admonition.note > .admonition-title::before,
.md-typeset .admonition.info > .admonition-title::before {
background-color: var(--color-lm-url);
}

/* shaded part (title/heading) */
.md-typeset .note>.admonition-title,.md-typeset .note>summary {
.md-typeset .note>.admonition-title,.md-typeset .note>summary,
.md-typeset .info>.admonition-title, .md-typeset .info>summary {
background-color: var(--color-lm-url-10);
}

/*
Set admonition (question) colors
Set admonition (question and tip) colors
Change with LM/DM (set through scheme color variables)
*/
.md-typeset .admonition.question, .md-typeset details.question {
.md-typeset .admonition.question, .md-typeset details.question,
.md-typeset .admonition.tip, .md-typeset details.tip {
border-color: var(--md-accent-fg-color);
box-shadow: var(--md-accent-fg-color-10);
}

/* icon color */
.md-typeset .admonition.question > .admonition-title::before {
.md-typeset .admonition.question > .admonition-title::before,
.md-typeset .admonition.tip > .admonition-title::before {
background-color: var(--md-accent-fg-color);
}

/* shaded part (title/heading) */
.md-typeset .question>.admonition-title,.md-typeset .question>summary {
.md-typeset .question>.admonition-title, .md-typeset .question>summary,
.md-typeset .tip>.admonition-title, .md-typeset .tip>summary {
background-color: var(--md-accent-fg-color-10);
}

/* Set lightmode URL colors */
/* Content URLs */
[data-md-color-scheme="default"] .md-typeset a {
color: var(--color-lm-url);
font-weight: bold;
}

[data-md-color-scheme="default"] .md-typeset a:hover {
Expand All @@ -108,6 +131,7 @@ Change with LM/DM (set through scheme color variables)
to better distinguish from those that are above */
[data-md-color-scheme="default"] .md-nav .md-nav__link--active {
color: var(--color-lm-url);
font-weight: bold;
}

[data-md-color-scheme="default"] .md-nav .md-nav__link--active:hover {
Expand All @@ -124,6 +148,7 @@ Change with LM/DM (set through scheme color variables)
/* Dark mode custom link color */
[data-md-color-scheme="slate"] .md-typeset a {
color: var(--color-dm-url);
font-weight: bold;
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
Expand All @@ -133,6 +158,7 @@ Change with LM/DM (set through scheme color variables)
/* Dark mode custom active link color (side panel) */
[data-md-color-scheme="slate"] .md-nav .md-nav__link--active {
color: var(--color-dm-url);
font-weight: bold;
}

[data-md-color-scheme="slate"] .md-nav .md-nav__link--active:hover {
Expand All @@ -141,9 +167,16 @@ Change with LM/DM (set through scheme color variables)

/* Small screen adjustments */
@media screen and (max-width: 76.2344em) {
.md-nav--primary .md-nav__title {
background-color: var(--md-primary-fg-color);
/* bg defined by main theme as #fff */
color: var(--md-primary-bg-color);
}

/* Dark mode custom active parent color (side panel) */
[data-md-color-scheme="slate"] .md-nav .md-nav__item--active > .md-nav__link {
color: var(--color-dm-url);
font-weight: bold;
}

/* Dark mode custom active parent hover color (side panel) */
Expand Down