Skip to content

fix(site): document search box adapts to the dark theme. #3046

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Merged
merged 3 commits into from
Mar 5, 2025

Conversation

shenjunjian
Copy link
Collaborator

@shenjunjian shenjunjian commented Mar 5, 2025

PR

1、 文档搜索框适配暗色主题
2、去掉charts-doc 的基本文档页面滚动时,出现的颜色转换
3、所有的.dark选择器改为: html.dark, 避免dark类的无意识污染

PR Checklist

Please check if your PR fulfills the following requirements:

  • The commit message follows our Commit Message Guidelines
  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

Summary by CodeRabbit

  • Style

    • Enhanced dark mode appearance across various pages and components for a more consistent and refined look.
    • Updated styles for search, layout, and content cards to ensure improved readability and visual alignment.
    • Enabled automatic scrolling for horizontal content containers to improve usability.
  • Chores

    • Fixed minor syntax issues to ensure smoother CSS behavior.

Copy link

coderabbitai bot commented Mar 5, 2025

Walkthrough

This pull request updates various CSS files and Vue component styles to modify how dark mode is applied throughout the project. The selectors for dark mode styling have been updated from using the generic .dark prefix to a more specific html.dark in multiple files. In addition, new CSS custom properties for the DocSearch component have been added, a new style rule (overflow: auto) has been introduced in one Vue component, and a missing semicolon in a CSS variable declaration has been fixed.

Changes

File(s) Change Summary
examples/.../assets/custom-block.less, examples/.../assets/custom-markdown.css, examples/.../views/components-doc/{api-docs.vue, demo.vue, float-settings.vue, header.vue}, examples/.../views/layout/layout.vue, examples/.../views/overview.vue Updated dark mode selectors from .dark (or variants) to html.dark (and similar syntax changes) for increased specificity in applying dark theme styles.
examples/.../style.css Added a new CSS section under html.dark with custom properties for the DocSearch component in dark mode.
examples/.../views/components-doc/common.vue Introduced overflow: auto; to the .flex-horizontal class for automatic scroll handling.
packages/.../checkbox/vars.less Inserted a missing semicolon in the CSS variable declaration for --tv-Checkbox-checked-disabled-border-color to ensure proper syntax.

Possibly related PRs

Suggested labels

enhancement

Suggested reviewers

  • zzcr

Poem

Hop along these lines of code,
In the dark mode abode,
Now html.dark leads the way,
Making our styles bright by day.
With a semicolon tap and a scroll so true,
This rabbit cheers for changes new! 🐰

Warning

There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

examples/sites/src/assets/custom-markdown.css

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "eslint-plugin-vue".

