feat: adds theming

easyflow-software · Jul 6, 2024 · 3dcaf41 · 3dcaf41
1 parent 99bb419
commit 3dcaf41
Show file tree

Hide file tree

Showing 10 changed files with 228 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "next": "14.2.4",
     "next-connect": "1.0.0",
     "next-i18n-router": "5.5.0",
+    "next-themes": "^0.3.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-i18next": "14.1.2",

diff --git a/public/locales/de/login.json b/public/locales/de/login.json
@@ -0,0 +1,3 @@
+{
+  "login": "Anmelden"
+}
diff --git a/public/locales/en/login.json b/public/locales/en/login.json
@@ -0,0 +1,3 @@
+{
+  "login": "Login"
+}
diff --git a/src/app/[locale]/login/page.tsx b/src/app/[locale]/login/page.tsx
@@ -0,0 +1,23 @@
+import TranslationsProvider from '@/src/components/translation-provider/TranslationsProvider';
+import initTranslations from '@i18n';
+import { FunctionComponent } from 'react';
+
+interface HomeProps {
+  params: {
+    locale: string;
+  };
+}
+
+const i18nNamespaces = ['login'];
+
+const Home: FunctionComponent<HomeProps> = async ({ params: { locale } }) => {
+  const { t, resources } = await initTranslations(locale, i18nNamespaces);
+
+  return (
+    <TranslationsProvider resources={resources} locale={locale} namespaces={i18nNamespaces}>
+      <h1>{t('login:login')}</h1>
+    </TranslationsProvider>
+  );
+};
+
+export default Home;
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
@@ -1,3 +1,4 @@
+import { ThemeSwitcher } from '@/src/components/theme-switcher/ThemeSwitcher';
 import TranslationsProvider from '@/src/components/translation-provider/TranslationsProvider';
 import { Button } from '@nextui-org/react';
 import { FunctionComponent } from 'react';
@@ -15,8 +16,127 @@ const Home: FunctionComponent<HomeProps> = async ({ params: { locale } }) => {
   const { t, resources } = await initTranslations(locale, i18nNamespaces);
 
   return (
-    <TranslationsProvider resources={resources} locale={locale} namespaces={i18nNamespaces}>
-      <Button color="primary">{t('home:button')}</Button>
+    <TranslationsProvider resources={resources} namespaces={i18nNamespaces} locale={locale}>
+      <ThemeSwitcher />
+      <div className="m-2">
+        <Button className="m-1" color="primary">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="secondary">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="success">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="warning">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="danger">
+          {t('home:button')}
+        </Button>
+      </div>
+      <div className="m-2">
+        <Button className="m-1" color="primary" variant="faded">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="secondary" variant="faded">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="success" variant="faded">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="warning" variant="faded">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="danger" variant="faded">
+          {t('home:button')}
+        </Button>
+      </div>
+      <div className="m-2">
+        <Button className="m-1" color="primary" variant="bordered">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="secondary" variant="bordered">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="success" variant="bordered">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="warning" variant="bordered">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="danger" variant="bordered">
+          {t('home:button')}
+        </Button>
+      </div>
+      <div className="m-2">
+        <Button className="m-1" color="primary" variant="light">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="secondary" variant="light">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="success" variant="light">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="warning" variant="light">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="danger" variant="light">
+          {t('home:button')}
+        </Button>
+      </div>
+      <div className="m-2">
+        <Button className="m-1" color="primary" variant="flat">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="secondary" variant="flat">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="success" variant="flat">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="warning" variant="flat">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="danger" variant="flat">
+          {t('home:button')}
+        </Button>
+      </div>
+      <div className="m-2">
+        <Button className="m-1" color="primary" variant="ghost">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="secondary" variant="ghost">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="success" variant="ghost">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="warning" variant="ghost">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="danger" variant="ghost">
+          {t('home:button')}
+        </Button>
+      </div>
+      <div className="m-2">
+        <Button className="m-1" color="primary" variant="shadow">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="secondary" variant="shadow">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="success" variant="shadow">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="warning" variant="shadow">
+          {t('home:button')}
+        </Button>
+        <Button className="m-1" color="danger" variant="shadow">
+          {t('home:button')}
+        </Button>
+      </div>
     </TranslationsProvider>
   );
 };

diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -1,8 +1,15 @@
 import { NextUIProvider } from '@nextui-org/react';
+import { ThemeProvider } from 'next-themes';
 import { FunctionComponent, PropsWithChildren } from 'react';
 
 const Providers: FunctionComponent<PropsWithChildren> = ({ children }) => {
-  return <NextUIProvider>{children}</NextUIProvider>;
+  return (
+    <NextUIProvider>
+      <ThemeProvider attribute="class" defaultTheme="dark">
+        {children}
+      </ThemeProvider>
+    </NextUIProvider>
+  );
 };
 
 export default Providers;
diff --git a/src/components/theme-switcher/ThemeSwitcher.tsx b/src/components/theme-switcher/ThemeSwitcher.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { Button } from '@nextui-org/react';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+
+export function ThemeSwitcher(): React.ReactNode {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <div>
+      The current theme is: {theme}
+      <Button onClick={() => setTheme('light')}>Light Mode</Button>
+      <Button onClick={() => setTheme('dark')}>Dark Mode</Button>
+    </div>
+  );
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -12,6 +12,35 @@ const config: Config = {
     extend: {},
   },
   darkMode: 'class',
-  plugins: [nextui()],
+  plugins: [
+    nextui({
+      prefix: 'nextui', // prefix for themes variables
+      themes: {
+        light: {
+          colors: {
+            background: '#f6fefe',
+            foreground: '#021d1d',
+            primary: {
+              DEFAULT: '#0b7779',
+              foreground: '#021d1d',
+            },
+            secondary: '#f269c0',
+          }, // light theme colors
+        },
+        dark: {
+          colors: {
+            background: '#010909',
+            foreground: '#e2fdfd',
+            primary: {
+              DEFAULT: '#86f2f4',
+              foreground: '#021d1d',
+            },
+            secondary: '#960d64',
+          }, // dark theme colors
+        },
+        // ... custom themes
+      },
+    }),
+  ],
 };
 export default config;
diff --git a/tsconfig.json b/tsconfig.json
@@ -19,9 +19,10 @@
     ],
     "paths": {
       "@/*": ["./*"],
-      "@components/*": ["./src/components/*"]
+      "@components/*": ["./src/components/*"],
+      "@i18n": ["./src/app/i18n"]
     }
   },
   "exclude": ["node_modules"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "i18n.config.ts"]
 }