1. On mobile dark mode, the search panel background is transparent
This is a wired issue, somehow on chrome and safari, hsl(var(--background)) will output rgba(0, 0, 0, 0) (opacity is 0), it is only happens in dark mode.
I haven't found any related discussions on the internet. I suspect that on mobile, the --background variable is being modified by the browser..
One of my attempts to resolve this issue was to explicitly set the CSS variable --background on the parent element.
My fix:
// On mobile browsers(Chrome & Safari) in dark mode, using `background: hsl(var(--background))`
// result in `rgba(0, 0, 0, 0)`. To prevent this, explicitly set --background
style={theme === 'dark' ? { '--background': '0 0% 12%' } as CSSProperties : {}}
2. If user doesn't set theme and the system theme is dark, the color is incorrect
This is because in many places, we take the default system theme as light
I added a new hook called use-current-theme, which detects the system's theme setting.
What to fix
1. On mobile dark mode, the search panel background is transparent This is a wired issue, somehow on chrome and safari, hsl(var(--background)) will output rgba(0, 0, 0, 0) (opacity is 0), it is only happens in dark mode. I haven't found any related discussions on the internet. I suspect that on mobile, the --background variable is being modified by the browser.. One of my attempts to resolve this issue was to explicitly set the CSS variable
--backgroundon the parent element.My fix:
2. If user doesn't set theme and the system theme is dark, the color is incorrect This is because in many places, we take the default system theme as
lightI added a new hook called use-current-theme, which detects the system's theme setting.