feat(site): the official website adds the function of dynamically switching between light and dark themes #2911
Conversation
…tching between light and dark themes
WalkthroughThis pull request adds a new dependency to support enhanced theme functionality and updates multiple Vue components. The changes include incorporating the Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant L as Layout Component
participant T as Theme Handler (@vueuse/core)
U->>L: Clicks dark mode toggle button
L->>T: Calls toggleDark() to update theme state
T-->>L: Returns updated isDark value
L->>U: Renders view with updated theme (dark/light)
Possibly related PRs
Suggested labels
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/layout/layout.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. 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 (
|
WalkthroughThis pull request introduces a feature that allows the official website to dynamically switch between light and dark themes. The changes include updates to the layout and style files to support theme toggling. Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| <div class="content-layout ti-fi-1" :has-sider="!isFrame"> | ||
| <div id="layoutSider" class="layout-sider" :class="{ 'saas-border': templateModeState.isSaas }" v-if="!isFrame"> | ||
| <div style="padding: 10px 0; text-align: center"> | ||
| <tiny-button :reset-time="0" type="info" @click="toggleDark()">{{ isDark ? 'dark' : 'light' }}</tiny-button> |
There was a problem hiding this comment.
Ensure that the toggleDark() function is correctly handling the theme switch to avoid any potential UI inconsistencies.
|
[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 |
![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 (2)
examples/sites/src/views/components-doc/components/demo.vue (1)
358-360: Consider using a softer background color for dark theme.Pure black (#000) backgrounds can be harsh on the eyes. Consider using a softer dark color like #1a1a1a or #121212 for better user experience.
:global(html.dark .pc-demo-container) { - background: #000; + background: #121212; }examples/sites/src/views/layout/layout.vue (1)
5-7: Consider improving the toggle button's accessibility.While the implementation works, the button could benefit from better accessibility.
Apply this diff to enhance the user experience:
-<div style="padding: 10px 0; text-align: center"> - <tiny-button :reset-time="0" type="info" @click="toggleDark()">{{ isDark ? 'dark' : 'light' }}</tiny-button> +<div style="padding: 10px 0; text-align: center"> + <tiny-button + :reset-time="0" + type="info" + @click="toggleDark()" + :aria-label="`Switch to ${isDark ? 'light' : 'dark'} theme`" + :title="`Switch to ${isDark ? 'light' : 'dark'} theme`" + > + {{ isDark ? 'dark' : 'light' }} + </tiny-button> +</div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
examples/sites/package.json(1 hunks)examples/sites/src/views/components-doc/components/demo.vue(1 hunks)examples/sites/src/views/layout/layout.vue(4 hunks)packages/theme/src/base/dark-theme.less(1 hunks)packages/theme/src/base/index.less(1 hunks)
🔇 Additional comments (8)
examples/sites/src/views/components-doc/components/demo.vue (3)
32-36: LGTM! Improved user feedback through dynamic tooltips and icons.The dynamic tooltip content and icon classes provide clear visual feedback about the code visibility state.
126-126: LGTM! Proper theme integration with playground functionality.The theme integration is well-implemented, ensuring the playground opens with the correct theme context.
Also applies to: 252-252
358-358: LGTM! Simplified dark theme selector.The selector change from
dark-themetodarkaligns with standard dark theme implementations.examples/sites/package.json (1)
53-53:✅ Verification successful
Verify the compatibility of @vueuse/core version.
Let's check if version 12.7.0 is the latest stable version and verify its compatibility with the project's Vue version (3.4.31).
🌐 Web query:
What is the latest stable version of @vueuse/core and its Vue compatibility requirements?💡 Result:
The latest stable version of
@vueuse/coreis v12.7.0 (released 18 hours before February 17, 2025)[7]. Its compatibility requirements are:Vue Version Support
- Vue 3.x: Fully supported starting from v12.0+[4][8]
- Vue 2.x: Not supported in v12+ - requires
@vueuse/core@11.xinstead[4][5][9]Key Compatibility Details
Vue 3 Requirements
- Requires Vue.js ≥3.x[2][8]
- Requires Composition API (native in Vue 3)[5]
- Compatible with Nuxt 3 via
@vueuse/nuxtmodule[10]Vue 2 Limitations
- Final supported version:
@vueuse/core@11.x[4][9]- Requires
@vue/composition-apipolyfill[5]- Officially deprecated since Vue 2 reached EOL on December 31, 2023[9]
Installation Requirements
# For Vue 3 npm install @vueuse/core@latest # For legacy Vue 2 npm install @vueuse/core@11.x @vue/composition-apiThe library follows semantic versioning with weekly canary releases from
mainbranch[1][7]. TypeScript ≥4.4 is recommended but optional[2][8].Citations:
- 1: https://vuejs.org/about/releases
- 2: https://app.studyraid.com/en/read/11889/378521/installation-methods-and-requirements
- 3: https://bootstrap-vue.org/docs
- 4: https://vueuse.org/guide/
- 5: https://www.npmjs.com/package/@vueuse/core/v/2.0.17
- 6: https://vueschool.io/articles/news/what-is-changing-for-vuejs-developers-in-2023/
- 7: https://github.com/vueuse/vueuse/releases
- 8: https://github.com/vueuse/vueuse
- 9: https://v2.vuejs.org/lts/
- 10: https://vueuse.org/nuxt/readme.html
@vueuse/core v12.7.0 is correctly used and fully compatible with Vue 3.4.31
- Verified that v12.7.0 is the latest stable release and is specifically designed for Vue 3.x.
- The project's Vue version (3.4.31) meets the dependency requirements.
packages/theme/src/base/index.less (1)
17-17: LGTM! Dark theme import enabled.The dark theme import is correctly positioned after the base variables import.
packages/theme/src/base/dark-theme.less (1)
2-2: LGTM! Well-structured dark theme implementation.The
:root.darkselector is the correct approach for theme switching, as it:
- Ensures dark theme styles are only applied when the .dark class is present
- Allows for smooth transitions between themes
- Follows the principle of CSS specificity
examples/sites/src/views/layout/layout.vue (2)
71-71: LGTM! Appropriate use of @vueuse/core utilities.The imports from @vueuse/core provide a clean way to implement dark mode functionality.
110-111: LGTM! Clean implementation of dark mode toggle.The dark mode implementation using
useDarkanduseToggleis clean and follows Vue Composition API best practices.Also applies to: 200-201
官网添加动态切换明暗主题功能
PR
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
New Features
Style