From a319484907ecd30589a507f74a1574be81b23b88 Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Wed, 25 Feb 2026 11:30:42 +0800
Subject: [PATCH] fix: force light mode for darmasaba public pages

- Add MantineProvider with defaultColorScheme='light' to darmasaba/layout.tsx
- Remove useMantineColorScheme from ModuleView component
- Hardcode bg='white' for Paper components in ModuleView
- Prevent system dark mode from affecting public pages

This ensures public pages always use light mode regardless of
OS system preference, while admin panel can still use dark mode toggle.

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
---
 .../main-page/landing-page/ModuleView.tsx     |  7 ++--
 src/app/darmasaba/layout.tsx                  | 35 +++++++++++--------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/app/darmasaba/_com/main-page/landing-page/ModuleView.tsx b/src/app/darmasaba/_com/main-page/landing-page/ModuleView.tsx
index 695f0572..f13710e5 100644
--- a/src/app/darmasaba/_com/main-page/landing-page/ModuleView.tsx
+++ b/src/app/darmasaba/_com/main-page/landing-page/ModuleView.tsx
@@ -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 ? (
diff --git a/src/app/darmasaba/layout.tsx b/src/app/darmasaba/layout.tsx
index afe980de..71971662 100644
--- a/src/app/darmasaba/layout.tsx
+++ b/src/app/darmasaba/layout.tsx
@@ -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>
     )
 }
\ No newline at end of file