Skip to content

Fix documentation viewer dark/light mode styling issues #974

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

Draft
Copilot wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

Fix documentation viewer dark/light mode styling issues #974

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ad0fe3f
Initial plan
Copilot Sep 13, 2025
6c0b7c8
Analyze documentation viewer dark/light mode styling issue
Copilot Sep 13, 2025
4b00afd
Fix documentation viewer light/dark mode styling issues
Copilot Sep 13, 2025
42a9ea9
Merge upstream changes and resolve conflicts
Copilot Sep 15, 2025
e22e480
Auto-update service table and question ID schema
actions-user Sep 15, 2025
5beba12
Merge branch 'main' into copilot/fix-973
Copilot Sep 19, 2025
41c3813
Auto-update service table and question ID schema
actions-user Sep 20, 2025
68807e3
Merge branch 'main' into copilot/fix-973
litlfred Oct 7, 2025
9df86b2
Auto-update service table and question ID schema
actions-user Oct 7, 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
13 changes: 11 additions & 2 deletions src/components/DAKSelection.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,16 +109,25 @@ body.theme-light .dak-selection {
}

.documentation-info .doc-link {
color: #90caf9;
color: var(--who-blue-light);
text-decoration: none;
font-weight: 500;
}

.documentation-info .doc-link:hover {
color: white;
color: var(--who-text-primary);
text-decoration: underline;
}

/* Dark theme adjustments for doc links */
body.theme-dark .documentation-info .doc-link {
color: var(--who-light-blue);
}

body.theme-dark .documentation-info .doc-link:hover {
color: var(--who-text-primary);
}

.loading {
text-align: center;
padding: 3rem;
Expand Down
71 changes: 60 additions & 11 deletions src/components/DocumentationViewer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -440,6 +440,11 @@ body.theme-dark .doc-article p {
margin-bottom: 0.25rem;
}

/* Dark theme list adjustments */
body.theme-dark .doc-article li {
color: var(--who-text-secondary);
}

.doc-article code {
background: rgba(255, 255, 255, 0.2);
padding: 0.125rem 0.25rem;
Expand All @@ -458,16 +463,38 @@ body.theme-dark .doc-article p {
border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Dark theme code adjustments */
body.theme-dark .doc-article code {
background: var(--who-secondary-bg);
color: var(--who-text-primary);
border: 1px solid var(--who-border-color);
}

body.theme-dark .doc-article pre {
background: var(--who-secondary-bg);
border: 1px solid var(--who-border-color);
color: var(--who-text-primary);
}

.doc-article a {
color: #90caf9;
color: var(--who-blue-light);
text-decoration: none;
}

.doc-article a:hover {
color: white;
color: var(--who-text-on-primary);
text-decoration: underline;
}

/* Dark theme link adjustments */
body.theme-dark .doc-article a {
color: var(--who-light-blue);
}

body.theme-dark .doc-article a:hover {
color: var(--who-text-primary);
}

.doc-article img {
max-width: 100%;
height: auto;
Expand All @@ -480,14 +507,15 @@ body.theme-dark .doc-article p {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
box-shadow: 0 1px 3px var(--who-shadow-light);
border-radius: 4px;
overflow: hidden;
border: 1px solid var(--who-border-color);
}

.doc-table th {
background: #005eb8;
color: white;
background: var(--who-blue);
color: var(--who-text-on-primary);
padding: 0.75rem 1rem;
text-align: left;
font-weight: 600;
Expand All @@ -496,18 +524,39 @@ body.theme-dark .doc-article p {

.doc-table td {
padding: 0.75rem 1rem;
border-bottom: 1px solid #e9ecef;
color: #333;
border-bottom: 1px solid var(--who-border-color);
color: var(--who-text-primary);
font-size: 0.9rem;
vertical-align: top;
background: var(--who-card-bg);
}

.doc-table tr:nth-child(even) td {
background: var(--who-hover-bg);
}

.doc-table tr:hover td {
background: var(--who-selected-bg);
}

.doc-table tr:nth-child(even) {
background: #f8f9fa;
/* Dark theme table adjustments */
body.theme-dark .doc-table th {
background: var(--who-blue);
color: var(--who-text-on-primary);
}

.doc-table tr:hover {
background: #e3f2fd;
body.theme-dark .doc-table td {
background: var(--who-card-bg);
color: var(--who-text-primary);
border-bottom-color: var(--who-border-color);
}

body.theme-dark .doc-table tr:nth-child(even) td {
background: var(--who-hover-bg);
}

body.theme-dark .doc-table tr:hover td {
background: var(--who-selected-bg);
}

.loading, .error-state {
Expand Down
1 change: 1 addition & 0 deletions src/components/DocumentationViewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { PageLayout } from './framework';
import documentationService from '../services/documentationService';
import bookmarkService from '../services/bookmarkService';
import githubService from '../services/githubService';
import './DocumentationViewer.css';

const DocumentationViewer = () => {
const { docId } = useParams();
Expand Down