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

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

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

12
src/app/layout.tsx
View File

@@ -98,16 +98,16 @@ export default function RootLayout({
<html lang="id" {...mantineHtmlProps}>
<head>
<meta charSet="utf-8" />
<ColorSchemeScript />
<ColorSchemeScript defaultColorScheme="light" />
</head>
<body>
<MantineProvider theme={theme}>
<MantineProvider theme={theme} defaultColorScheme="light">
{children}
<LoadDataFirstClient />
<ToastContainer
position="bottom-center"
hideProgressBar
style={{ zIndex: 9999 }}
<ToastContainer
position="bottom-center"
hideProgressBar
style={{ zIndex: 9999 }}
/>
</MantineProvider>
</body>

11
src/state/darkModeStore.ts
View File

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