From 3b5e85dbbb6bf73d7abd48434832fe2d2fe32b57 Mon Sep 17 00:00:00 2001
From: Aditya Padey <askadityapandey@gmail.com>
Date: Wed, 10 Jan 2024 20:14:44 +0530
Subject: [PATCH] Dark Mode

---
 src/App.scss            | 18 ++++++++++++++++--
 src/App.tsx             |  6 ++++--
 src/DarkModeToggle.scss | 31 +++++++++++++++++++++++++++++++
 src/DarkModeToggle.tsx  | 21 +++++++++++++++++++++
 4 files changed, 72 insertions(+), 4 deletions(-)
 create mode 100644 src/DarkModeToggle.scss
 create mode 100644 src/DarkModeToggle.tsx

diff --git a/src/App.scss b/src/App.scss
index 319edd6..f137c18 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -67,6 +67,8 @@
 
   textarea,
   input {
+    background-color: var(--background-color);
+    color: var(--text-color);
     font-size: 20px;
     font-weight: 500;
     color: #868e96;
@@ -93,7 +95,7 @@
 
   .encrypt,
   .decrypt {
-    background: none;
+    //background: none;
     border: none;
     font-size: 20px;
     padding: 5px;
@@ -104,7 +106,19 @@
       border-bottom: 3px solid #0c8599;
     }
   }
-
+  .dark-mode-toggle {
+    background: #03071e;
+    color: #fff;  // Adjust text color for better contrast
+    padding: 10px;
+    margin: 5px;
+    cursor: pointer;
+    border: none;
+    font-size: 16px;
+  
+    &:hover {
+      background: #1a1a1a;  // Adjust hover color if needed
+    }
+  }
   .encrypt-btn,
   .decrypt-btn {
     background: #1098ad;
diff --git a/src/App.tsx b/src/App.tsx
index 3137552..197d8cb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,15 +5,17 @@ import EncryptView from "./EncryptView";
 import clsx from "clsx";
 import GitHubCorner from "./GithubCorner";
 import Footer from "./Footer";
-
+import DarkModeToggle from './DarkModeToggle';
 const VIEW = {
   ENCRYPT: 0,
   DECRYPT: 1,
 };
-function App() {
+const App: React.FC = () => {
   const [activeView, setActiveView] = useState(VIEW.ENCRYPT);
   return (
     <div className="App">
+      <div className="darkwave" style={{  position: "absolute" , left: 0}}>
+      <DarkModeToggle  /></div>
       <GitHubCorner />
       <h1 style={{ color: "#0b7285" }}>Cryptmoji</h1>
       <h3>Encrypt your messages into Emojis, Latin and Math Symbols</h3>
diff --git a/src/DarkModeToggle.scss b/src/DarkModeToggle.scss
new file mode 100644
index 0000000..7e9c9fd
--- /dev/null
+++ b/src/DarkModeToggle.scss
@@ -0,0 +1,31 @@
+
+.dark-mode {
+    --background-color: #000000;
+    --text-color: #fff;
+  }
+  body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+  }
+ // Add these styles for input fields in both light and dark modes
+input {
+  font-size: 20px;
+  font-weight: 500;
+  color: #868e96;
+  font-weight: bold;
+  border: none;
+  border-radius: 0.25rem;
+  box-shadow: 0 0 0 1px #aaa;
+
+  &.dark-mode {
+    color: #fff;  // Adjust text color for dark mode
+    background-color: #555;  // Adjust background color for dark mode
+  }
+}
+
+// Add these styles for radio buttons in both light and dark modes
+input[type="radio"] {
+  box-shadow: none;
+
+
+}
diff --git a/src/DarkModeToggle.tsx b/src/DarkModeToggle.tsx
new file mode 100644
index 0000000..2ec21d5
--- /dev/null
+++ b/src/DarkModeToggle.tsx
@@ -0,0 +1,21 @@
+// DarkModeToggle.tsx
+
+import React, { useState } from 'react';
+import './DarkModeToggle.scss';
+
+const DarkModeToggle: React.FC = () => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  const toggleDarkMode = () => {
+    setIsDarkMode((prevMode) => !prevMode);
+    document.body.classList.toggle('dark-mode');
+  };
+
+  return (
+    <button className="dark-mode-toggle" onClick={toggleDarkMode}>
+      {isDarkMode ? 'Light Mode' : 'Dark Mode'}
+    </button>
+  );
+};
+
+export default DarkModeToggle;