feat: support custom background colors for sidebar and header #4151
Conversation
|
WalkthroughThe recent updates across various components enhance theme customization and user interface flexibility. New properties like Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Preferences
participant UI
participant ThemeManager
User->>Preferences: Change theme settings
Preferences->>ThemeManager: Update theme preferences (semiDarkHeader, headerTheme)
ThemeManager->>UI: Refresh UI with new theme
UI-->>User: Display updated theme
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 as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range, codebase verification and nitpick comments (6)
packages/@core/preferences/src/config.ts (1)
93-93: Usage ofsemiDarkHeaderis limited to its definition and declaration.The
semiDarkHeaderproperty is defined inconfig.tsand declared intypes.ts, but it is not used elsewhere in the codebase. Consider integrating this property where necessary to ensure it fulfills its intended purpose.
packages/@core/preferences/src/config.ts: Definitionpackages/@core/preferences/src/types.ts: DeclarationAnalysis chain
LGTM! Verify usage of
semiDarkHeader.The addition of
semiDarkHeadertodefaultPreferenceslooks good and aligns with the theme customization objectives. Ensure that this new property is utilized correctly throughout the codebase.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `semiDarkHeader` in the codebase. # Test: Search for occurrences of `semiDarkHeader` to ensure it's being used correctly. rg --type ts 'semiDarkHeader'Length of output: 164
packages/@core/ui-kit/layout-ui/src/vben-layout.ts (1)
75-78:headerThemeis currently unused in the codebase. TheheaderThemeproperty added toVbenLayoutPropsis not utilized within theuseLayoutfunction or elsewhere in the codebase. Consider integrating this property into the relevant components or logic to ensure it enhances the layout's configurability as intended.Analysis chain
LGTM! Verify usage of
headerTheme.The addition of
headerThemetoVbenLayoutPropsenhances the layout's configurability. Ensure that this new property is utilized correctly throughout the codebase.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `headerTheme` in the codebase. # Test: Search for occurrences of `headerTheme` to ensure it's being used correctly. rg --type ts 'headerTheme'Length of output: 108
Script:
#!/bin/bash # Description: Search for occurrences of `VbenLayoutProps` to check if `headerTheme` is indirectly used. # Test: Search for occurrences of `VbenLayoutProps` in the codebase. rg --type ts 'VbenLayoutProps'Length of output: 412
Script:
#!/bin/bash # Description: Search for the implementation of `useLayout` function to check the usage of `headerTheme`. # Test: Retrieve the implementation of `useLayout` function. ast-grep --lang typescript --pattern $'export function useLayout(props: VbenLayoutProps) { $$$ }'Length of output: 2899
docs/src/guide/essentials/settings.md (2)
263-263: Document the newsemiDarkHeaderproperty.The
semiDarkHeaderproperty has been added to enhance theme customization. Ensure that its behavior and usage are clearly documented in the guide.+ /** 是否开启半深色header（只在theme='light'时生效） */ + semiDarkHeader: boolean;
456-457: Ensure consistency in property descriptions.The description for
semiDarkHeadershould be consistent with other properties in terms of style and detail. Consider adding a brief explanation of its effect and when it should be used.+ /** Enables a semi-dark header when the theme is set to 'light'. */ + semiDarkHeader: boolean;packages/@core/base/design/src/design-tokens/default/index.css (1)
92-94: Consider the implications of adding--header.The new
--headerproperty has been added. Ensure that its introduction is consistent with the design system and that it is used appropriately across components.+ /* header color */ + --header: 0 0% 100%;docs/src/guide/in-depth/theme.md (1)
349-349: Inconsistent--mutedVariable Values DetectedThe
--mutedvariable shows multiple inconsistent values across different CSS files. This inconsistency could lead to unexpected design variations depending on which value is applied. Please review and ensure that the--mutedvariable is consistent with the intended theme design.
- Files with inconsistent
--mutedvalues:
packages/@core/base/design/src/design-tokens/dark/index.csspackages/@core/base/design/src/design-tokens/default/index.cssAnalysis chain
Verify the updated
--mutedvalues.The
--mutedvariable has been updated to a new color value. Ensure that this change is consistent with the overall theme design and that it is applied correctly throughout the application.Also applies to: 727-727
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage and consistency of the updated `--muted` variable. # Test: Search for the `--muted` variable usage. Expect: Consistent values across themes. rg --type css -A 5 $'--muted'Length of output: 472
Script:
#!/bin/bash # Corrected command to search for the `--muted` variable in CSS files. rg --type css -A 5 '--muted'Length of output: 472
Script:
#!/bin/bash # Correct command to search for the `--muted` variable in CSS files. rg --type css -A 5 '\-\-muted'Length of output: 18964
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (19)
- apps/backend-mock/README.md (1 hunks)
- docs/src/guide/essentials/settings.md (2 hunks)
- docs/src/guide/in-depth/theme.md (24 hunks)
- internal/tailwind-config/src/index.ts (1 hunks)
- packages/@core/base/design/src/design-tokens/dark/index.css (14 hunks)
- packages/@core/base/design/src/design-tokens/default/index.css (2 hunks)
- packages/@core/preferences/src/config.ts (1 hunks)
- packages/@core/preferences/src/types.ts (1 hunks)
- packages/@core/ui-kit/layout-ui/src/components/layout-header.vue (2 hunks)
- packages/@core/ui-kit/layout-ui/src/vben-layout.ts (2 hunks)
- packages/@core/ui-kit/layout-ui/src/vben-layout.vue (1 hunks)
- packages/@core/ui-kit/menu-ui/src/components/menu.vue (1 hunks)
- packages/@core/ui-kit/shadcn-ui/src/components/ui/hover-card/HoverCardContent.vue (2 hunks)
- packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue (1 hunks)
- packages/effects/layouts/src/basic/layout.vue (4 hunks)
- packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue (2 hunks)
- packages/effects/layouts/src/widgets/preferences/preferences-sheet.vue (2 hunks)
- packages/locales/src/langs/en-US.json (1 hunks)
- packages/locales/src/langs/zh-CN.json (1 hunks)
Files skipped from review due to trivial changes (4)
- apps/backend-mock/README.md
- packages/@core/ui-kit/menu-ui/src/components/menu.vue
- packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
- packages/locales/src/langs/en-US.json
Additional comments not posted (19)
packages/@core/ui-kit/layout-ui/src/components/layout-header.vue (2)
39-42: Addition ofthemeprop enhances customization.The introduction of the
themeprop in thePropsinterface allows for dynamic theming, improving flexibility in styling. Ensure that thethemevalues are validated to prevent unexpected styles.
83-85: Ensurethemeclass values are validated.While the dynamic application of the
themeclass enhances flexibility, ensure that thethemevalues are validated to prevent invalid or harmful CSS classes from being applied.packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue (2)
16-17: Enhancement in theme customization options.The addition of
themeSemiDarkHeaderand the modification ofthemeSemiDarkMenuprovide more granular control over theme settings, enhancing user customization options.
79-81: Ensure consistent behavior for dark mode toggles.The addition of the
SwitchItemforthemeSemiDarkHeaderaligns with the existing UI for theme customization. Ensure that the toggles forthemeSemiDarkMenuandthemeSemiDarkHeaderbehave consistently, especially whenmodelValueis set to 'dark'.Verification successful
Consistent behavior for dark mode toggles verified.
The
themeSemiDarkMenuandthemeSemiDarkHeadertoggles have consistent logic, both being disabled whenmodelValueis 'dark'. This aligns with the expected behavior for theme customization.
- The toggles are defined as models and used in
v-modelbindings.- Both toggles have a
:disabledcondition checkingmodelValue === 'dark'.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify consistent behavior of dark mode toggles. # Test: Search for related logic handling `themeSemiDarkMenu` and `themeSemiDarkHeader`. Expect: Consistent logic handling. rg --type vue 'themeSemiDark(Menu|Header)' -A 5Length of output: 77
Script:
#!/bin/bash # Description: Verify consistent behavior of dark mode toggles. # Find all .vue files and search for related logic handling `themeSemiDarkMenu` and `themeSemiDarkHeader`. fd --extension vue --exec rg 'themeSemiDark(Menu|Header)' -A 5Length of output: 1347
packages/@core/preferences/src/types.ts (1)
186-187: LGTM! Verify usage ofsemiDarkHeader.The addition of
semiDarkHeadertoThemePreferencesis consistent with the goal of enhancing theme customization. Ensure that this new property is utilized correctly throughout the codebase.Verification successful
Verified Usage of
semiDarkHeader: ThesemiDarkHeaderproperty is used appropriately in thelayout.vuefile to manage theme settings, and it is documented in the settings guide. This confirms its correct integration into the codebase.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `semiDarkHeader` in the codebase. # Test: Search for occurrences of `semiDarkHeader` to ensure it's being used correctly. rg --type ts 'semiDarkHeader'Length of output: 164
Script:
#!/bin/bash # Broader search for any related usage or documentation of `semiDarkHeader` rg 'semiDarkHeader' -A 5Length of output: 1921
packages/locales/src/langs/zh-CN.json (1)
240-240: Translation addition looks good.The new entry for
"darkHeader": "深色顶栏"correctly adds localization support for the dark header theme.internal/tailwind-config/src/index.ts (1)
83-85: Addition ofheadercolor customization is appropriate.The new
headercolor configuration follows the existing pattern and enhances theme customization options.packages/effects/layouts/src/basic/layout.vue (4)
55-58:headerThemecomputed property is well-implemented.The introduction of
headerThemeeffectively manages the header's theme, improving modularity and responsiveness to user preferences.
165-165: Integration ofheaderThemein template bindings is seamless.The use of
headerThemein the template ensures consistent theme application across the header component.
205-205: Conditional application ofheaderThemeis correct.Using
headerThemeconditionally based onshowHeaderNavensures the correct theme is applied in different navigation contexts.
227-227: Use ofheaderThemeinLayoutMenuis appropriate.The application of
headerThemeinLayoutMenualigns with the theme management strategy, ensuring visual consistency.packages/@core/base/design/src/design-tokens/default/index.css (1)
11-11: Verify the impact of the--foregroundcolor change.The
--foregroundcolor has been adjusted. Ensure that this change aligns with the overall design goals and does not negatively affect readability or accessibility.Verification successful
The
--foregroundvariable is used consistently across themes.The
--foregroundcolor change to210 6% 21%in thedefaulttheme aligns with the pattern of theme-specific styling observed in the codebase. Ensure that this change maintains readability and meets design goals.
packages/@core/base/design/src/design-tokens/default/index.css: Multiple instances of--foregroundwith varying values for different contexts.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of the `--foreground` variable to ensure it aligns with design goals. # Test: Search for `--foreground` usage. Expect: Consistent usage across stylesheets. rg --type css --word-regexp '--foreground'Length of output: 457
Script:
#!/bin/bash # Corrected command to verify the usage of the `--foreground` variable in CSS files. # Test: Search for `--foreground` usage. Expect: Consistent usage across stylesheets. rg --type css '--foreground'Length of output: 443
Script:
#!/bin/bash # Corrected command to verify the usage of the `--foreground` variable in CSS files. # Test: Search for `--foreground` usage. Expect: Consistent usage across stylesheets. rg --type css '\-\-foreground'Length of output: 2570
packages/@core/base/design/src/design-tokens/dark/index.css (2)
91-93: Ensure consistent application of--headeracross themes.The
--headerproperty is introduced for better header customization. Verify that it is consistently applied across all relevant themes and that it meets the design specifications.
Line range hint
120-432:
Verify the new--headerproperty in all themes.The
--headerproperty has been added to multiple themes. Ensure that the color values are appropriate for each theme and provide the desired visual effect.Verification successful
Verification of
--headerProperty Across ThemesThe
--headerproperty is used consistently across various themes with values that appear appropriate for each theme's design. The color values are distinct and tailored to match the intended visual effect of each theme.
- File:
packages/@core/base/design/src/design-tokens/dark/index.css- Themes and Values:
deep-blue:222.2 84% 4.9%green:20 14.3% 4.1%neutral:0 0% 3.9%zinc:240 4.9% 83.9%default:0 0% 100%These values ensure that the
--headerproperty aligns with the visual requirements of each theme.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage and values of the `--header` variable across themes. # Test: Search for `--header` usage in dark themes. Expect: Consistent and appropriate values. rg --type css --word-regexp '--header'Length of output: 474
Script:
#!/bin/bash # Corrected command to search for `--header` in CSS files. rg --type css '--header'Length of output: 460
Script:
#!/bin/bash # Corrected command to search for `--header` in CSS files without using the `--` prefix. rg --type css '\-\-header'Length of output: 1340
packages/@core/ui-kit/layout-ui/src/vben-layout.vue (1)
488-488: Verify the usage of thethemeparameter.The
handleOpenMenufunction now accepts athemeparameter. Ensure that this parameter is used correctly throughout the codebase and that all calls to this function are updated to pass the necessary argument.packages/effects/layouts/src/widgets/preferences/preferences-sheet.vue (1)
77-77: Verify the integration ofthemeSemiDarkHeader.The
themeSemiDarkHeadermodel is introduced and bound to theThemecomponent. Ensure that this model is correctly utilized and that any dependencies or related logic are updated accordingly.Verification successful
Let's adjust the search to not specify a file type, which should allow us to locate the usage of
themeSemiDarkHeaderacross the codebase.
Integration of
themeSemiDarkHeaderVerifiedThe
themeSemiDarkHeadermodel is correctly integrated and utilized withv-modelbindings in the componentspreferences-sheet.vueandtheme.vue. This confirms its proper usage and alignment with the expected data flow in the application.
- Files:
packages/effects/layouts/src/widgets/preferences/preferences-sheet.vuepackages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vueScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the integration and usage of `themeSemiDarkHeader` within the codebase. # Test: Search for the model usage. Expect: Consistent usage across components. rg --type vue -A 5 $'themeSemiDarkHeader'Length of output: 68
Script:
#!/bin/bash # Description: Verify the integration and usage of `themeSemiDarkHeader` within the codebase. # Test: Search for the model usage. Expect: Consistent usage across components. rg -A 5 'themeSemiDarkHeader'Length of output: 2616
docs/src/guide/in-depth/theme.md (3)
764-764: Verify the updated--bordervalue.The
--bordervariable has been updated to a new color value. Ensure that this change is consistent with the overall theme design and that it is applied correctly throughout the application.Verification successful
The
--bordervariable update is consistent with theme design.The
--bordervariable is used across multiple themes with varying values, indicating intentional design choices. The specific update to240 3.7% 22%aligns with the dark theme's design specifications.
- Location:
packages/@core/base/design/src/design-tokens/dark/index.cssScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage and consistency of the updated `--border` variable. # Test: Search for the `--border` variable usage. Expect: Consistent values across themes. rg --type css -A 5 $'--border'Length of output: 440
Script:
#!/bin/bash # Description: Correctly verify the usage and consistency of the updated `--border` variable. # Test: Search for the `--border` variable usage. Expect: Consistent values across themes. rg --type css -A 5 '--border'Length of output: 440
Script:
#!/bin/bash # Description: Correctly verify the usage and consistency of the updated `--border` variable. # Test: Search for the `--border` variable usage. Expect: Consistent values across themes. rg --type css -A 5 '\-\-border'Length of output: 14298
334-334: Verify the updated--foregroundvalue.The
--foregroundvariable has been updated to a new color value. Ensure that this change aligns with the overall theme design and is consistently applied throughout the application.
118-118: Verify the updated--headervalues.The
--headervariable has been updated in both light and dark themes. Ensure that these changes align with the desired design specifications and that they are applied consistently across the application.Also applies to: 792-792
Verification successful
Consistent Usage of
--headerVariable Across ThemesThe
--headervariable is defined with different values in both the light and dark themes, as expected. Ensure these values align with the design specifications:
- Light Theme:
--header: 0 0% 100%;inpackages/@core/base/design/src/design-tokens/default/index.css- Dark Theme Variations: Multiple values are defined for different dark theme variants in
packages/@core/base/design/src/design-tokens/dark/index.css, such as222.34deg 10.43% 12.27%,224 71.4% 4.1%,20 14.3% 4.1%, etc.Please verify that these values are correct and intended for the respective themes. If any discrepancies are found, adjust them to match the design requirements.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage and consistency of the updated `--header` variable. # Test: Search for the `--header` variable usage. Expect: Consistent values across themes. rg --type css -A 5 $'--header'Length of output: 465
Script:
#!/bin/bash # Description: Verify the usage and consistency of the updated `--header` variable. # Corrected Test: Search for the `--header` variable usage across CSS files. rg --type css -A 5 '--header'Length of output: 465
Script:
#!/bin/bash # Description: Verify the usage and consistency of the updated `--header` variable. # Corrected Test: Properly escape the `--header` pattern to search across CSS files. rg --type css -A 5 '\-\-header'Length of output: 6876
packages/@core/ui-kit/shadcn-ui/src/components/ui/hover-card/HoverCardContent.vue
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- packages/@core/ui-kit/layout-ui/src/components/layout-header.vue (2 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
Description
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit
New Features
semiDarkHeaderoption for greater customization of the light theme.headerThemeproperty to allow dynamic theme adjustments for the header.headerCSS variable enhances header color configurations across themes.Bug Fixes
Style
Documentation