Timer Functionality to Automate Changes between Light and Dark Mode

src/popup.css

@@ -270,6 +270,17 @@ button#document_bg_save_custom:hover {
   background-color: var(--accent-color);
 }
 
+/* Timer CSS */
+button#timer_save_times {
+  background-color: var(--secondary-background-color);
+  border-radius: 4px;
+}
+
+button#timer_save_times:hover {
+  background-color: var(--accent-color);
+}
+/* */
+
 #version {
   color: var(--tertiary-text-color);
   margin: 0;

src/popup.html

@@ -42,9 +42,17 @@ <h1>DocsAfterDark Options</h1>
           <div id="modes" class="button_row">
             <button id="mode_dark" value="dark" class="accent_button">Dark</button>
             <button id="mode_light" value="light" class="accent_button">Light</button>
+            <button id="mode_timer" value ="timer" class = "accent_button">Dark on Times</button>
             <button id="mode_off" value="off" class="accent_button">Off</button>
           </div>
+          <div id="timer_for_mode_switch" class="option_row hidden">
+            <input id="startTime" placeholder="8:00 PM/20:00" />
+            <input id="endTime" placeholder="8:00 AM/8:00" />
+            <button id="timer_save_times">Set</button>
+            <!-- TO DO: Add in Checkboxes to Switch from Dark > Light or Dark > Off -->
         </div>
+        </div>
+
 
       <div class="option_section">
         <p class="section_label">Dark Mode Variant</p>
@@ -138,6 +146,7 @@ <h1>DocsAfterDark Options</h1>
         <button id="spectrum_reset" disabled>Reset</button>
       </div>
 
+
       <!-- <div class="option_section" id="debug_section">
         <p class="section_label">Debug</p>
         <div class="option_container">
@@ -157,7 +166,6 @@ <h1>DocsAfterDark Options</h1>
           <button id="debug_clear">Clear Storage</button>
         </div>
       </div> -->
-
       <hr />
       <footer>
         <p id="version"></p>

src/popup.js

@@ -134,13 +134,15 @@ function clear_storage() {
   browser_namespace.storage.local.clear();
 }
 
+
 ///////////////
 // VARIABLES //
 ///////////////
 
 const mode_off            = 0;
 const mode_light          = 1;
 const mode_dark           = 2;
+const mode_timer          = 3; 
 
 const dark_mode_normal    = 0;
 const dark_mode_eclipse   = 1;
@@ -158,6 +160,12 @@ var selected_mode;
 
 var document_inverted_state = false;
 
+//Timing Related Variables for Switching on and Off. 
+const timer_for_mode_switch         = document.querySelector("#timer_for_mode_switch");
+const timer_set_times              = document.querySelector("#timer_save_times"); 
+const timer_start_times             = document.querySelector("#startTime");
+const timer_end_times             = document.querySelector("#endTime"); 
+
 // DARK MODE VARIANTS
 const dark_mode_normal_button   = document.querySelector("#dark_mode_normal");
 const dark_mode_eclipse_button  = document.querySelector("#dark_mode_eclipse");
@@ -223,12 +231,22 @@ document.querySelectorAll("#modes button").forEach(function (e) {
 
     this.classList.add("selected");
     selected_mode = this.value;
-
+
+    //
+    if(selected_mode != "timer"){
+      timer_for_mode_switch.classList.add("hidden");
+    }
+    else{
+      timer_for_mode_switch.classList.remove("hidden");
+      set_storage("mode", mode_timer)
+    }
+//
     if (selected_mode == "off") {
       set_storage("mode", mode_off);
-    } else if (selected_mode == "light") {
+    } 
+
+    else if (selected_mode == "light") {
       set_storage("mode", mode_light);
-
       if (document_bg_option != "black" && document_bg_option != "custom") {
         // UPDATE INVERT CHECKBOXES
         document_inverted_checkbox.checked = false;
@@ -239,7 +257,6 @@ document.querySelectorAll("#modes button").forEach(function (e) {
       }
     } else if (selected_mode == "dark") {
       set_storage("mode", mode_dark);
-
       if (document_bg_option != "default" && document_bg_option != "custom") {
         // UPDATE INVERT CHECKBOXES
         document_inverted_checkbox.checked = true;
@@ -249,6 +266,9 @@ document.querySelectorAll("#modes button").forEach(function (e) {
         update_storage("invert", "invert", true);
       }
     }
+
+
+
   });
 });
 
@@ -352,6 +372,14 @@ document_bg_custom_save.addEventListener("click", function (e) {
     set_storage("custom_bg", document_bg_custom_input.value);
 });
 
+// Add Timer Values to the Storage 
+timer_set_times.addEventListener("click", function (e) {
+  if(timer_start_times.value){
+  set_storage("startTime", timer_start_times.value);
+  set_storage("endTime", timer_end_times.value);
+  }
+});
+
 ////////////////////////////
 // INVERT CLICK LISTENERS //
 ////////////////////////////
@@ -602,6 +630,7 @@ spectrum_bar.addEventListener("mousedown", function (e) {
   });
 });
 
+
 ///////////////////
 // LOAD SETTINGS //
 ///////////////////
@@ -618,6 +647,8 @@ try {
       "temp_accent_color",
       "dark_mode",
       "button_options",
+      "endTime", 
+      "startTime", 
       "raise_button", // DEPRECATED BUT KEEP FOR BACKWARDS COMPATIBILITY
       "on", // DEPRECATED BUT KEEP FOR BACKWARDS COMPATIBILITY
     ],
@@ -627,7 +658,8 @@ try {
       let custom_data   = data.custom_bg;
       let invert_data   = data.invert;
       let border_shown  = data.show_border;
-
+      let setEndTime = data.endTime; 
+      let setStartTime = data.startTime; 
       ////////////////////
       // PARSE SETTINGS //
       ////////////////////
@@ -645,7 +677,15 @@ try {
           selected_mode = "off";
         } else if (data.mode == mode_light) {
           selected_mode = "light";
-        } else {
+        } 
+        else if(data.mode == mode_timer){
+          selected_mode = "timer";
+          timer_for_mode_switch.classList.remove("hidden");
+          timer_start_times.value = setStartTime;
+          timer_end_times.value = setEndTime; 
+
+        }
+        else {
           selected_mode = "dark";
         }
       }
@@ -762,6 +802,7 @@ try {
       initiateKnob(accent_color.hue);
       setPopupAccentColor(accent_color);
 
+
       ///////////////////////
       // DARK MODE VARIANT //
       ///////////////////////
@@ -823,3 +864,4 @@ try {
 // });
 
 
+