feat(Region): support dark theme by ArgoZhang · Pull Request #606 · BootstrapBlazor/BootstrapBlazor.Extensions

ArgoZhang · 2025-10-16T10:12:44Z

Link issues

fixes #605

Summary By Copilot

Regression?

Yes
No

Risk

High
Medium
Low

Verification

Manual (required)
Automated

Packaging changes reviewed?

Yes
No
N/A

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

Doc is updated/provided or not needed
Demo is updated/provided or not needed
Merge the latest code from the main branch

Summary by Sourcery

Enable dark theme styling for region selection components by introducing CSS custom properties and providing dynamic overrides for light and dark modes.

New Features:

Add support for dark theme in SelectRegion and SelectCity components by defining CSS variable overrides

Enhancements:

Refactor hardcoded styles in SelectRegion and SelectCity to use CSS custom properties for padding, colors, and dimensions
Define CSS variables for region header and body elements and replace static values with variable references

sourcery-ai · 2025-10-16T10:12:51Z

Reviewer's Guide

This PR refactors the CSS for the SelectRegion and SelectCity components by replacing hardcoded style values with CSS custom properties and adds dark‐theme support via [data-bs-theme="dark"] overrides.

Class diagram for CSS custom properties in SelectRegion and SelectCity components

classDiagram
    class SelectRegionCSS {
        +--bb-region-header-padding
        +--bb-region-header-hover-bg-color
        +--bb-region-header-active-bg-color
        +--bb-region-body-color
        +--bb-region-body-hover-bg-color
        +--bb-region-body-active-bg-color
        +--bb-region-body-hover-color
        +--bb-region-body-active-color
        +--bb-region-body-width
        +--bb-region-body-padding
        +--bb-region-body-item-padding
        +--bb-region-body-gap
        +[data-bs-theme="dark"] overrides
    }
    class SelectCityCSS {
        +--bb-region-body-color
        +--bb-region-body-hover-bg-color
        +--bb-region-body-active-bg-color
        +--bb-region-body-hover-color
        +--bb-region-body-active-color
        +--bb-region-body-width
        +--bb-region-body-height
        +--bb-region-body-padding
        +--bb-region-body-item-padding
        +--bb-region-body-gap
        +[data-bs-theme="dark"] overrides
    }
    SelectRegionCSS <|-- SelectCityCSS

File-Level Changes

Change	Details	Files
Refactor SelectRegion styles to use CSS variables and add dark theme overrides	Define new CSS variables for header/body colors, padding, widths, and gaps in .dropdown-menu Replace hardcoded width, padding, background, and color values with var(...) in header and body selectors Introduce [data-bs-theme="dark"] block to override variables for dark mode	`src/components/BootstrapBlazor.Region/Components/SelectRegion.razor.css`
Refactor SelectCity styles to use CSS variables and add dark theme overrides	Declare CSS variables for dropdown dimensions, item padding, colors, and gaps Swap static padding, color, and gap rules with var(...) references for consistency Add [data-bs-theme="dark"] section to adjust variables for dark mode	`src/components/BootstrapBlazor.Region/Components/SelectCity.razor.css`

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#605	Add support for dark theme in the Region component (including SelectRegion and SelectCity).	✅

Possibly linked issues

feat(Region): support dark theme #605: PR adds CSS variables and styles for dark theme support in Region component, directly addressing the issue.

Tips and commands

Interacting with Sourcery

Trigger a new review: Comment @sourcery-ai review on the pull request.
Continue discussions: Reply directly to Sourcery's review comments.
Generate a GitHub issue from a review comment: Ask Sourcery to create an
issue from a review comment by replying to it. You can also reply to a
review comment with @sourcery-ai issue to create an issue from it.
Generate a pull request title: Write @sourcery-ai anywhere in the pull
request title to generate a title at any time. You can also comment
@sourcery-ai title on the pull request to (re-)generate the title at any time.
Generate a pull request summary: Write @sourcery-ai summary anywhere in
the pull request body to generate a PR summary at any time exactly where you
want it. You can also comment @sourcery-ai summary on the pull request to
(re-)generate the summary at any time.
Generate reviewer's guide: Comment @sourcery-ai guide on the pull
request to (re-)generate the reviewer's guide at any time.
Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
pull request to resolve all Sourcery comments. Useful if you've already
addressed all the comments and don't want to see them anymore.
Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
request to dismiss all existing Sourcery reviews. Especially useful if you
want to start fresh with a new review - don't forget to comment
@sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

Enable or disable review features such as the Sourcery-generated pull request
summary, the reviewer's guide, and others.
Change the review language.
Add, remove or edit custom review instructions.
Adjust other review settings.

Getting Help

Contact our support team for questions or feedback.
Visit our documentation for detailed guides and information.
Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

sourcery-ai

Hey there - I've reviewed your changes and they look great!

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

Copilot

Pull Request Overview

Adds dark theme support to Region components by introducing CSS custom properties and theme overrides.

Replaces hard-coded colors/sizes with CSS variables for easier theming.
Adds [data-bs-theme="dark"] overrides for both SelectRegion and SelectCity dropdowns.
Bumps package version to 9.0.2.

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
src/components/BootstrapBlazor.Region/Components/SelectRegion.razor.css	Introduces CSS variables and dark theme overrides; refactors header/body styles to use variables.
src/components/BootstrapBlazor.Region/Components/SelectCity.razor.css	Introduces CSS variables and dark theme overrides; changes dropdown dimensions from max-* to fixed width/height.
src/components/BootstrapBlazor.Region/BootstrapBlazor.Region.csproj	Version bump from 9.0.1 to 9.0.2.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-16T10:16:14Z

