feat: ✨ add light/dark theme, rubik font
by Sivritkin Dmitriy
1@@ -23,6 +23,7 @@
2 "class-variance-authority": "^0.7.0",
3 "clsx": "^2.1.1",
4 "next": "14.2.4",
5+ "next-themes": "^0.3.0",
6 "react": "^18",
7 "react-dom": "^18",
8 "tailwind-merge": "^2.3.0",@@ -1,12 +1,15 @@
9 import type { Metadata } from "next";
10-import { Inter } from "next/font/google";
11+import { Rubik as FontSans } from "next/font/google";
12 import "./globals.css";
13+import { ThemeProvider } from "~/app/providers/theme";
14+import { cn } from "~/lib/utils";
15
16-const inter = Inter({ subsets: ["latin"] });
17+const fontSans = FontSans({ subsets: ["latin"], variable: "--font-sans" });
18
19 export const metadata: Metadata = {
20- title: "Create Next App",
21- description: "Generated by create next app",
22+ title: "GitHub Commit Explorer 🔎",
23+ description:
24+ "Instantly view and analyze your project's Git commit history with GitCommitExplorer, featuring real-time updates and a sleek interface.",
25 };
26
27 export default function RootLayout({
28@@ -16,7 +19,23 @@ export default function RootLayout({
29 }>) {
30 return (
31 <html lang="en">
32- <body className={inter.className}>{children}</body>
33+ <body
34+ className={cn(
35+ "min-h-screen bg-background font-sans antialiased",
36+ fontSans.variable,
37+ )}
38+ >
39+ <ThemeProvider
40+ attribute="class"
41+ defaultTheme="system"
42+ enableSystem
43+ disableTransitionOnChange
44+ >
45+ <div className="relative flex min-h-screen flex-col">
46+ <main className="flex-1">{children}</main>
47+ </div>
48+ </ThemeProvider>
49+ </body>
50 </html>
51 );
52 }@@ -0,0 +1 @@
53+export { ThemeProvider } from "./provider";@@ -0,0 +1,9 @@
54+"use client";
55+
56+import * as React from "react";
57+import { ThemeProvider as NextThemesProvider } from "next-themes";
58+import { type ThemeProviderProps } from "next-themes/dist/types";
59+
60+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
61+ return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
62+}@@ -1,13 +1,9 @@
63-import type { Config } from "tailwindcss"
64+import type { Config } from "tailwindcss";
65+import { fontFamily } from "tailwindcss/defaultTheme";
66
67 const config = {
68 darkMode: ["class"],
69- content: [
70- './pages/**/*.{ts,tsx}',
71- './components/**/*.{ts,tsx}',
72- './app/**/*.{ts,tsx}',
73- './src/**/*.{ts,tsx}',
74- ],
75+ content: ["./src/**/*.{ts,tsx}"],
76 prefix: "",
77 theme: {
78 container: {
79@@ -72,9 +68,12 @@ const config = {
80 "accordion-down": "accordion-down 0.2s ease-out",
81 "accordion-up": "accordion-up 0.2s ease-out",
82 },
83+ fontFamily: {
84+ sans: ["var(--font-sans)", ...fontFamily.sans],
85+ },
86 },
87 },
88 plugins: [require("tailwindcss-animate")],
89-} satisfies Config
90+} satisfies Config;
91
92-export default config
93\ No newline at end of file
94+export default config;@@ -1766,6 +1766,7 @@ __metadata:
95 eslint: "npm:^8"
96 eslint-config-next: "npm:14.2.4"
97 next: "npm:14.2.4"
98+ next-themes: "npm:^0.3.0"
99 postcss: "npm:^8"
100 prettier: "npm:^3.3.2"
101 prettier-plugin-tailwindcss: "npm:^0.6.4"
102@@ -2741,6 +2742,16 @@ __metadata:
103 languageName: node
104 linkType: hard
105
106+"next-themes@npm:^0.3.0":
107+ version: 0.3.0
108+ resolution: "next-themes@npm:0.3.0"
109+ peerDependencies:
110+ react: ^16.8 || ^17 || ^18
111+ react-dom: ^16.8 || ^17 || ^18
112+ checksum: 10c0/72bd670ad6b9f547dc18cece340dfd1ac41e3e7b37eb321d4767db90bfa2c239f937011cd0efe35ca0081f1ea260051bc0868808ef39b0fbff2ddefd7146cec6
113+ languageName: node
114+ linkType: hard
115+
116 "next@npm:14.2.4":
117 version: 14.2.4
118 resolution: "next@npm:14.2.4"