Merge pull request #15 from penge/dark-mode

Dark mode
penge · Nov 23, 2019 · 02c0261 · 02c0261
2 parents 9d22eb1 + c4af8a7
commit 02c0261
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 17 deletions.
diff --git a/image.png b/image.png
diff --git a/manifest.json b/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "My Notes",
   "description": "Chrome Extension that turns your \"New Tab\" into a note taking tool.",
-  "version": "1.2",
+  "version": "1.3",
   "permissions": ["storage"],
   "chrome_url_overrides" : {
     "newtab": "newtab.html"

diff --git a/newtab.html b/newtab.html
@@ -2,13 +2,16 @@
 <html>
 
 <head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Notes</title>
   <link rel="stylesheet" href="notes.css">
 </head>
 
 <body>
   <textarea id="textarea" style="font-size:200%"></textarea>
   <div id="settings">
+    <div id="mode"></div>
     <div id="minus">A</div>
     <div id="plus">A</div>
   </div>

diff --git a/notes.css b/notes.css
@@ -4,6 +4,12 @@ body {
   bottom: 0;
   left: 0;
   right: 0;
+  opacity: 0;
+  transition: opacity .3s ease-in-out;
+}
+
+#light, #dark {
+  opacity: 1;
 }
 
 #textarea {
@@ -17,10 +23,6 @@ body {
   padding: 5px;
 }
 
-#textarea::placeholder {
-   color: silver;
-}
-
 #settings {
   z-index: 100;
   position: fixed;
@@ -32,6 +34,19 @@ body {
   background: white;
   cursor: pointer;
   user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+#mode {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  top: 5px;
+  left: 5px;
+  position: relative;
+  border-width: 5px;
+  border-style: solid;
 }
 
 #minus, #plus {
@@ -46,15 +61,40 @@ body {
   font-weight: bold;
 }
 
-@media (prefers-color-scheme: dark) {
-  body, #settings {
-    background: #36393f;
-  }
-  #textarea, #settings {
-    background: #36393f;
-    color: white;
-  }
-  #textarea::placeholder {
-   color: #e0e0e0;
-  }
+
+/* Light mode */
+
+#light,
+#light #textarea,
+#light #settings {
+  background: white;
+  color: black;
+}
+
+#light #textarea::placeholder {
+  color: silver;
+}
+
+#light #mode {
+  border-color: white;
+  background: black;
+}
+
+
+/* Dark mode */
+
+#dark,
+#dark #textarea,
+#dark #settings {
+  background: #36393f;
+  color: white;
+}
+
+#dark #textarea::placeholder {
+  color: #e0e0e0;
+}
+
+#dark #mode {
+  border-color: #36393f;
+  background: white;
 }
diff --git a/notes.js b/notes.js
@@ -1,8 +1,13 @@
+"use strict";
+
+(function() {
+
 /* global chrome */
 
 /* Elements */
 
 const textarea = document.getElementById("textarea");
+const mode = document.getElementById("mode");
 const minus = document.getElementById("minus");
 const plus = document.getElementById("plus");
 
@@ -24,6 +29,11 @@ const changeSize = (size) => {
   chrome.storage.sync.set({ size: size });
 };
 
+const setMode = (mode) => {
+  document.body.id = mode;
+  chrome.storage.sync.set({ mode: mode });
+};
+
 
 /* Font size */
 
@@ -46,16 +56,29 @@ plus.addEventListener("click", function () {
 });
 
 
+/* Mode */
+
+const defaultMode = "light";
+let currentMode = "light";
+
+mode.addEventListener("click", function () {
+  currentMode = currentMode === "light" ? "dark" : "light";
+  setMode(currentMode);
+});
+
+
 /* Storage */
 
-chrome.storage.sync.get(["value", "size"], result => {
+chrome.storage.sync.get(["value", "size", "mode"], result => {
   textarea.value = result.value || "";
   textarea.style.fontSize = (result.size || defaultSize) + "%";
   setPlaceholder();
+  setMode(result.mode || defaultMode);
 });
 
 textarea.addEventListener("keyup", () => {
   chrome.storage.sync.set({ value: textarea.value });
   setPlaceholder();
 });
 
+})(); // IIFE