Skip to content

Commit 5cf3e89

Browse files
pdanpdanpdanpdan
authored
fix: improve root color. closes: #4294
- apply the same background in both rootcolor and rootscrollgutter - removed fallback to --color-base-100 in rootcolor because it is set in the same included file - if rootcolor is not included then --root-bg is not set so by default background will be transparent, and when we have scroll gutter the scrollbar will be gray - if rootscrollgutter is not included then we will not have grey on scroll gutter This is not a fix for the issue, it's just a better separation of concerns between the 2 files The issue is self-inflicted by setting the bg color in the base layer instead of a higher priority layer. ref #4294
1 parent 97eb5f0 commit 5cf3e89

2 files changed

Lines changed: 4 additions & 8 deletions

File tree

‎packages/daisyui/src/base/rootcolor.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
:root,
22
[data-theme] {
3-
background-color: var(--root-bg, var(--color-base-100));
3+
background: var(--page-scroll-bg, var(--root-bg));
44
color: var(--color-base-content);
55
}
66

‎packages/daisyui/src/base/rootscrollgutter.css‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
:root {
2-
--page-scroll-bg-on: linear-gradient(var(--root-bg), var(--root-bg))
3-
color-mix(in srgb, var(--root-bg), oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%));
2+
background: var(--page-scroll-bg, var(--root-bg));
3+
--page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000))
4+
color-mix(in srgb, var(--root-bg, #0000), oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%));
45
--page-scroll-transition-on: background-color 0.3s ease-out;
56

67
transition: var(--page-scroll-transition);
@@ -12,11 +13,6 @@
1213
scrollbar-gutter: if(style(--page-has-scroll: 1): var(--page-scroll-gutter, unset) ; else: unset);
1314
}
1415

15-
/* force higher specificity to override rootcolor */
16-
:root:root {
17-
background: var(--page-scroll-bg, var(--root-bg, var(--color-base-100)));
18-
}
19-
2016
@keyframes set-page-has-scroll {
2117
0%,
2218
to {

0 commit comments

Comments
 (0)