docs: Add dark mode background and logo visibility fixes to pdoc docs

[Aaron ("AJ") Steers (aaronsteers)]

fix: Add dark mode background and logo visibility fixes to pdoc docs

Summary

Fixes two dark mode rendering issues in the Python CDK API documentation discovered after PR #804 merged:

1. Missing background color: Main content area had no background in dark mode (only sidebar was styled), making text hard to read
2. Logo visibility: The logo used dark blue text (logo-dark.png) which was nearly invisible on the dark background

Changes:

• theme.css: Added @media (prefers-color-scheme: dark) block with --pdoc-background: #212529 and dark mode color variables (based on pdoc's official dark-mode example)
• custom.css: Added logo swap using CSS content: url() to replace logo-dark.png with logo-light.png in dark mode

Dark mode detection: Automatic based on system/browser dark mode preference - no manual toggle.

Review & Testing Checklist for Human

• Visual testing in dark mode (CRITICAL): Enable system dark mode on your OS/browser and verify https://airbytehq.github.io/airbyte-python-cdk/ displays with:
  • Proper dark gray background (#212529) in main content area
  • Light-colored logo text (not dark blue) that's clearly visible
• Mobile testing: Test on mobile device (where issue was originally reported by AJ) to ensure both background and logo render correctly
• Light mode regression: Toggle back to light mode and confirm it still works correctly - logo should show dark text and background should be white
• Cross-browser check: Test in at least Chrome/Firefox to verify CSS content: url() works for logo swap

Test Plan

1. Enable dark mode on your system/browser settings
2. Navigate to https://airbytehq.github.io/airbyte-python-cdk/ (after deployment)
3. Verify dark background and light logo text
4. Toggle between light/dark mode to ensure smooth transitions
5. Test on mobile device (iOS/Android)

Notes

• This is purely CSS changes - no functional code impact
• Logo swap uses CSS content: url() which works in all modern browsers but may not work in very old browsers (acceptable trade-off for docs)
• Dark mode colors are from pdoc's official dark-mode example
• I verified the changes work by manually injecting dark mode CSS and confirmed screenshots with AJ, but couldn't test with actual system dark mode in my testing environment
• Issue originally reported by AJ Steers (Aaron ("AJ") Steers (@aaronsteers)) on mobile where dark mode text was unreadable
• Same fix applied to PyAirbyte in PR docs: Add inline description to $parameters in declarative component schema #834
• Requested by AJ Steers (Aaron ("AJ") Steers (@aaronsteers)) in Devin session: https://app.devin.ai/sessions/2212dc6e64a6496fadf6f3f18f4250c1

Summary by CodeRabbit

• New Features
  • Added dark mode support with system preference detection. Theme includes optimized color palette for text, links, code, navigation, and UI elements. Logo automatically adapts to display a light variant in dark contexts for improved visibility.

[devin-ai-integration]

Original prompt from AJ Steers

@Devin - in PyAirbyte, can you see if you are able to neatly import styling and branding elements from the main airbyte docs site into the auto generated pdoc docs there?
Thread URL: https://airbytehq-team.slack.com/archives/D089P0UPVT4/p1760991675003959?thread_ts=1760991675.003959

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[Copilot]

Pull Request Overview

This PR fixes two dark mode rendering issues in the Python CDK API documentation: missing background color in the main content area and poor logo visibility due to dark-colored logo text on dark backgrounds.

Key Changes:

• Added dark mode CSS variables to theme.css for proper content background and text colors
• Implemented logo swapping in custom.css to display light-colored logo in dark mode

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
docs/templates/theme.css	Added dark mode media query with background color and pdoc-specific CSS variables for improved readability
docs/templates/custom.css	Added dark mode logo swap to replace dark logo with light version for better visibility

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[github-actions]

👋 Greetings, Airbyte Team Member!

Here are some helpful tips and reminders for your convenience.

Testing This CDK Version

You can test this version of the CDK using the following:

# Run the CLI from this branch:
uvx 'git+https://github.com/airbytehq/airbyte-python-cdk.git@devin/1761006917-fix-dark-mode-docs#egg=airbyte-python-cdk[dev]' --help

# Update a connector to use the CDK from this branch ref:
cd airbyte-integrations/connectors/source-example
poe use-cdk-branch devin/1761006917-fix-dark-mode-docs

Helpful Resources

• CDK API Reference

PR Slash Commands

Airbyte Maintainers can execute the following slash commands on your PR:

• /autofix - Fixes most formatting and linting issues
• /poetry-lock - Updates poetry.lock file
• /test - Runs connector tests with the updated CDK
• /poe build - Regenerate git-committed build artifacts, such as the pydantic models which are generated from the manifest JSON schema in YAML.
• /poe <command> - Runs any poe command in the CDK environment

📝 Edit this welcome message.

[coderabbitai]

📝 Walkthrough

Walkthrough

Documentation template CSS files updated to support dark mode styling. A media query for dark color scheme preferences is added to swap the logo and override CSS color variables, maintaining light theme for existing contexts.

Changes

Cohort / File(s)	Summary
Dark mode logo swap docs/templates/custom.css	Adds @media (prefers-color-scheme: dark) rule to display light logo variant in dark mode contexts
Dark mode theme variables docs/templates/theme.css	Introduces dark mode media query block overriding :root and .pdoc CSS variables including text, link, code, accent colors, and navigation styling

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• airbytehq/airbyte-python-cdk#804: Implements overlapping dark mode CSS changes across the same documentation template files.

Suggested labels

docs

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Title Check	✅ Passed	The PR title "docs: Add dark mode background and logo visibility fixes to pdoc docs" directly aligns with the changeset. The title specifically calls out the two primary issues being addressed: dark mode background color (implemented in theme.css) and logo visibility in dark mode (implemented in custom.css). The title is clear, concise, and avoids vague language or noise. It provides sufficient specificity that a teammate scanning history would immediately understand this PR addresses dark mode rendering issues in the documentation without needing to read the full details.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch devin/1761006917-fix-dark-mode-docs

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}