Skip to content

Fixing dark mode #1214

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

Open
jen-reeve wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fixing dark mode #1214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
592aed5
reformatting the palettes
jen-reeve Mar 26, 2026
11c6c46
woo!
jen-reeve Mar 27, 2026
6949a9e
Merge branch 'main' into dark-mode
jen-reeve Mar 27, 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
91 changes: 68 additions & 23 deletions docs/assets/stylesheets/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,25 +19,62 @@
--reannz-orange: rgb(241, 128, 0);
--reannz-purple: rgb(132, 121, 183);

[data-md-color-scheme="default"] {
--md-primary-fg-color: var(--reannz-blue--dark);
--md-accent-fg-color: var(--reannz-blue);
}
[data-md-color-scheme="default"] {
--md-primary-fg-color: var(--reannz-blue--dark); /* head bar background color */
--md-accent-fg-color: var(--reannz-blue); /* hover color for sidebar links */
/* --md-accent-bg-color: var(--reannz-orange); */ /* cannot figure what this one does */
/* --md-primary-fg-color--light: var(--reannz-orange); */ /* cannot figure what this one does */
/*--md-primary-bg-color: var(--reannz-orange); */ /* text/icon color for head bar */
/* --md-accent-fg-color--light: var(--reannz-orange); */ /* cannot figure what this one does */
/* --md-default-fg-color: var(--reannz-orange); */ /* main text color, sub H1 headers too */
/* --md-default-bg-color: var(--reannz-orange); */ /* main background color */
/* --md-code-fg-color: var(--reannz-orange); */ /* main color for code text */
/* --md-code-bg-color: var(--reannz-orange); */ /* main color for code background */
/* --md-typeset-color: var(--reannz-orange); */ /* main text color, sub H1 headers too */
Comment on lines +25 to +33
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

low

Ahoy! This block be cluttered with commented-out lines, like barnacles on a hull. And that comment on line 27 starts with /*--... what kind of sorcery is that? If these styles are not needed, send 'em to Davy Jones' locker to keep the stylesheet shipshape. A tidy ship is a fast ship!

References
  1. As per the ship's articles, all feedback must be delivered in the tongue of a 17th-century pirate (Line 4). (link)

}

/* --md-accent-bg-color: rgb(210,227,235); */
[data-md-color-scheme="slate"] {
--md-primary-fg-color: var(--reannz-blue--dark);
--md-accent-fg-color: var(--reannz-blue--darkish);

.nt-card-image>img {
filter: brightness(0) invert(1);
}
[data-md-color-scheme="slate"] {
--md-primary-fg-color: var(--reannz-blue--dark); /* head bar background color */
--md-accent-fg-color: var(--reannz-blue); /* hover color for sidebar links */
/* --md-accent-bg-color: var(--reannz-orange); */ /* cannot figure what this one does */
/* --md-primary-fg-color--light: var(--reannz-orange); */ /* cannot figure what this one does */
/*--md-primary-bg-color: var(--reannz-orange); */ /* text/icon color for head bar */
/* --md-accent-fg-color--light: var(--reannz-orange); */ /* cannot figure what this one does */
/* --md-default-fg-color: var(--reannz-orange); */ /* main text color, sub H1 headers too */
/* --md-default-bg-color: var(--reannz-orange); */ /* main background color */
/* --md-code-fg-color: var(--reannz-orange); */ /* main color for code text */
/* --md-code-bg-color: var(--reannz-orange); */ /* main color for code background */
/* --md-typeset-color: var(--reannz-orange); */ /* main text color, sub H1 headers too */
Comment on lines +40 to +48
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

low

Avast ye! More commented-out code clutterin' the deck. And that comment on line 42 starts with /*--... are ye daft? If these styles serve no purpose, cast 'em overboard!

References
  1. As per the ship's articles, all feedback must be delivered in the tongue of a 17th-century pirate (Line 4). (link)

--md-typeset-a-color: rgb(0, 206, 255); /* sidebar active link color */

.nt-card-image>img {
filter: brightness(0) invert(1);
}
}

--md-status--tutorial: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path d="M 12.02213,22.351816 4.4667277,18.181642 V 11.597159 L 0.14935611,9.182849 12.02213,2.5983658 23.894902,9.182849 v 8.779312 h -2.158685 v -7.572156 l -2.158686,1.207154 v 6.584483 z m 0,-9.108535 L 19.415628,9.182849 12.02213,5.122418 4.6286292,9.182849 Z m 0,6.611918 5.396715,-2.963017 V 12.749445 L 12.02213,15.767333 6.6254139,12.749445 v 4.142737 z m 0,-6.611918 z m 0,2.469181 z m 0,0 z" style="stroke-width:0.0272085" /></svg>');
--md-admonition-icon--prerequisite: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 9H7V7h10m0 6H7v-2h10m-3 6H7v-2h7M12 3a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m7 0h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z"/></svg>');
--md-admonition-icon--time: url('data:image/svg+xml;charset=utf-8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <path d="M 8.4571429,2.2857143 V 0 H 15.314286 V 2.2857143 Z M 10.742857,14.857143 h 2.285714 V 8 H 10.742857 Z M 11.885714,24 Q 9.7714286,24 7.9,23.185714 6.0285714,22.371429 4.6285714,20.971429 3.2285714,19.571429 2.4142857,17.7 1.6,15.828571 1.6,13.714286 1.6,11.6 2.4142857,9.7285714 3.2285714,7.8571429 4.6285714,6.4571429 q 1.4,-1.4 3.2714286,-2.2142858 1.8714286,-0.8142857 3.985714,-0.8142857 1.771429,0 3.4,0.5714286 1.628572,0.5714286 3.057143,1.6571429 l 1.6,-1.6 1.6,1.6 -1.6,1.6 Q 21.028571,8.6857143 21.6,10.314286 q 0.571429,1.628571 0.571429,3.4 0,2.114285 -0.814286,3.985714 -0.814286,1.871429 -2.214286,3.271429 -1.4,1.4 -3.271428,2.214285 Q 14,24 11.885714,24 Z m 0,-2.285714 q 3.314286,0 5.657143,-2.342857 2.342857,-2.342858 2.342857,-5.657143 0,-3.314286 -2.342857,-5.6571431 Q 15.2,5.7142857 11.885714,5.7142857 q -3.3142854,0 -5.6571426,2.3428572 Q 3.8857143,10.4 3.8857143,13.714286 q 0,3.314285 2.3428571,5.657143 2.3428572,2.342857 5.6571426,2.342857 z m 0,-8 z" style="stroke-width:0.0285714"/></svg>');
}

/* e.g. inactive link text */
.md-typeset a {
color: var(--reannz-blue--shade-negative1);
}

.md-typeset a:hover {
color: var(--reannz-blue);
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
color: rgb(0, 206, 255);
}

[data-md-color-scheme="slate"] .md-typeset a {
color: var(--reannz-blue);
}

/* Logo biggification */
/* COMMENTED OUT FOR REANNZ LOGO */
/* .md-header__button.md-logo img, .md-header__button.md-logo svg {
Expand Down Expand Up @@ -106,15 +143,6 @@
background-color: var(--reannz-black);
}

/* e.g. inactive link text */
.md-typeset a {
color: var(--reannz-blue--shade-negative1);
}

.md-typeset a:hover {
color: var(--reannz-blue);
}

/* Make deprecated logo stand out */
span.md-status.md-status--deprecated {
filter: invert(50%) sepia(100%) saturate(1000%) hue-rotate(330deg) brightness(70%) contrast(1000%);
Expand Down Expand Up @@ -155,7 +183,7 @@ span.md-status.md-status--deprecated {
}

.cards {
color: var(--md-typeset-color);
color: var(--md-typeset-color); /* I don't think this does anything */
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

low

Blast me eyes! The comment says 'I don't think this does anything'. If ye suspect this line is a stowaway with no purpose, don't just label it, make it walk the plank! Remove the line to keep the code clean.

References
  1. As per the ship's articles, all feedback must be delivered in the tongue of a 17th-century pirate (Line 4). (link)

}

.cards>a {
Expand All @@ -179,7 +207,24 @@ span.md-status.md-status--deprecated {
color: rgba(0, 0, 0, 0.87);
}

/* Turirial deader */
[data-md-color-scheme="slate"] .grid.cards>a>img {
filter: brightness(0) invert(0.75);
}

[data-md-color-scheme="slate"] .grid.cards>a:hover>img {
filter: invert(0.75);
}

[data-md-color-scheme="slate"] .grid.cards>a>h3 {
color: var(--md-typeset-color);
}

[data-md-color-scheme="slate"] .grid.cards>a>p {
color: var(--md-typeset-color);
}


/* Tutorial header */
.tutorial-banner {
display: none;
background: var(--reannz-green);
Expand Down Expand Up @@ -364,7 +409,7 @@ div.quiz-feedback {
border-style: none;
}

/* Formattig a bit broke. hide for now */
/* Formatting a bit broke. hide for now */
.quiz-header-link{
display: none;
}
14 changes: 12 additions & 2 deletions mkdocs.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,23 @@ theme:
language: en
logo: assets/icons/logo_reannz.svg
palette:
- primary: custom
# Palette toggle for automatic mode
- media: "(prefers-color-scheme)"
toggle:
icon: material/brightness-auto
name: Switch to light mode
# Palette toggle for light mode
- media: "(prefers-color-scheme: light)"
scheme: default
toggle:
icon: material/lightbulb
name: Switch to dark mode
- primary: custom
primary: custom
# Palette toggle for dark mode
- media: "(prefers-color-scheme: dark)"
scheme: slate
primary: custom
accent: custom
toggle:
icon: material/lightbulb-outline
name: Switch to light mode
Expand Down
Loading