feat: add global CSS for theme switching and update layout components

carrismetropolitana · Dec 30, 2024 · 7e71eb3 · 7e71eb3
1 parent d538d98
commit 7e71eb3
Show file tree

Hide file tree

Showing 8 changed files with 311 additions and 813 deletions.
diff --git a/app/global.css b/app/global.css
@@ -0,0 +1,20 @@
+/* * */
+/* BODY */
+
+body {
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+}
+
+
+/* * */
+/* THEME SWITCH */
+
+html.dark .theme-light {
+	display: none;
+}
+
+html.light .theme-dark {
+	display: none;
+}
diff --git a/app/layout.config.tsx b/app/layout.config.tsx
@@ -2,8 +2,8 @@
 
 import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
 
-import CMDarkLogo from '@/components/brand/CMDarkLogo';
 import { IconBook2, IconWorld } from '@tabler/icons-react';
+import Image from 'next/image';
 
 /**
  * Shared layout configurations
@@ -30,7 +30,10 @@ export const baseOptions: BaseLayoutProps = {
 	],
 	nav: {
 		title: (
-			<CMDarkLogo style={{ height: '2.5rem' }} />
+			<>
+				<Image alt="Carris Metropolitana" className="theme-light" height={40} src="/brands/cmet-light.svg" width={120} />
+				<Image alt="Carris Metropolitana" className="theme-dark" height={40} src="/brands/cmet-dark.svg" width={120} />
+			</>
 		),
 	},
 };
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -6,6 +6,8 @@ import 'fumadocs-ui/style.css';
 import { RootProvider } from 'fumadocs-ui/provider';
 import { Inter } from 'next/font/google';
 
+import './global.css';
+
 /* * */
 
 const inter = Inter({
@@ -17,7 +19,7 @@ const inter = Inter({
 export default function Layout({ children }: { children: ReactNode }) {
 	return (
 		<html className={inter.className} lang="en" suppressHydrationWarning>
-			<body style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+			<body>
 				<RootProvider search={{ options: { type: 'static' } }}>
 					{children}
 				</RootProvider>

diff --git a/components/brand/CMDarkLogo.tsx b/components/brand/CMDarkLogo.tsx