(The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-vue@latest --save-dev

The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

examples/sites/src/views/components-doc/common.vue

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "eslint-plugin-vue".

(The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-vue@latest --save-dev

The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

examples/sites/src/style.css

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "eslint-plugin-vue".

(The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-vue@latest --save-dev

The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

  • 6 others

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0c09378 and 0d18a7b.

📒 Files selected for processing (11)
  • examples/sites/src/assets/custom-block.less (1 hunks)
  • examples/sites/src/assets/custom-markdown.css (2 hunks)
  • examples/sites/src/style.css (1 hunks)
  • examples/sites/src/views/components-doc/common.vue (1 hunks)
  • examples/sites/src/views/components-doc/components/api-docs.vue (2 hunks)
  • examples/sites/src/views/components-doc/components/demo.vue (1 hunks)
  • examples/sites/src/views/components-doc/components/float-settings.vue (2 hunks)
  • examples/sites/src/views/components-doc/components/header.vue (1 hunks)
  • examples/sites/src/views/layout/layout.vue (1 hunks)
  • examples/sites/src/views/overview.vue (2 hunks)
  • packages/theme/src/checkbox/vars.less (1 hunks)
✅ Files skipped from review due to trivial changes (4)
  • examples/sites/src/views/components-doc/common.vue
  • packages/theme/src/checkbox/vars.less
  • examples/sites/src/views/overview.vue
  • examples/sites/src/views/components-doc/components/demo.vue
🔇 Additional comments (8)
examples/sites/src/views/components-doc/components/header.vue (1)

73-73: Good specificity improvement for dark mode selector.

Changing from .dark .docs-header to html.dark .docs-header improves CSS specificity by ensuring dark mode styles only apply when the html element has the dark class, rather than any element with a dark class. This helps prevent unintentional styling conflicts.

examples/sites/src/views/layout/layout.vue (1)

397-397: Good selector specificity improvement for dark mode.

Changing from .dark #layoutSider to html.dark #layoutSider ensures dark mode styles are only applied when the html element has the dark class. This is consistent with other changes in the PR and helps prevent styling conflicts.

examples/sites/src/views/components-doc/components/api-docs.vue (1)

231-237: Good refactoring of dark mode styles with improved specificity.

Moving the .api-groupname-tag dark mode styles to a separate style block with the html.dark selector improves specificity and matches the pattern used throughout the codebase. This change helps maintain consistent dark mode styling application across the site.

examples/sites/src/views/components-doc/components/float-settings.vue (2)

278-280: Good dark mode selector specificity improvement.

Changing from .dark .settings-btn to html.dark .settings-btn ensures dark mode styles only apply when the html element has the dark class, preventing potential style conflicts with other elements that might have a dark class.


366-368: Good consistent dark mode selector improvement.

The update from .dark .tiny-popover.tiny-popper.theme-settings-popover to html.dark .tiny-popover.tiny-popper.theme-settings-popover maintains consistency with other dark mode style changes throughout the PR, ensuring proper dark theme application.

examples/sites/src/assets/custom-markdown.css (1)

7-51: Updated Dark Mode Selector Specificity

The dark theme styles for the .markdown-body are now correctly scoped using html.dark instead of just .dark. This improves specificity and prevents unintentional styling conflicts.

examples/sites/src/assets/custom-block.less (1)

87-109: Consistent Dark Mode Styling for Custom Blocks

The dark theme overrides for tip, info, warning, and danger blocks are now properly scoped under html.dark, which enhances consistency across the codebase. The new variable values appear appropriate for dark mode.

examples/sites/src/style.css (1)

77-95: Robust DocSearch Dark Mode Configuration

The new block defining DocSearch dark mode CSS custom properties within html.dark is well implemented. All custom properties for text color, backgrounds, shadows, gradients, and other visual elements are clearly defined, which should ensure a cohesive dark mode experience for the DocSearch component.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions github-actions bot added the bug Something isn't working label Mar 5, 2025
Copy link

Walkthrough

此PR主要更新了文档搜索框以适应暗色主题,并修复了charts-doc页面滚动时的颜色转换问题。此外,将所有的.dark选择器替换为html.dark,以避免dark类的无意识污染。

Changes

文件 概要
examples/sites/src/assets/custom-block.less, examples/sites/src/assets/custom-markdown.css, examples/sites/src/views/components-doc/components/api-docs.vue, examples/sites/src/views/components-doc/components/demo.vue, examples/sites/src/views/components-doc/components/float-settings.vue, examples/sites/src/views/components-doc/components/header.vue, examples/sites/src/views/layout/layout.vue, examples/sites/src/views/overview.vue .dark选择器替换为html.dark以适应暗色主题
examples/sites/src/style.css 添加了docsearch的暗色主题样式
examples/sites/src/views/components-doc/common.vue 增加了overflow: auto;样式
packages/theme/src/checkbox/vars.less 修复了缺少的分号

@@ -513,6 +513,7 @@ defineExpose({ loadPage })
justify-content: space-between;
align-items: flex-start;
column-gap: 16px;
overflow: auto;

Choose a reason for hiding this comment

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

Adding overflow: auto; might cause unexpected scrollbars in some browsers. Ensure this change is intended and tested across different browsers.

Copy link

github-actions bot commented Mar 5, 2025

[e2e-test-warn]
The component to be tested is missing.

The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug".

Please make sure you've read our contributing guide

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.


Walkthrough

This PR mainly updates the document search box to fit dark themes and fixes color conversion issues when charts-doc pages are scrolling. In addition, replace all .dark selectors with html.dark to avoid unconscious pollution of dark class.

Changes

Documents Summary
examples/sites/src/assets/custom-block.less, examples/sites/src/assets/custom-markdown.css, examples/sites/src/views/components-doc/components/api-doc.vue, examples/sites/src/views/components-doc/components/demo.vue, examples/sites/src/views/components-doc/components/demo.vue, examples/sites/src/views/components-doc/components/float-settings.vue, examples/sites/src/views/components-doc/components/header.vue, examples/sites/src/views/layout/layout.vue, examples/sites/src/views/overview.vue Replace the .dark selector with html.dark to suit dark themes
examples/sites/src/style.css Added dark theme style of docsearch
examples/sites/src/views/components-doc/common.vue Added overflow: auto; style
packages/theme/src/checkbox/vars.less Fixed missing semicolons

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants