aXenDeveloper · aXenDeveloper · Sep 9, 2023 · Sep 8, 2023 · Sep 9, 2023
diff --git a/docs/components/counters.module.css b/docs/components/counters.module.css
diff --git a/docs/components/counters.tsx b/docs/components/counters.tsx
diff --git a/docs/pages/_meta.json b/docs/pages/_meta.json
@@ -12,6 +12,7 @@
     "type": "separator",
     "title": "Frontend"
   },
+  "theme": "Theme Mode",
   "about": {
     "title": "About",
     "type": "page"

diff --git a/docs/pages/graphql/mutation.mdx b/docs/pages/graphql/mutation.mdx
@@ -1,3 +1,7 @@
 # Mutation
 
-Test
+import { Callout } from 'nextra/components';
+
+<Callout type="warning" emoji="⚠️">
+  This page is in progress.
+</Callout>
diff --git a/docs/pages/graphql/query.mdx b/docs/pages/graphql/query.mdx
@@ -1,3 +1,7 @@
 # Query
 
-Test
+import { Callout } from 'nextra/components';
+
+<Callout type="warning" emoji="⚠️">
+  This page is in progress.
+</Callout>
diff --git a/docs/pages/theme.mdx b/docs/pages/theme.mdx
@@ -0,0 +1,39 @@
+# Theme Mode
+
+We're support three theme modes: `light`, `dark` and `auto`. VitNode use Talwind CSS as default style. You can read more about it in [Talwind CSS Dark Theme Documentation](https://tailwindcss.com/docs/dark-mode).
+
+## Custom style
+
+For some reason you want to custom your own style, you can do it by create a custom `SCSS Module` file.
+
+### All themes
+
+```scss
+.test {
+  background-color: red;
+}
+```
+
+### Only dark theme
+
+```scss
+:is(.dark) .test {
+  background-color: orange;
+}
+```
+
+### Only light theme
+
+```scss
+:is(.light) .test {
+  background-color: blue;
+}
+```
+
+## Default Theme
+
+import { Callout } from 'nextra/components';
+
+<Callout type="warning" emoji="⚠️">
+  This page is in progress.
+</Callout>
diff --git a/frontend/app/[locale]/layout.tsx b/frontend/app/[locale]/layout.tsx
@@ -28,7 +28,7 @@ export default async function LocaleLayout({ children, params: { locale } }: Pro
   return (
     <html lang={locale} className={montserrat.className}>
       <body>
-        <ThemeProvider>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           <NextIntlClientProvider locale={locale} messages={messages}>
             <Layout>{children}</Layout>
           </NextIntlClientProvider>

diff --git a/frontend/app/[locale]/page.tsx b/frontend/app/[locale]/page.tsx
@@ -8,6 +8,28 @@ export default function Page() {
   return (
     <h1>
       {t('test')} <ModeToggle />
+      <br />
+      <div className="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
+        <div>
+          <span className="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
+            <svg
+              className="h-6 w-6 text-white"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+            />
+          </span>
+        </div>
+        <h3 className="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">
+          Writes Upside-Down
+        </h3>
+        <p className="text-slate-500 dark:text-slate-400 mt-2 text-sm">
+          The Zero Gravity Pen can be used to write in any orientation, including upside-down. It
+          even works in outer space.
+        </p>
+      </div>
     </h1>
   );
 }
diff --git a/frontend/styles/global.scss b/frontend/styles/global.scss
@@ -8,47 +8,47 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --foreground: 0 0% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 0 0% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 72.2% 50.6%;
+    --primary-foreground: 0 85.7% 97.3%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 72.2% 50.6%;
     --radius: 0.5rem;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 72.2% 50.6%;
+    --primary-foreground: 0 85.7% 97.3%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 72.2% 50.6%;
   }
 }
 

diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts