Skip to content

Add Dark Mode Support for Documentation Pages #470

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
Ansita20 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add Dark Mode Support for Documentation Pages #470

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
292 changes: 292 additions & 0 deletions assets/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -544,4 +544,296 @@ ul.share li i {
.container .changeicon .nav-item .dropdown-item a {
top: 0 !important;
}
}

/*************************************************
* Dark Mode - Documentation Section
* Color Scheme:
* Background: #1C1F24
* Sidebar & Header: #22262B
* Primary Text: #EAEAEA
* Secondary Text: #B9BEC5
* Muted Text: #8B9098
* Accent Color: #F97316
* Borders: #323842
* Hover/Active: #2A2F36
**************************************************/
Comment on lines +549 to +560
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Feb 3, 2026

Choose a reason for hiding this comment

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

medium

To improve the maintainability and consistency of the dark mode theme, I recommend defining your color palette using CSS Custom Properties (variables). You've already listed the color scheme in this comment block; defining them as variables within body.dark will make it much easier to manage and update colors across the entire stylesheet.

For example, you can then use background-color: var(--doc-bg); instead of hardcoding #1C1F24 everywhere.

body.dark {
    --doc-bg: #1C1F24;
    --doc-sidebar-header-bg: #22262B;
    --doc-text-primary: #EAEAEA;
    --doc-text-secondary: #B9BEC5;
    --doc-text-muted: #8B9098;
    --doc-accent: #F97316;
    --doc-accent-hover: #FB923C;
    --doc-border: #323842;
    --doc-hover-active-bg: #2A2F36;
    --doc-code-bg: #323842;
}


/* Dark mode for documentation container */
body.dark .container-fluid.docs {
background-color: #1C1F24;
}

/* Dark mode for documentation sidebar */
body.dark .docs-sidebar {
background-color: #22262B;
border-right-color: #323842;
border-bottom-color: #323842;
}

/* Dark mode for sidebar navigation */
body.dark .docs-sidebar .nav > li > a {
color: #B9BEC5;
}

body.dark .docs-sidebar .nav > li > a:hover {
color: #EAEAEA;
background-color: transparent;
}

/* Dark mode for active sidebar items */
body.dark .docs-sidebar .docs-toc-item.active a,
body.dark .docs-sidebar .nav > .active:hover > a,
body.dark .docs-sidebar .nav > .active > a {
color: #F97316;
font-weight: bold;
background-color: #2A2F36;
}

/* Dark mode for sidebar search */
body.dark .docs-search .form-control {
background-color: #323842;
border-color: #323842;
color: #EAEAEA;
}

body.dark .docs-search .form-control::placeholder {
color: #8B9098;
}

body.dark .docs-search .form-control:focus {
background-color: #323842;
border-color: #F97316;
color: #EAEAEA;
box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.25);
}

body.dark .docs-toggle {
color: #F97316;
background-color: transparent;
}

/* Dark mode for documentation content */
body.dark .docs-content {
background-color: #1C1F24;
color: #EAEAEA;
}

body.dark .docs-article-container {
background-color: #1C1F24;
}

Comment on lines +617 to +625
Copy link

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

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