+    width: var(--bb-region-body-width);
+    height: var(--bb-region-body-height);


This change replaces the previous max-width/max-height with fixed width/height, which alters the component's behavior (potentially introducing excess whitespace for small content and constraining growth for larger content). To preserve prior behavior and avoid a breaking visual change, use max-width and max-height with the new variables.

Suggested change

width: var(--bb-region-body-width);

height: var(--bb-region-body-height);

max-width: var(--bb-region-body-width);

max-height: var(--bb-region-body-height);

Copilot · 2025-10-16T10:16:15Z

+                background-color: var(--bb-region-header-active-bg-color);
+                color: var(--bb-region-body-active-color);
            }

            .bb-region-header ul li:hover {
-                background-color: #e3e3e3;
-                color: #000;
+                background-color: var(--bb-region-header-hover-bg-color);
+                color: var(--bb-region-body-hover-color);


[nitpick] Header state text colors are sourced from body variables, which couples header styling to body settings. Consider introducing header-specific text color variables (e.g., --bb-region-header-hover-color and --bb-region-header-active-color) and referencing them here to keep header styling self-contained and easier to theme independently.

Copilot · 2025-10-16T10:16:15Z

        .bb-region-body ul li:hover {
-            background-color: #e9ecef;
-            color: #000;
+            background-color: var(--bb-region-body-hover-bg-color);
+            color: var(--bb-region-body-hover-color);
        }


[nitpick] Interactive items have hover and active states but no visible keyboard focus state. Add :focus-visible styles aligned with hover for keyboard accessibility, e.g., .bb-region-body ul li:focus-visible { background-color: var(--bb-region-body-hover-bg-color); color: var(--bb-region-body-hover-color); outline: 0; } and similarly for .bb-region-header ul li.

Copilot · 2025-10-16T10:16:15Z

+            background-color: var(--bb-region-body-hover-bg-color);
+            color: var(--bb-region-body-hover-color);
        }



[nitpick] Add a :focus-visible state for .dropdown-menu li to match hover styling so keyboard users can see focus, e.g., .dropdown-menu li:focus-visible { background-color: var(--bb-region-body-hover-bg-color); color: var(--bb-region-body-hover-color); outline: 0; }.

Suggested change

.dropdown-menu li:focus-visible {

background-color: var(--bb-region-body-hover-bg-color);

color: var(--bb-region-body-hover-color);

outline: 0;

}

Copilot · 2025-10-16T10:16:16Z

+    --bb-region-header-padding: 3px 12px;
+    --bb-region-header-hover-bg-color: #e9ecef;
+    --bb-region-header-active-bg-color: #dee2e6;
+    --bb-region-body-color: #495057;
+    --bb-region-body-hover-bg-color: #e9ecef;
+    --bb-region-body-active-bg-color: #dee2e6;
+    --bb-region-body-hover-color: #000;
+    --bb-region-body-active-color: #000;
+    --bb-region-body-width: 400px;
+    --bb-region-body-padding: .5rem;
+    --bb-region-body-item-padding: 3px 12px;
+    --bb-region-body-gap: 5px;


[nitpick] New CSS custom properties form part of the component's theming surface. Please document each variable (purpose, default value, and examples, including dark theme overrides), so consumers know how to customize Region styling.

ArgoZhang added 3 commits October 16, 2025 17:15

refactor: 更新样式

7e44d0f

refactor: 调整样式

6b6b54b

chore: bump version 9.0.2

ea156a5

Copilot AI review requested due to automatic review settings October 16, 2025 10:12

bb-auto Bot assigned ArgoZhang Oct 16, 2025

bb-auto Bot added the enhancement New feature or request label Oct 16, 2025

bb-auto Bot added this to the v9.2.0 milestone Oct 16, 2025

ArgoZhang merged commit db93fc3 into master Oct 16, 2025
1 of 2 checks passed

ArgoZhang deleted the refactor-region branch October 16, 2025 10:12

sourcery-ai Bot reviewed Oct 16, 2025

View reviewed changes

Copilot AI reviewed Oct 16, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(Region): support dark theme#606

feat(Region): support dark theme#606
ArgoZhang merged 3 commits intomasterfrom
refactor-region

ArgoZhang commented Oct 16, 2025 •

edited by sourcery-ai Bot

Loading

Uh oh!

sourcery-ai Bot commented Oct 16, 2025 •

edited

Loading

Interacting with Sourcery

Customizing Your Experience

Getting Help

Uh oh!

Uh oh!

sourcery-ai Bot left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Oct 16, 2025

Uh oh!

Copilot AI Oct 16, 2025

Uh oh!

Copilot AI Oct 16, 2025

Uh oh!

Copilot AI Oct 16, 2025

Uh oh!

Copilot AI Oct 16, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		width: var(--bb-region-body-width);
		height: var(--bb-region-body-height);

Uh oh!

Conversation

ArgoZhang commented Oct 16, 2025 • edited by sourcery-ai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Link issues

Summary By Copilot

Regression?

Risk

Verification

Packaging changes reviewed?

☑️ Self Check before Merge

Summary by Sourcery

Uh oh!

sourcery-ai Bot commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviewer's Guide

Class diagram for CSS custom properties in SelectRegion and SelectCity components

File-Level Changes

Assessment against linked issues

Possibly linked issues

Interacting with Sourcery

Customizing Your Experience

Getting Help

Uh oh!

Uh oh!

sourcery-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ArgoZhang commented Oct 16, 2025 •

edited by sourcery-ai Bot

Loading

sourcery-ai Bot commented Oct 16, 2025 •

edited

Loading