Skip to content

Commit

Permalink
Add dark theme support for tagify component in admin UI
Browse files Browse the repository at this point in the history
Introduce new CSS rules to style the tagify component for a dark theme.
Changes include setting border, background, and text colors, as well as
customizing hover states and the tag removal button. These updates ensure
visual consistency and a seamless user experience when the dark theme is
active.
  • Loading branch information
EdiWang committed Oct 5, 2024
1 parent ce0021d commit 1be426a
Showing 1 changed file with 32 additions and 0 deletions.
32 changes: 32 additions & 0 deletions src/Moonglade.Web/wwwroot/css/admin.css
Original file line number Diff line number Diff line change
Expand Up @@ -453,3 +453,35 @@ div.mce-fullscreen {
}

/* tagify override */
[data-bs-theme="dark"] .tagify {
--tags-border-color: var(--bs-border-color);
--tags-hover-border-color: var(--bs-light-border-subtle);
--tag-bg: var(--bs-gray-600);
--tag-text-color: var(--bs-white);
--tagify-dd-bg-color: var(--bs-border-color);
--tagify-dd-text-color: var(--bs-white);
}

[data-bs-theme="dark"] .tagify__tag__removeBtn {
color: var(--bs-white);
}

[data-bs-theme="dark"] .tagify__dropdown__wrapper {
background: var(--bs-body-bg);
}

[data-bs-theme="dark"] .tags-dropdown .tagify__dropdown__item {
border: 1px solid var(--bs-border-color);
background: var(--bs-gray-700);
color: var(--bs-white);
}

[data-bs-theme="dark"] .tags-dropdown .tagify__dropdown__item--active {
color: var(--bs-white);
}

[data-bs-theme="dark"] .tags-dropdown .tagify__dropdown__item:hover {
background: var(--accent-color1);
border-color: var(--accent-color1);
color: #fff;
}

0 comments on commit 1be426a

Please sign in to comment.