apply dark/light mode color scheme.

src/components/button/index.tsx

@@ -8,11 +8,7 @@ type ButtonProps = {
 export const Button = ({ children, disabled, onClick, className }: ButtonProps) => {
   return (
     <div className={className}>
-      <button
+      <button className="btn-main" onClick={onClick} disabled={disabled}>
-        className="bg-custom-black rounded-md px-6 py-3 w-full h-full shadow"
-        onClick={onClick}
-        disabled={disabled}
-      >
         {children}
       </button>
     </div>

src/components/header/index.tsx

@@ -53,10 +53,10 @@ export function Header() {
   }
 
   return (
-    <header className="bg-custom-green-light mb-5 mx-auto border-0 rounded-xl p-4 shadow-md">
+    <header className="mb-5 p-4">
-      <div className="container flex justify-between items-center">
+      <div className="container mx-auto flex justify-between items-center">
         <a href="/" className="py-1.5 mr-4 text-lg cursor-pointer">
-          <h1 className="text-xl">Sendstr</h1>
+          <h1 className="text-xl text-primary font-semibold">Sendstr</h1>
         </a>
         <div className="flex items-center space-x-3">
           {/* <Link

src/pages/index.tsx

@@ -17,10 +17,11 @@ export default function Home({ keys }: HomeProps) {
 
   const LandingView = () => (
     <div className="max-w-[64rem] m-auto">
-      <Card>
       <div className="p-10">
-          <h1 className="text-2xl text-bold pb-5">Open source e2e encrypted shared clipboard</h1>
+        <h1 className="font-bold text-5xl md:text-7xl text-bold pb-10">
-          <p className="pb-10">
+          e2e encrypted shared clipboard
+        </h1>
+        <p className="pb-10 leading-relaxed">
           Sendstr is an open source end-to-end encrypted shared clipboard app built on top of{" "}
           <a className="underline" href="https://github.com/nostr-protocol/nostr" target="_blank">
             Nostr
@@ -29,16 +30,15 @@ export default function Home({ keys }: HomeProps) {
           default relay deletes messages after 1 hour. To get started open this page on another
           device and choose one of the options below.
         </p>
-          <div className="flex w-full">
+        <div className="flex w-full justify-between gap-8">
-            <Button className="w-1/2 px-4" onClick={() => setClientType("send")}>
+          <Button className="w-1/2 shadow-lg" onClick={() => setClientType("send")}>
             Send
           </Button>
-            <Button className="w-1/2 px-4" onClick={() => setClientType("receive")}>
+          <Button className="w-1/2 shadow-lg" onClick={() => setClientType("receive")}>
             Receive
           </Button>
         </div>
       </div>
-      </Card>
     </div>
   )
 
@@ -85,12 +85,12 @@ export default function Home({ keys }: HomeProps) {
         <link rel="manifest" href="/manifest.json" />
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"></link>
       </Head>
-      <div className="bg-custom-green-dark min-h-screen">
+      <div className="min-h-screen">
         <div className="p-5">
           <div className="max-w-[80rem] mx-auto">
             <Header />
           </div>
-          <main>
+          <main className="max-w-2xl mx-auto px-4">
             <Page />
           </main>
         </div>

src/styles/global.css

@@ -2,6 +2,35 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
+:root {
-    color: #FFFFFF
+    --orange: #fb8500;
+    --orange-light: #ffb703;
+    --green: #004f2d;
+    --green-light: #7dc95e;
+    --red: #ff4e33;
+    --red-light:#ff8370;
+}
+
+.light {
+    --primary: var(--orange);
+    --secondary: var(--green);
+    --warning: var(--red);
+}
+
+.dark {
+    --primary: var(--orange-light);
+    --secondary: var(--green-light);
+    --warning: var(--red-light);
+}
+
+@layer base {
+    body {
+        @apply dark:bg-black dark:text-gray-100 bg-white text-gray-900
+    }
+}
+
+@layer components {
+    .btn-main {
+      @apply bg-primary rounded-md px-6 py-3 w-full h-full shadow text-gray-100 dark:text-gray-900 font-semibold
+    }
   }

tailwind.config.js

@@ -9,9 +9,9 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        "custom-green-light": "#6b9370",
+        primary: "var(--primary)",
-        "custom-green-dark": "#4D6A51",
+        secondary: "var(--secondary)",
-        "custom-black": "#3C3744",
+        warning: "var(--warning)",
       },
     },
   },