Dark theme added to Notes App, issue iiitl#3

Karanagarwal12 · Mar 17, 2024 · 1ea4e95 · 1ea4e95
1 parent aaa9e7f
commit 1ea4e95
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 2 deletions.
diff --git a/css/main.css b/css/main.css
@@ -3,7 +3,9 @@ body {
     height: 100%;
     margin: 0;
 }
-
+*{
+    transition: background-color 0.3s ease-in-out;
+}
 .notes {
     display: flex;
     height: 100%;
@@ -13,6 +15,32 @@ body {
     font-family: sans-serif;
 }
 
+.notes.dark .notes__sidebar,.notes.dark .notes__preview,.notes.dark .notes__body,.notes.dark .notes__title{
+    background: #151515;
+    color: #fff;
+}
+.notes.dark .notes__sidebar::-webkit-scrollbar{
+    background-color: #151515;
+}
+.notes.dark .notes__sidebar::-webkit-scrollbar-thumb{
+    background-color: #5f5f5f;
+    border-radius: 10px;
+}
+.notes.dark .notes__body{
+    background: #202020;
+    color: #fff;
+}
+.notes.dark .notes__small-updated{
+    color: #ffffffad;
+}
+.notes.dark .notes__list-item--selected{
+    background-color: #009578;
+}
+.notes.dark .btnToggleTheme{
+    color: #000;
+    background-color: #fff;
+}
+
 .notes__sidebar {
     border-right: 2px solid #dddddd;
     flex-shrink: 0;
@@ -21,6 +49,23 @@ body {
     width: 300px;
 }
 
+.btnToggleTheme{
+    width: 100%;
+    font-size: 1rem;
+    padding: 10px;
+    border-radius: 10px;
+    margin: 10px 0;
+    border: none;
+    background-color: #050505;
+    color: #fff;
+    cursor: pointer;
+    font-weight: 700;
+}
+.btnToggleTheme:hover{
+    background-color: #242424;
+    color: #fff;
+}
+
 .notes__add {
     background: #009578;
     border: none;
@@ -92,4 +137,7 @@ body {
     line-height: 1.5;
     margin-top: 2em;
     resize: none;
+    width: 90%;
+    padding: 2vw;
+    border-radius: 10px;
 }
diff --git a/js/App.js b/js/App.js
@@ -59,6 +59,9 @@ export default class App {
                 NotesAPI.deleteNote(noteId);
                 this._refreshNotes();
             },
+            onToggleTheme: () => {
+                NotesAPI.toggleTheme();
+            },
         };
     }
 }
diff --git a/js/NotesAPI.js b/js/NotesAPI.js
@@ -31,4 +31,19 @@ export default class NotesAPI {
 
         localStorage.setItem("notesapp-notes", JSON.stringify(newNotes));
     }
+
+    static toggleTheme() {
+        const btnToggleTheme = document.querySelector(".btnToggleTheme");
+        const ui__theme = document.documentElement.classList.value;
+        const notesBox = document.querySelector(".notes");
+
+        if(ui__theme!="dark"){
+            notesBox.classList.add("dark");
+            btnToggleTheme.textContent = "Light Mode";
+        }
+        else{
+            notesBox.classList.remove("dark");
+            btnToggleTheme.textContent = "Dark Mode";
+        }
+    }
 }
diff --git a/js/NotesView.js b/js/NotesView.js
@@ -1,12 +1,14 @@
 export default class NotesView {
-    constructor(root, { onNoteSelect, onNoteAdd, onNoteEdit, onNoteDelete } = {}) {
+    constructor(root, { onNoteSelect, onNoteAdd, onNoteEdit, onNoteDelete, onToggleTheme } = {}) {
         this.root = root;
         this.onNoteSelect = onNoteSelect;
         this.onNoteAdd = onNoteAdd;
         this.onNoteEdit = onNoteEdit;
         this.onNoteDelete = onNoteDelete;
+        this.onToggleTheme = onToggleTheme;
         this.root.innerHTML = `
             <div class="notes__sidebar">
+                <button class="btnToggleTheme" type="button" >Dark Mode</button>
                 <button class="notes__add" type="button">Add Note</button>
                 <div class="notes__list"></div>
             </div>
@@ -19,10 +21,21 @@ export default class NotesView {
         const btnAddNote = this.root.querySelector(".notes__add");
         const inpTitle = this.root.querySelector(".notes__title");
         const inpBody = this.root.querySelector(".notes__body");
+        const btnToggleTheme = this.root.querySelector(".btnToggleTheme");
 
         btnAddNote.addEventListener("click", () => {
             this.onNoteAdd();
         });
+        btnToggleTheme.addEventListener("click", () => {
+            this.onToggleTheme();
+        });
+
+
+        const ui__theme = document.documentElement.classList.value;
+        const notesBox = document.querySelector(".notes");
+        if (ui__theme == "dark") {
+            notesBox.classList.add("dark");
+        }
 
         [inpTitle, inpBody].forEach(inputField => {
             inputField.addEventListener("blur", () => {