fix(docs): Vue examples now follow the site light/dark theme#1475
Merged
Conversation
The Vue dockview examples passed the theme as a fallthrough `class` on `<dockview-vue>`. dockview-core themes its shell element (defaulting to abyss), and the fallthrough class landed on the outer host, outside the shell, so the shell's darker default won and every Vue example rendered dark even in light mode. React and Angular pass the theme as the `className` prop, which dockview-core applies to the inner element (inside the shell) where it wins. Route the theme through the `className` prop in all 34 Vue examples to match, keeping `example-dock` (or the inline height style) on `class` so the dock still gets its size through attribute fallthrough. The nearest theme class to the dock is now `dockview-theme-light` in light mode across all 35 Vue examples (was `dockview-theme-abyss`). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DFPcCn11Au4qu7YUyiCWMF
5 tasks
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
The Vue live examples rendered dark even when the docs site was in light mode (e.g.
/docs/core/panels/multiRowTabs?framework=vue).Root cause
The Vue examples passed the theme as a fallthrough
classon<dockview-vue>:dockview-core themes its shell element, defaulting to abyss (dark). The fallthrough
classlands on the outer host element, outside the shell, so the shell's darker default won and the dock rendered dark regardless of the site mode. React and Angular pass the theme as theclassNameprop, which dockview-core applies to the inner element inside the shell where it wins (TypeScript uses thethemeoption directly).Fix
Route the theme through the
classNameprop in all 34 Vue examples to match React/Angular, keepingexample-dock(or the inline height style) onclassso the dock still gets its size through attribute fallthrough:classNameis aDockviewOptionsfield, sodockview-vuealready forwards it into the core option. No library change.Verification
Loaded all 35 Vue examples in light mode in a real browser: the nearest theme class to the dock is now
dockview-theme-light(wasdockview-theme-abyss).Type of change
Affected packages
docsHow to test
Open any Vue live example with the site in light mode: the dock renders light. (Or with a local dev server, load
/templates/dockview/basic/vue/index.html?colorMode=light.)Checklist
yarn lint:fix/yarn format— n/a, files live underpackages/docs, excluded from lint/format and not checked by CINote
The cross-framework smoke suite (#1471) has a matching theme assertion that guards this exact bug; it is scoped there once both land.
🤖 Generated with Claude Code
Generated by Claude Code