Skip to content

Dark mode docs using custom colors #93

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

Closed
wants to merge 7 commits into from
Closed

Dark mode docs using custom colors #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9ff03e4
first attempt to enable light/dark mode toggle
Burhan-Q Apr 10, 2025
fae165c
Merge branch 'main' into dark
Burhan-Q Apr 10, 2025
ed6dd3d
configured custom CSS for dark mode and imp
Burhan-Q Apr 10, 2025
c4c7ef5
remove extraneous comments
Burhan-Q Apr 10, 2025
77846ac
Merge branch 'main' into dark
Burhan-Q Apr 22, 2025
f937ba9
uncomment `mkdocs-jupyter` block
Burhan-Q Apr 29, 2025
5b95a23
reapply format from `main` for `mkdocs-jupyter`
Burhan-Q Apr 29, 2025
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
35 changes: 32 additions & 3 deletions docs/_static/css/voxel51-docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
:root {
:root > * {
--md-text-font-family: 'Inter', sans-serif;

--voxel-bg-dark: rgb(29, 33, 37);
--md-primary-fg-color: rgba(255, 109, 4, 1);
--md-primary-fg-color--light: rgba(255, 109, 4, .7);
--md-primary-fg-color--dark: rgba(255, 109, 4, 1);
Expand All @@ -10,6 +8,22 @@
--md-accent-fg-color--transparent: rgba(255, 109, 4, 0.1);
--md-accent-bg-color: rgba(255, 109, 4, 1);
--md-accent-bg-color--light: rgba(255, 109, 4, .7);

--md-typeset-a-color: rgba(255, 109, 4, 1);
--md-default-fg-color--lighter: rgba(255, 109, 4, 1);
}

/* Custom light mode */
[data-md-color-scheme="custom"] {
--md-primary-fg-color: rgba(255, 109, 4, 1);
}

/* Custom dark mode, using slate and custom accent */
[data-md-color-scheme="slate"][data-md-color-primary=indigo] {

--voxel-bg-dark: rgb(29, 33, 37);
--md-primary-fg-color: rgba(255, 109, 4, 1);
--md-typeset-a-color: rgb(255, 109, 4);
}

@font-face {
Expand Down Expand Up @@ -75,3 +89,18 @@ html,body,h1,h2,h3,h4,h5,h6,p,div,a,form,button,input,select,textarea,sup,header
.md-header__topic:first-child {
font-weight: 300;
}

/* Controls color of annotation after opening */
.md-tooltip--active+.md-annotation__index:after, :hover>.md-annotation__index:after {
--md-accent-fg-color: aqua;
}

/* Controls hover highlight color for hypertext */
.md-typeset a:hover {
--md-accent-fg-color: aqua;
}

/* Controls highlight for tabbed content */
.js .md-typeset .tabbed-labels:before {
background: rgba(255, 109, 4, 1);
}
17 changes: 14 additions & 3 deletions mkdocs.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,20 @@
site_name: Voxel51 Documentation
theme:
name: material
palette:
primary: custom
accent: custom
palette:
# Palette toggle for light mode
- media: "(prefers-color-scheme: light)"
scheme: custom
toggle:
icon: material/brightness-7
name: Switch to dark mode

# Palette toggle for dark mode
- media: "(prefers-color-scheme: dark)"
scheme: slate
toggle:
icon: material/brightness-4
name: Switch to light mode
logo: _static/images/voxel51-logo-white-300.webp
favicon: _static/images/icons/voxel51-166px.webp
features:
Expand Down
Loading