Add Dark Mode Support for Documentation Pages#470
Add Dark Mode Support for Documentation Pages#470Ansita20 wants to merge 1 commit intovolcano-sh:masterfrom
Conversation
Signed-off-by: ansita20 <ansitasingh20@gmail.com>
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
|
Welcome @Ansita20! It looks like this is your first PR to volcano-sh/website 🎉 |
volcano-sh-bot
added
the
size/L
Summary of ChangesHello @Ansita20, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request primarily focuses on integrating a comprehensive dark mode theme into the documentation pages, significantly enhancing the user experience and accessibility, particularly for prolonged reading sessions. It establishes a consistent dark color system across various UI elements. Additionally, the PR includes minor but important updates to the site's configuration for pagination and standardizes date metadata in blog posts, alongside a small change to how external scripts are loaded in the header. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a dark mode for the documentation pages, which is a great enhancement for user experience. The implementation is comprehensive, covering various UI components. I've included a few suggestions to improve the maintainability of the new CSS. Specifically, I recommend using CSS custom properties for the color palette to avoid repetition and make future theme adjustments easier. I also noticed that some alert styles could be consolidated. Additionally, a check to disable Google Analytics on the local development server was removed, which I suggest re-adding to prevent skewing analytics data. The other changes in configuration and markdown files look good.
| /************************************************* | ||
| * 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 | ||
| **************************************************/ |
There was a problem hiding this comment.
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;
}| 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; | ||
| color: #EAEAEA; | ||
| } |
There was a problem hiding this comment.
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;
}There was a problem hiding this comment.
Pull request overview
This PR claims to add dark mode support for documentation pages but actually only adds CSS styling for an existing dark mode system. The website already has a theme-based dark mode (controlled via color_theme configuration parameter), and this PR extends that with documentation-specific dark mode styles. The PR description is misleading as it suggests implementing new dark mode functionality with theme switching and prefers-color-scheme support, but no such mechanisms are added.
The PR also includes several unrelated changes: dateday formatting updates for 50+ blog post files, pagination configuration updates, Hugo generator meta tag changes, and removal of analytics development server checks.
Changes:
- Added 289 lines of CSS for dark mode documentation styling (sidebar, content, tables, code blocks, alerts, etc.)
- Converted dateday values from integers to strings in 53 blog post files (both English and Chinese)
- Updated pagination configuration from deprecated
paginatetopagination.pagerSize - Modified Hugo generator meta tag and removed analytics development server check
Reviewed changes
Copilot reviewed 52 out of 52 changed files in this pull request and generated 9 comments.
| File | Description |
|---|---|
| assets/css/custom.css | Added comprehensive dark mode CSS styling for documentation components using body.dark selector |
| layouts/partials/header.html | Added duplicate generator meta tag and removed IsServer check for analytics |
| config/_default/config.toml | Updated pagination configuration to newer format |
| content//blog/.md (53 files) | Converted dateday from integer to string format |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| body.dark .docs-content { | ||
| background-color: #1C1F24; | ||
| color: #EAEAEA; | ||
| } | ||
|
|
||
| body.dark .docs-article-container { | ||
| background-color: #1C1F24; | ||
| } | ||
|
|
There was a problem hiding this comment.
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.
| 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; | |
| } |
| datemonth = "Jan" | ||
| dateyear = "2026" | ||
| dateday = 6 | ||
| dateday = "6" |
There was a problem hiding this comment.
This blog post has a future date (2026-01-06) which is only a few days in the past from the current date (February 3, 2026). While technically not a future date anymore, this suggests the PR may have been sitting around for a while or the dates were set optimistically. This change is unrelated to dark mode support and should be in a separate PR or the PR description should mention these date formatting updates.
| [pagination] | ||
| pagerSize = 10 |
There was a problem hiding this comment.
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.
| <meta name="generator" content="Source Themes Academic {{ .Site.Data.academic.version }}"> | ||
| {{ .Hugo.Generator }} | ||
| <meta name="generator" content="Hugo {{ hugo.Version }}"> |
There was a problem hiding this comment.
The Hugo generator meta tag is now duplicated. Line 8 has the old Source Themes Academic version generator, and line 9 adds a new Hugo version generator. This results in two meta generator tags on the same page. Consider removing line 8 to avoid duplication, or update line 8 to include both pieces of information in a single tag.
| datemonth = "Dec" | ||
| dateyear = "2020" | ||
| dateday = 24 | ||
| dateday = "24" |
There was a problem hiding this comment.
These dateday value changes from integer to string format (e.g., 24 to "24") are unrelated to dark mode support. While standardizing the format is a valid maintenance task, this bulk change affects 53+ blog post files and should either be in a separate PR or clearly mentioned in the PR description. This makes the PR harder to review as it mixes unrelated changes.
| 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; |
There was a problem hiding this comment.
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.
| 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 */ |
| /* 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; | ||
| } | ||
|
|
||
| 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; | ||
| 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 { | ||
| background-color: #1C1F24; | ||
| } | ||
|
|
||
| /* Dark mode for row in docs */ | ||
| body.dark .container-fluid.docs .row { | ||
| background-color: #1C1F24; | ||
| } No newline at end of file |
There was a problem hiding this comment.
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.
| } | ||
|
|
||
| /* Dark mode for documentation container fluid */ | ||
| body.dark .container-fluid { |
There was a problem hiding this comment.
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.
| body.dark .container-fluid { | |
| body.dark .container-fluid.docs { |
2 participants
Title
Add Dark Mode Support for Documentation Pages
Description
This PR introduces dark mode support for the documentation pages to improve readability, accessibility, and user experience. The dark theme follows a consistent color system and maintains sufficient contrast for better usability in low-light environments.
Changes Made
1. Added Dark Mode Theme Styles
2. Updated Documentation UI Components
3. Theme Switching Mechanism
prefers-color-scheme(system preference)4. Improved Accessibility
Motivation
Many users prefer dark mode when reading documentation, especially during long development sessions. Adding dark mode aligns the documentation with modern developer tools and improves overall usability.
Related Issue
Fixes: #469
Impact
Checklist