Both .docs-content and .docs-article-container set the same background-color (#1C1F24). This redundancy suggests either one is unnecessary, or these are distinct elements that happen to share the same styling. Consider consolidating these rules if they apply to the same element, or add a comment clarifying their relationship if they're intentionally separate.

Suggested change
body.dark .docs-content {
background-color: #1C1F24;
color: #EAEAEA;
}
body.dark .docs-article-container {
background-color: #1C1F24;
}
body.dark .docs-content,
body.dark .docs-article-container {
background-color: #1C1F24;
color: #EAEAEA;
}

Copilot uses AI. Check for mistakes.
body.dark .docs-article-container h1 {
color: #EAEAEA;
}

body.dark .docs-article-container h2 {
color: #EAEAEA;
border-bottom-color: #323842;
}

body.dark .docs-article-container h3,
body.dark .docs-article-container h4,
body.dark .docs-article-container h5,
body.dark .docs-article-container h6 {
color: #EAEAEA;
}

/* Dark mode for documentation body text */
body.dark .docs-article-container p {
color: #B9BEC5;
}

body.dark .body-footer {
color: #8B9098;
border-top-color: #323842;
}

/* Dark mode for documentation links */
body.dark .docs-article-container a {
color: #F97316;
text-decoration: none;
}

body.dark .docs-article-container a:hover {
color: #FB923C;
text-decoration: underline;
}

/* Dark mode for code blocks in documentation */
body.dark .docs-article-container pre {
background-color: #323842;
border-color: #323842;
color: #EAEAEA;
}

body.dark .docs-article-container code {
background-color: #323842;
color: #F97316;
border-color: #323842;
}

/* Dark mode for inline code in docs */
body.dark .docs-article-container p code {
color: #F97316;
background-color: #323842;
}

/* Dark mode for tables in documentation */
body.dark .docs-article-container table {
background-color: transparent;
border-color: #323842;
}

body.dark .docs-article-container table th {
background-color: #22262B;
color: #EAEAEA;
border-color: #323842;
}

body.dark .docs-article-container table td {
border-color: #323842;
color: #B9BEC5;
}

body.dark .docs-article-container table tr:hover {
background-color: #2A2F36;
}

/* Dark mode for blockquotes in documentation */
body.dark .docs-article-container blockquote {
border-left-color: #F97316;
color: #B9BEC5;
background-color: #22262B;
}

/* Dark mode for lists in documentation */
body.dark .docs-article-container ul,
body.dark .docs-article-container ol {
color: #B9BEC5;
}

body.dark .docs-article-container li {
color: #B9BEC5;
}

/* Dark mode for documentation TOC (Table of Contents) */
body.dark .docs-toc {
background-color: #1C1F24;
}

body.dark .docs-toc-title {
color: #EAEAEA;
}

body.dark .docs-toc nav ul > li > a {
color: #B9BEC5;
}

body.dark .docs-toc nav ul > li > a:hover {
color: #EAEAEA;
}

body.dark .docs-toc nav ul > li.nav-item.active > a {
color: #F97316;
font-weight: bold;
}

/* Dark mode for TOC links */
body.dark .toc-top a {
color: #F97316;
}

body.dark .toc-top a:hover {
color: #FB923C;
}

/* Dark mode for article tags in documentation */
body.dark .article-tags {
border-top-color: #323842;
}

body.dark .article-tags a {
color: #F97316;
background-color: #22262B;
}

body.dark .article-tags a:hover {
background-color: #2A2F36;
color: #FB923C;
}

/* Dark mode for related articles widget */
body.dark .article-widget {
background-color: #22262B;
border-color: #323842;
}

body.dark .article-widget h3,
body.dark .article-widget h4 {
color: #EAEAEA;
}

body.dark .article-widget ul li a {
color: #F97316;
}

body.dark .article-widget ul li a:hover {
color: #FB923C;
}

body.dark .hr-light {
border-color: #323842;
}

/* Dark mode for documentation alerts/notes */
body.dark .docs-article-container .alert {
background-color: #22262B;
border-color: #323842;
color: #B9BEC5;
}

body.dark .docs-article-container .alert-info {
background-color: #22262B;
border-color: #F97316;
color: #EAEAEA;
}

body.dark .docs-article-container .alert-warning {
background-color: #22262B;
border-color: #F97316;
color: #EAEAEA;
}

body.dark .docs-article-container .alert-danger {
background-color: #22262B;
border-color: #F97316;
color: #EAEAEA;
}

body.dark .docs-article-container .alert-success {
background-color: #22262B;
border-color: #F97316;
Comment on lines +798 to +816
Copy link

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

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

All alert types (info, warning, danger, success) use the same orange border color (#F97316), which defeats the purpose of having different alert types. Users expect visual differentiation: typically blue for info, yellow/orange for warning, red for danger, and green for success. Consider using distinct border colors that maintain good contrast with the dark background while still being semantically meaningful.

Suggested change
border-color: #F97316;
color: #EAEAEA;
}
body.dark .docs-article-container .alert-warning {
background-color: #22262B;
border-color: #F97316;
color: #EAEAEA;
}
body.dark .docs-article-container .alert-danger {
background-color: #22262B;
border-color: #F97316;
color: #EAEAEA;
}
body.dark .docs-article-container .alert-success {
background-color: #22262B;
border-color: #F97316;
border-color: #3B82F6; /* blue for info */
color: #EAEAEA;
}
body.dark .docs-article-container .alert-warning {
background-color: #22262B;
border-color: #F97316; /* orange for warning */
color: #EAEAEA;
}
body.dark .docs-article-container .alert-danger {
background-color: #22262B;
border-color: #EF4444; /* red for danger */
color: #EAEAEA;
}
body.dark .docs-article-container .alert-success {
background-color: #22262B;
border-color: #22C55E; /* green for success */

Copilot uses AI. Check for mistakes.
color: #EAEAEA;
}
Comment on lines +796 to +818
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Feb 3, 2026

Choose a reason for hiding this comment

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

medium

The styles for the different alert types (.alert-info, .alert-warning, .alert-danger, .alert-success) are identical. You can group these selectors to reduce code duplication and make the CSS easier to maintain.

body.dark .docs-article-container .alert-info,
body.dark .docs-article-container .alert-warning,
body.dark .docs-article-container .alert-danger,
body.dark .docs-article-container .alert-success {
    background-color: #22262B;
    border-color: #F97316;
    color: #EAEAEA;
}


/* Dark mode for images in documentation */
body.dark .docs-article-container img {
border-color: #323842;
}

/* Dark mode for documentation footer */
body.dark .docs-article-container footer {
border-top-color: #323842;
color: #8B9098;
}

/* Dark mode for documentation container fluid */
body.dark .container-fluid {
Copy link

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

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

The .container-fluid selector is styled twice: once on line 832-834 for general use, and again on line 837-839 specifically for .container-fluid.docs .row. The first rule (.container-fluid) will apply to all container-fluid elements including those outside documentation pages. Consider making the first rule more specific (e.g., body.dark .container-fluid.docs) to avoid unintentionally styling non-documentation containers in dark mode.

Suggested change
body.dark .container-fluid {
body.dark .container-fluid.docs {

Copilot uses AI. Check for mistakes.
background-color: #1C1F24;
}

/* Dark mode for row in docs */
body.dark .container-fluid.docs .row {
background-color: #1C1F24;
}
Comment on lines +562 to 839
Copy link

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

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

The PR claims to add dark mode support, but the website already has a dark mode system via theme configuration (see themes/academic/data/themes/dark.toml with light = false). This PR only adds CSS styling for documentation pages when dark mode is active. It does not implement any new theme switching mechanism or prefers-color-scheme support as claimed in the description. The existing dark mode is controlled via the color_theme parameter in site configuration, not through a toggle or system preference detection.

Copilot uses AI. Check for mistakes.
4 changes: 3 additions & 1 deletion config/_default/config.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,9 @@ defaultContentLanguage = "en"
hasCJKLanguage = true # Set `true` for Chinese/Japanese/Korean languages.
defaultContentLanguageInSubdir = true

paginate = 10 # Number of items per page in paginated lists.
[pagination]
pagerSize = 10
Comment on lines +39 to +40
Copy link

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

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

This change from the deprecated "paginate" parameter to the new "pagination.pagerSize" configuration is unrelated to dark mode support. While this is a valid Hugo configuration update, it should be in a separate PR or mentioned in the PR description as an additional maintenance change.

Copilot uses AI. Check for mistakes.

enableEmoji = false
footnotereturnlinkcontents = "<sup>^</sup>"
ignoreFiles = ["\\.Rmd$", "\\.Rmarkdown$", "_files$", "_cache$"]
Expand Down
2 changes: 1 addition & 1 deletion content/en/blog/1.4 release-en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ date = 2021-08-31
lastmod = 2021-09-13
datemonth = "Sep"
dateyear = "2021"
dateday = 13
dateday = "13"

draft = false # Is this a draft? true/false
toc = true # Show table of contents? true/false
Expand Down
2 changes: 1 addition & 1 deletion content/en/blog/ING_case-en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ date = 2022-12-28
lastmod = 2022-12-28
datemonth = "Dec"
dateyear = "2022"
dateday = 28
dateday = "28"

draft = false # Is this a draft? true/false
toc = true # Show table of contents? true/false
Expand Down
2 changes: 1 addition & 1 deletion ...g/Meet Cloud Native Batch Computing with Volcano in AI & Big Data Scenarios.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ date = 2024-03-08
lastmod = 2024-03-08
datemonth = "Mar"
dateyear = "2024"
dateday = 08
dateday = "08"

draft = false # Is this a draft? true/false
toc = true # Show table of contents? true/false
Expand Down
2 changes: 1 addition & 1 deletion content/en/blog/Quick-Start-Volcano.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ date = 2019-03-28
lastmod = 2019-03-29
datemonth = "Mar"
dateyear = "2019"
dateday = 28
dateday = "28"

draft = false # Is this a draft? true/false
toc = true # Show table of contents? true/false
Expand Down
2 changes: 1 addition & 1 deletion content/en/blog/Volcano-1.10.0-release.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ date = 2024-09-29
lastmod = 2024-09-29
datemonth = "Sep"
dateyear = "2024"
dateday = 29
dateday = "29"

draft = false # Is this a draft? true/false
toc = true # Show table of contents? true/false
Expand Down
2 changes: 1 addition & 1 deletion content/en/blog/Volcano-1.11.0-release.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ date = 2025-02-07
lastmod = 2025-02-07
datemonth = "Feb"
dateyear = "2025"
dateday = 07
dateday = "07"

draft = false # Is this a draft? true/false
toc = true # Show table of contents? true/false
Expand Down
2 changes: 1 addition & 1 deletion content/en/blog/Volcano-1.12.0-release.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ date = 2025-06-12
lastmod = 2025-06-12
datemonth = "June"
dateyear = "2025"
dateday = 12
dateday = "12"

draft = false # Is this a draft? true/false
toc = true # Show table of contents? true/false
Expand Down
2 changes: 1 addition & 1 deletion content/en/blog/Volcano-1.13.0-release.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ date = 2025-09-29
lastmod = 2025-09-29
datemonth = "Sep"
dateyear = "2025"
dateday = 29
dateday = "29"

draft = false # Is this a draft? true/false
toc = true # Show table of contents? true/false
Expand Down
2 changes: 1 addition & 1 deletion content/en/blog/Volcano-1.7.0-release-en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ date = 2023-01-12
lastmod = 2023-01-12
datemonth = "Jan"
dateyear = "2023"
dateday = 12
dateday = "12"

draft = false # Is this a draft? true/false
toc = true # Show table of contents? true/false
Expand Down
2 changes: 1 addition & 1 deletion content/en/blog/Volcano-1.8.2-release.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ date = 2024-01-31
lastmod = 2024-01-31
datemonth = "Jan"
dateyear = "2024"
dateday = 31
dateday = "31"

draft = false # Is this a draft? true/false
toc = true # Show table of contents? true/false
Expand Down
Loading
Loading