wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

fix: force default light mode for public pages and admin

Browse Source 
- Set defaultColorScheme='light' in root MantineProvider
- Change darkModeStore default from system preference to false (light)
- Add MantineProvider with light theme to darmasaba/layout.tsx
- Remove dark mode dependency from ModuleView component
- Prevent system color scheme from affecting initial page load

This ensures consistent light mode on first visit for both
public pages and admin panel, regardless of OS settings.

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
nico
2026-02-25 10:45:27 +08:00
parent fd63bb0fd4
commit b86a3a85c3
4 changed files with 35 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/darmasaba/_com/main-page/landing-page/ModuleView.tsx
View File

@@ -10,8 +10,7 @@ import {
SimpleGrid, SimpleGrid,
Skeleton, Skeleton,
Stack, Stack,
Text, Text
useMantineColorScheme
} from "@mantine/core"; } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { Prisma } from "@prisma/client"; import { Prisma } from "@prisma/client";
@@ -24,8 +23,6 @@ type ProgramInovasiItem = Prisma.ProgramInovasiGetPayload<{ include: { image: tr
function ModuleItem({ data }: { data: ProgramInovasiItem }) { function ModuleItem({ data }: { data: ProgramInovasiItem }) {
const router = useTransitionRouter(); const router = useTransitionRouter();
const { colorScheme } = useMantineColorScheme();
const isDark = colorScheme === "dark";
return ( return (
<motion.div whileHover={{ scale: 1.03 }}> <motion.div whileHover={{ scale: 1.03 }}>
@@ -37,7 +34,7 @@ function ModuleItem({ data }: { data: ProgramInovasiItem }) {
role="button" role="button"
tabIndex={0} tabIndex={0}
className="cursor-pointer transition-all" className="cursor-pointer transition-all"
bg={isDark ? "dark.6" : "white"} bg="white"
> >
<Center h={160}> <Center h={160}>
{data.image?.link ? ( {data.image?.link ? (

35
src/app/darmasaba/layout.tsx
View File

@@ -1,25 +1,32 @@
"use client";
import colors from "@/con/colors"; import colors from "@/con/colors";
import { MantineProvider, createTheme } from "@mantine/core";
import { Box, Space, Stack } from "@mantine/core"; import { Box, Space, Stack } from "@mantine/core";
import { Navbar } from "@/app/darmasaba/_com/Navbar"; import { Navbar } from "@/app/darmasaba/_com/Navbar";
import Footer from "./_com/Footer"; import Footer from "./_com/Footer";
const theme = createTheme({
defaultColorScheme: "light",
});
export default function Layout({ children }: { children: React.ReactNode }) { export default function Layout({ children }: { children: React.ReactNode }) {
return ( return (
<Stack gap={0} bg={colors.grey[1]}> <MantineProvider theme={theme} defaultColorScheme="light">
<Navbar /> <Stack gap={0} bg={colors.grey[1]}>
<Space h={{ <Navbar />
base: "3.9rem", <Space h={{
md: "2.5rem" base: "3.9rem",
}} /> md: "2.5rem"
<Box style={{ }} />
overflow: "scroll" <Box style={{
}}> overflow: "scroll"
{children} }}>
</Box> {children}
<Footer /> </Box>
</Stack> <Footer />
</Stack>
</MantineProvider>
) )
} }

4
src/app/layout.tsx
View File

@@ -98,10 +98,10 @@ export default function RootLayout({
<html lang="id" {...mantineHtmlProps}> <html lang="id" {...mantineHtmlProps}>
<head> <head>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
<ColorSchemeScript /> <ColorSchemeScript defaultColorScheme="light" />
</head> </head>
<body> <body>
<MantineProvider theme={theme}> <MantineProvider theme={theme} defaultColorScheme="light">
{children} {children}
<LoadDataFirstClient /> <LoadDataFirstClient />
<ToastContainer <ToastContainer

7
src/state/darkModeStore.ts
View File

@@ -21,7 +21,7 @@ import { proxy, useSnapshot } from 'valtio';
const STORAGE_KEY = 'darmasaba-admin-dark-mode'; const STORAGE_KEY = 'darmasaba-admin-dark-mode';
// Initialize from localStorage or system preference // Initialize from localStorage or default to light mode
const getInitialDarkMode = (): boolean => { const getInitialDarkMode = (): boolean => {
if (typeof window === 'undefined') return false; if (typeof window === 'undefined') return false;
@@ -30,8 +30,9 @@ const getInitialDarkMode = (): boolean => {
return stored === 'true'; return stored === 'true';
} }
// Fallback to system preference // Default to light mode for first-time users
return window.matchMedia('(prefers-color-scheme: dark)').matches; // System preference is NOT used as default to ensure consistent UX
return false;
}; };
class DarkModeStore { class DarkModeStore {