Setted Up Themes in the Website using Context

Aman254 · Jan 7, 2025 · d746c26 · d746c26
1 parent 6f899d1
commit d746c26
Show file tree

Hide file tree

Showing 66 changed files with 908 additions and 252 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -2,20 +2,287 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@layer utilities {
+  .background-light850_dark100 {
+    @apply bg-light-850 dark:bg-dark-100;
+  }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+  .background-light900_dark200 {
+    @apply bg-light-900 dark:bg-dark-200;
+  }
+
+  .background-light900_dark300 {
+    @apply bg-light-900 dark:bg-dark-300;
+  }
+
+  .background-light800_darkgradient {
+    @apply bg-light-800 dark:dark-gradient;
+  }
+
+  .background-light800_dark400 {
+    @apply bg-light-800 dark:bg-dark-400 !important;
+  }
+
+  .background-light700_dark400 {
+    @apply bg-light-700 dark:bg-dark-400;
+  }
+
+  .background-light700_dark300 {
+    @apply bg-light-700 dark:bg-dark-300;
+  }
+
+  .background-light800_dark400 {
+    @apply bg-light-800 dark:bg-dark-400;
+  }
+
+  .background-light800_dark300 {
+    @apply bg-light-800 dark:bg-dark-300 !important;
+  }
+
+  .background-light800_dark200 {
+    @apply bg-light-800 dark:bg-dark-200;
+  }
+
+  .background-dark400_light900 {
+    @apply dark:bg-dark-400 bg-light-900 !important;
+  }
+
+  .text-dark100_light900 {
+    @apply text-dark-100 dark:text-light-900 !important;
+  }
+
+  .text-dark200_light900 {
+    @apply text-dark-200 dark:text-light-900;
+  }
+
+  .text-dark200_light800 {
+    @apply text-dark-200 dark:text-light-800 !important;
+  }
+
+  .text-dark300_light700 {
+    @apply text-dark-300 dark:text-light-700;
+  }
+
+  .text-dark400_light700 {
+    @apply text-dark-400 dark:text-light-700;
+  }
+
+  .text-dark500_light700 {
+    @apply text-dark-500 dark:text-light-700 !important;
+  }
+
+  .text-dark500_light500 {
+    @apply text-dark-500 dark:text-light-500;
+  }
+
+  .text-dark500_light400 {
+    @apply text-dark-500 dark:text-light-400;
+  }
+
+  .text-dark300_light900 {
+    @apply text-dark-300 dark:text-light-900 !important;
+  }
+
+  .text-dark400_light800 {
+    @apply text-dark-400 dark:text-light-800;
+  }
+
+  .text-light400_light500 {
+    @apply text-light-400 dark:text-light-500 !important;
+  }
+
+  .text-dark400_light500 {
+    @apply text-dark-400 dark:text-light-500;
+  }
+
+  .text-dark400_light900 {
+    @apply text-dark-400 dark:text-light-900 !important;
+  }
+
+  .text-light400_light500 {
+    @apply text-light-400 dark:text-light-500 !important;
+  }
+
+  .light-border {
+    @apply border-light-800 dark:border-dark-300;
+  }
+
+  .light-border-2 {
+    @apply border-light-700 dark:border-dark-400 !important;
+  }
+
+  .h1-bold {
+    @apply text-[30px] font-bold leading-[42px] tracking-tighter;
+  }
+
+  .h2-bold {
+    @apply text-[24px] font-bold leading-[31.2px];
+  }
+
+  .h2-semibold {
+    @apply text-[24px] font-semibold leading-[31.2px];
+  }
+
+  .h3-bold {
+    @apply text-[20px] font-bold leading-[26px];
+  }
+
+  .h3-semibold {
+    @apply text-[20px] font-semibold leading-[24.8px];
+  }
+
+  .base-medium {
+    @apply text-[18px] font-medium leading-[25.2px];
+  }
+
+  .base-semibold {
+    @apply text-[18px] font-semibold leading-[25.2px];
+  }
+
+  .base-bold {
+    @apply text-[18px] font-bold leading-[140%];
+  }
+
+  .paragraph-regular {
+    @apply text-[16px] font-normal leading-[22.4px];
+  }
+
+  .paragraph-medium {
+    @apply text-[16px] font-medium leading-[22.4px];
+  }
+
+  .paragraph-semibold {
+    @apply text-[16px] font-semibold leading-[20.8px];
+  }
+
+  .body-regular {
+    @apply text-[14px] font-normal leading-[19.6px];
+  }
+
+  .body-medium {
+    @apply text-[14px] font-medium leading-[18.2px];
+  }
+
+  .body-semibold {
+    @apply text-[14px] font-semibold leading-[18.2px];
+  }
+
+  .body-bold {
+    @apply text-[14px] font-bold leading-[18.2px];
+  }
+
+  .small-regular {
+    @apply text-[12px] font-normal leading-[15.6px];
+  }
+
+  .small-medium {
+    @apply text-[12px] font-medium leading-[15.6px];
+  }
+
+  .small-semibold {
+    @apply text-[12px] font-semibold leading-[15.6px];
+  }
+
+  .subtle-medium {
+    @apply text-[10px] font-medium leading-[13px] !important;
+  }
+
+  .subtle-regular {
+    @apply text-[10px] font-normal leading-[13px];
+  }
+
+  .placeholder {
+    @apply placeholder:text-light-400 dark:placeholder:text-light-500;
+  }
+
+  .invert-colors {
+    @apply invert dark:invert-0;
+  }
+
+  .shadow-light100_dark100 {
+    @apply shadow-light-100 dark:shadow-dark-100;
   }
-}
 
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  .shadow-light100_darknone {
+    @apply shadow-light-100 dark:shadow-none;
+  }
+
+  .primary-gradient {
+    background: linear-gradient(129deg, #ff7000 0%, #e2995f 100%);
+  }
+
+  .dark-gradient {
+    background: linear-gradient(
+      232deg,
+      rgba(23, 28, 35, 0.41) 0%,
+      rgba(19, 22, 28, 0.7) 100%
+    );
+  }
+
+  .light-gradient {
+    background: linear-gradient(
+      132deg,
+      rgba(247, 249, 255, 0.5) 0%,
+      rgba(229, 237, 255, 0.25) 100%
+    );
+  }
+
+  .primary-text-gradient {
+    background: linear-gradient(129deg, #ff7000 0%, #e2995f 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .flex-center {
+    @apply flex justify-center items-center;
+  }
+
+  .flex-between {
+    @apply flex justify-between items-center;
+  }
+
+  .flex-start {
+    @apply flex justify-start items-center;
+  }
+
+  .card-wrapper {
+    @apply bg-light-900 dark:dark-gradient shadow-light-100 dark:shadow-dark-100;
+  }
+
+  .btn {
+    @apply bg-light-800 dark:bg-dark-300 !important;
+  }
+
+  .btn-secondary {
+    @apply bg-light-800 dark:bg-dark-400 !important;
+  }
+
+  .btn-tertiary {
+    @apply bg-light-700 dark:bg-dark-300 !important;
+  }
+
+  .no-focus {
+    @apply focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 !important;
+  }
+
+  .markdown {
+    @apply max-w-full prose dark:prose-p:text-light-700 dark:prose-ol:text-light-700 dark:prose-ul:text-light-500 dark:prose-strong:text-white dark:prose-headings:text-white prose-headings:text-dark-400 prose-h1:text-dark-300 prose-h2:text-dark-300 prose-p:text-dark-500 prose-ul:text-dark-500 prose-ol:text-dark-500;
+  }
+
+  .markdown-editor {
+    @apply prose max-w-full prose-p:m-0 dark:prose-headings:text-white prose-headings:text-dark-400 prose-p:text-dark-500 dark:prose-p:text-light-700 prose-ul:text-dark-500 dark:prose-ul:text-light-700 prose-ol:text-dark-500 dark:prose-ol:text-light-700 dark:prose-strong:text-white prose-blockquote:text-dark-500 dark:prose-blockquote:text-light-700;
+  }
+
+  .tab {
+    @apply min-h-full dark:bg-dark-400 bg-light-800 text-light-500 dark:data-[state=active]:bg-dark-300 data-[state=active]:bg-primary-100 data-[state=active]:text-primary-500 !important;
+  }
+
+  .dark-gradient {
+    background: linear-gradient(
+      232deg,
+      rgba(23, 28, 35, 0.41) 0%,
+      rgba(19, 22, 28, 0.7) 100%
+    );
+  }
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,20 +1,18 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { Inter, Space_Grotesk } from "next/font/google";
+import ThemeProvider from "@/context/Theme";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+const inter = Inter({ subsets: ["latin"] });
+const space_grotesx = Space_Grotesk({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "DevFlow",
+  description:
+    "A community-driven platform for asking and answering programming questions. Get hel, share knowledge, and collaborate with developers from around the world. Explore topics in web development, mobile app development, algorithms, data structures, and more.",
+  icons: {
+    icon: "/images/site-logo.svg",
+  },
 };
 
 export default function RootLayout({
@@ -23,11 +21,18 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${inter.className}  ${space_grotesx.className}antialiased`}
       >
-        {children}
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   );