fix(site): official website adapts to the dark mode. #2963
Conversation
WalkthroughThis pull request updates various component and theme styles by replacing fixed color values and font properties with CSS variables. The changes affect the contributor’s title style, tooltip implementation in the demo, and settings icon styling, while also introducing new theme variables related to tooltip text and dark mode support. The diff simplifies tooltip logic by switching to a directive and ensures that color styling remains dynamic and consistent across components. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant I as <i> Element (with v-auto-tip)
participant D as v-auto-tip Directive
participant T as Tooltip Popup
U->>I: Hover over icon
I->>D: Trigger tooltip logic
D->>T: Request tooltip display with content
T-->>U: Render tooltip on screen
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/components-doc/components/demo.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. examples/sites/src/views/components-doc/components/contributor.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. examples/sites/src/views/components-doc/components/float-settings.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 ignored due to path filters (2)
📒 Files selected for processing (6)
🔇 Additional comments (13)
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主要更新了网站的样式以适应暗模式。具体包括修复源码复制图标的颜色、回到顶部按钮的颜色，并为tooltip新增了一个公共变量。这些更改旨在改善用户在暗模式下的视觉体验。 Changes
|
| <i class="i-ti-playground ml8 h:c-success ti-w16 ti-h16 ti-cur-hand" @click="openPlayground(demo)" /> | ||
| </tiny-tooltip> | ||
| <i | ||
| v-auto-tip="{ content: state.copyTip, effect: 'light', always: true }" |
There was a problem hiding this comment.
The v-auto-tip directive is used here to replace the previous tiny-tooltip component. Ensure that this directive is correctly implemented and tested, as it handles tooltip functionality differently.
WalkthroughThis PR mainly updates the style of the website to suit dark mode. Specifically, it includes fixing the color of the source code copy icon, returning to the top button color, and adding a public variable to the tooltip. These changes are designed to improve the user's visual experience in dark mode. Changes
|
|
[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 |
PR
fix(site): 修复源码复制图标的颜色
修复图标颜色
修复回到顶部的颜色
tooltip新增一个公共变量
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
Chores