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>
This commit is contained in:
@@ -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 ? (
|
||||||
|
|||||||
@@ -1,13 +1,19 @@
|
|||||||
|
"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 (
|
||||||
|
<MantineProvider theme={theme} defaultColorScheme="light">
|
||||||
<Stack gap={0} bg={colors.grey[1]}>
|
<Stack gap={0} bg={colors.grey[1]}>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<Space h={{
|
<Space h={{
|
||||||
@@ -21,5 +27,6 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
|||||||
</Box>
|
</Box>
|
||||||
<Footer />
|
<Footer />
|
||||||
</Stack>
|
</Stack>
|
||||||
|
</MantineProvider>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user