feat: added dark theme in landing

.eslintrc.json

@@ -87,7 +87,8 @@
         "@/editor/": "./src/apps/editor",
         "@/landing/": "./src/apps/landing",
         "@/aero": "./src/libs/aero/index.ts",
-        "@/pulse": "./src/libs/pulse/index.ts"
+        "@/pulse": "./src/libs/pulse/index.ts",
+        "@/chain": "./src/libs/chain/index.ts"
       },
       "node": {
         "extensions": [".ts", ".tsx"],

src/apps/editor/components/menu/options/dark-menu.tsx

@@ -2,7 +2,8 @@ import { MoonIcon } from '@primer/octicons-react';
 import React, { useEffect } from 'react';
 
 import { IconButton } from '@/aero';
-import { useFeatureSwitch, useThemeMode } from '@/editor/stores';
+import { useThemeMode } from '@/chain';
+import { useFeatureSwitch } from '@/editor/stores';
 
 export const DarkThemeMenuOption: React.FC = () => {
   const { fsDarkTheme } = useFeatureSwitch('fsDarkTheme');

src/apps/editor/stores/index.ts

@@ -1,3 +1,2 @@
 export * from './global-state';
 export * from './use-horizontal-notifier';
-export * from './use-theme-mode';

src/apps/landing/components/dark-mode/index.tsx

@@ -0,0 +1,23 @@
+import { MoonIcon } from '@primer/octicons-react';
+import React from 'react';
+
+import { IconButton } from '@/aero';
+import { useThemeMode } from '@/chain';
+
+export const DarkModeToggler = () => {
+  const { mode, onToggleMode } = useThemeMode();
+
+  const handleOnClick = () => {
+    onToggleMode();
+  };
+
+  return (
+    <IconButton
+      className="!p-2 ml-auto"
+      selected={mode === 'dark'}
+      onClick={handleOnClick}
+    >
+      <MoonIcon />
+    </IconButton>
+  );
+};

src/apps/landing/components/footer/footer.tsx

@@ -3,20 +3,24 @@ import React from 'react';
 import { Grid, VCol } from '@/aero';
 
 const Link = ({ text, href }: { text: string; href: string }) => (
-  <p className="text-primary-foreground">
+  <p className="text-mutedforeground">
     <a className="hover:underline" href={href}>
       {text}
     </a>
   </p>
 );
 
 export const Footer: React.FC = () => (
-  <footer className="bg-primary mt-4 md:mt-12 px-12 py-8">
-    <Grid container size={12} className="w-full mb-12 md:mb-16">
-      <Grid item columns={1} />
-      <Grid item columns={5} md={4}>
+  <footer className="bg-muted mt-4 md:mt-12 px-12 py-8">
+    <Grid
+      container
+      size={12}
+      className="w-full max-w-5xl mx-auto mb-12 md:mb-16"
+      rowGap="lg"
+    >
+      <Grid item columns={12} sm={6} md={4}>
         <VCol variant="sm">
-          <h4 className="text-primary-foreground font-semibold text-lg mb-2">
+          <h4 className="text-mutedforeground font-semibold text-lg mb-2">
             Links
           </h4>
           <Link text="Github @mikededo" href="https://github.com/mikededo" />
@@ -26,9 +30,9 @@ export const Footer: React.FC = () => (
           />
         </VCol>
       </Grid>
-      <Grid item columns={5} md={4}>
+      <Grid item columns={12} sm={6} md={4}>
         <VCol variant="sm">
-          <h4 className="text-primary-foreground font-semibold text-lg mb-2">
+          <h4 className="text-mutedforeground font-semibold text-lg mb-2">
             Special thanks
           </h4>
           <Link text="Vercel" href="https://vercel.com" />
@@ -37,7 +41,7 @@ export const Footer: React.FC = () => (
         </VCol>
       </Grid>
     </Grid>
-    <p className="text-primary-foreground text-center w-full">
+    <p className="text-mutedforeground text-center w-full">
       Miquel de Domingo @mikededo {new Date().getFullYear()}
     </p>
   </footer>

src/apps/landing/components/nav/nav.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import { Row } from '@/aero';
 
+import { DarkModeToggler } from '../dark-mode';
+
 export const Nav: React.FC = () => (
   <Row
     as="nav"
@@ -17,5 +19,6 @@ export const Nav: React.FC = () => (
     <p className="self-center text-sm uppercase font-semibold">
       🚧 This page is still under construction 🚧
     </p>
+    <DarkModeToggler />
   </Row>
 );

src/libs/chain/index.ts

@@ -0,0 +1 @@
+export { useThemeMode } from './use-theme-mode';

tsconfig.json

@@ -24,7 +24,8 @@
       "@/editor/*": ["./src/apps/editor/*"],
       "@/landing/*": ["./src/apps/landing/*"],
       "@/aero": ["./src/libs/aero/index.ts"],
-      "@/pulse": ["./src/libs/pulse/index.ts"]
+      "@/pulse": ["./src/libs/pulse/index.ts"],
+      "@/chain": ["./src/libs/chain/index.ts"]
     },
     "allowJs": true,
     "forceConsistentCasingInFileNames": true,