fix(site): official website adapts to the dark mode. #2956
Conversation
WalkthroughThe pull request updates the theming approach across various assets and components. CSS selectors are modified, replacing legacy classes (e.g., Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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
examples/sites/src/views/docs/docs.vueOops! 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: 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. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Walkthrough此PR修改了官网的样式以适配暗色模式，涉及多个样式文件的调整和主题切换逻辑的更新。主要是通过引入新的CSS变量和修改现有样式来实现暗色模式的适配。 Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| @@ -1,4 +1,4 @@ | |||
| import { reactive, computed, watchEffect } from 'vue' | |||
| import { reactive, computed } from 'vue' | |||
There was a problem hiding this comment.
The watchEffect function has been commented out. Ensure that this change does not affect the theme switching functionality if it was previously required for dynamic updates.
|
[e2e-test-warn] 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 |
WalkthroughThis PR has modified the style of the official website to adapt to dark mode, involving adjustments to multiple style files and updates to the theme switching logic. The main purpose is to implement dark mode adaptation by introducing new CSS variables and modifying existing styles. Changes
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
examples/sites/src/style.css (1)
4-5: Minor whitespace inconsistency.The closing brace has inconsistent spacing compared to the rest of the file.
- font-size: 16px; - } + font-size: 16px; +}examples/sites/src/views/layout/layout.vue (1)
405-407: Good sidebar border styling for dark mode.The addition of a dark border for the sidebar in dark mode enhances visual separation. Consider using a CSS variable instead of a hardcoded color.
.dark #layoutSider { - border-right: 1px solid #1a1a1a; // 没有常用变量 + border-right: 1px solid var(--tv-border-color-dark, #1a1a1a); }examples/sites/src/views/components-doc/components/demo.vue (1)
350-352: Consider using CSS variables for hardcoded colors.While the global dark mode selector works correctly, it uses a hardcoded color value (
#1a1a1a) instead of a CSS variable like the other changes.:global(.dark .pc-demo-container.pc-demo-container) { - background-color: #1a1a1a; + background-color: var(--tv-color-bg-dark); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
examples/sites/src/assets/custom-block.less(2 hunks)examples/sites/src/assets/custom-markdown.css(3 hunks)examples/sites/src/assets/index.less(0 hunks)examples/sites/src/main.js(1 hunks)examples/sites/src/style.css(1 hunks)examples/sites/src/tools/appData.js(1 hunks)examples/sites/src/views/components-doc/components/api-docs.vue(3 hunks)examples/sites/src/views/components-doc/components/demo.vue(4 hunks)examples/sites/src/views/components-doc/components/float-settings.vue(1 hunks)examples/sites/src/views/components-doc/components/header.vue(1 hunks)examples/sites/src/views/docs/docs.vue(1 hunks)examples/sites/src/views/layout/layout.vue(1 hunks)examples/sites/src/views/overview.vue(6 hunks)packages/theme/src/button/index.less(0 hunks)
💤 Files with no reviewable changes (2)
- packages/theme/src/button/index.less
- examples/sites/src/assets/index.less
✅ Files skipped from review due to trivial changes (1)
- examples/sites/src/main.js
🔇 Additional comments (27)
examples/sites/src/views/components-doc/components/header.vue (1)
36-38: Good dark mode implementation for the header component.The addition of a dark background color for the
.docs-headerin dark mode complements the existing light background, providing proper contrast for users in dark mode.examples/sites/src/views/docs/docs.vue (2)
70-72: Good dark mode background for markdown content.Setting a black background for markdown content in dark mode provides proper contrast with the content.
74-81: Appropriate code block styling for dark mode.The changes properly adjust code block styling for dark mode by:
- Removing text shadow (which would be hard to read on dark backgrounds)
- Using a CSS variable for text color
- Making operator tokens have a transparent background
These adjustments will ensure code remains readable in dark mode.
examples/sites/src/style.css (1)
6-11: Good application-level dark mode implementation.Setting appropriate background colors at the app level is essential for a proper dark mode implementation. The use of
#ffffor light mode and#000for dark mode ensures consistent backgrounds throughout the application.examples/sites/src/assets/custom-block.less (2)
64-86: Good improvement in light theme selector implementation.Changing from
.theme-lighttobodyas the base selector is a solid approach for the default light theme. This makes the light theme the default and doesn't require an explicit class to be added to the body element.
87-109: Clean implementation of dark mode styles.The change from
.theme-darkto.darkaligns with modern dark mode implementation practices. The color variables are well-defined with appropriate contrasts for dark mode readability.examples/sites/src/tools/appData.js (1)
1-1: Verify theme switching still works properly.The
watchEffectimport has been removed from the Vue imports. This likely means the automatic theme class application on theme changes has been removed as well.#!/bin/bash # Check if there are other files handling theme switching rg -l "toggleTheme|theme.*switch" --type js --type vueexamples/sites/src/views/components-doc/components/float-settings.vue (2)
278-280: Good addition of dark mode styles for settings button.Adding specific styles for
.dark .settings-btnensures proper contrast and visibility when the site is in dark mode.
282-317: Improved theming with CSS variables.Replacing hardcoded colors with CSS variables (
var(--tv-color-border)) improves maintainability and consistency across themes. The hover states and spacing are well-structured.examples/sites/src/assets/custom-markdown.css (3)
6-7: Clear documentation and proper dark mode implementation.The added comment explains the color source, and changing from
.theme-dark .markdown-bodyto.dark .markdown-bodyensures consistency with the rest of the dark mode implementation.
42-42: Improved dark mode background color.Changing the canvas default color from
#0d1117to#1a1a1aprovides a slightly lighter dark mode background, which can improve readability while still reducing eye strain in low-light conditions.
53-53: Consistent light theme selector.Changing from
.theme-light .markdown-bodytobody .markdown-bodymakes the light theme the default, consistent with changes in other files.examples/sites/src/views/components-doc/components/api-docs.vue (4)
7-12: Good semantic naming for better dark mode support.The addition of descriptive class names like
api-groupnameandapi-groupname-tagimproves the semantic structure while enabling proper dark mode styling.
16-18: Clear semantic naming with API key headers.Adding the
api-groupname-keyclass to the API key heading ensures consistent styling in both light and dark modes.
176-191: Well-implemented theming with CSS variables.The CSS classes effectively use CSS variables for theming, with appropriate selectors for both light and dark modes. The
.darkselector properly overrides styles for dark mode.
232-233: Good use of CSS variables for code element styling.Replacing hardcoded colors with CSS variables (
--tv-color-text-secondaryand--tv-color-bg-header) enables proper dark mode support for code elements.examples/sites/src/views/overview.vue (7)
4-7: Enhanced semantic structure with descriptive class names.Adding the
overview-titleclass improves semantic meaning while enabling proper theming support.
9-11: Improved semantic naming for description element.The
overview-descclass provides better semantics and enables consistent dark mode styling.
31-33: Clear semantic structure for group names.Adding the
overview-groupnameclass enhances the semantic structure while enabling proper dark mode support.
50-53: Improved component name styling with semantic class.The
overview-componentnameclass provides clear semantic meaning and enables consistent theming across modes.
174-181: Well-structured CSS variables for text colors.The CSS implementation properly uses variables for text colors, ensuring consistent styling across light and dark modes. The selector structure follows best practices for theming.
215-219: Good hover effect for dark mode.The special hover effect for dark mode creates a subtle visual distinction using appropriate shadow opacity values.
230-232: Proper background color for dark mode cards.Setting the background color for dark mode cards ensures proper contrast and visibility in dark mode.
examples/sites/src/views/components-doc/components/demo.vue (4)
51-51: Simplified class structure for markdown component.Removing the
markdown-bodyclass and using onlydemo-descstreamlines the styling hierarchy while maintaining dark mode support.
306-307: Good use of CSS variables for code background.Replacing the hardcoded background color with
var(--tv-color-bg-header)enables proper dark mode styling for code elements.
356-358: Well-implemented variable-based theming.Using CSS variables for text and background colors ensures consistent styling across light and dark modes.
372-373: Good use of CSS variables for title color.Replacing the hardcoded color with
var(--tv-color-text)enables proper dark mode styling for demo titles.
PR
官网适配暗色模式
以下2处，待组件的暗色适配 ------ Tabs , Grid
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
Style
New Features
Refactor