Skip to content

Commit

Permalink
fix: force dark mode in intro (#251)
Browse files Browse the repository at this point in the history
  • Loading branch information
rolznz authored Jul 11, 2024
1 parent 060087b commit 1122f73
Showing 1 changed file with 10 additions and 3 deletions.
13 changes: 10 additions & 3 deletions frontend/src/screens/Intro.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,16 @@ export function Intro() {
const navigate = useNavigate();
const [api, setApi] = React.useState<CarouselApi>();
const [progress, setProgress] = React.useState<number>(0);
const { theme } = useTheme();
const { setDarkMode } = useTheme();

React.useEffect(() => {
// Force dark mode on intro screen
setDarkMode("dark");
return () => {
// Revert to default after exiting intro
setDarkMode("system");
};
}, [setDarkMode]);

React.useEffect(() => {
if (!info?.setupCompleted) {
Expand All @@ -49,7 +58,6 @@ export function Intro() {
style={{
backgroundImage: `url(${Cloud})`,
backgroundPositionX: `${-Math.max(progress, 0) * 40}%`,
filter: theme === "light" ? "invert(0.3)" : undefined,
}}
/>
<div
Expand All @@ -58,7 +66,6 @@ export function Intro() {
backgroundImage: `url(${Cloud2})`,
backgroundPositionX: `${150 - Math.max(progress, 0) * 60}%`,
backgroundPositionY: "100%",
filter: theme === "light" ? "invert(0.3)" : undefined,
}}
/>
<CarouselContent className="select-none bg-transparent">
Expand Down

0 comments on commit 1122f73

Please sign in to comment.