add new setting for dark mode

docs/changelog.md

@@ -13,12 +13,14 @@ PRs and other ideas welcome.
 
 ## Changes ##
 
-**October 2020**
+**November 2020**
 #### 2.3.1
+- Dark mode 🌚
 - Visualise available storage on the settings page
 - Add option to select time as "now" for [monday, weekend, next-week, next-month]
-- Safari specific changes. No release planned on app store, but able to build for personal use -> [See how](https://github.com/rohanb10/snoozz-tab-snoozing/blob/master/docs/safari.md)
+- Webkit specific changes. [See how](https://github.com/rohanb10/snoozz-tab-snoozing/blob/master/docs/safari.md) to build for Safari (not distributed through app store)
 
+**October 2020**
 #### 2.3.0
 - First release on Microsoft Edge 🎉
 - Add Search to the Dashboard -> `urls | titles | snooze date | wake up date | day of week | month | relative time | snoozz state`

html/dashboard.html

@@ -52,7 +52,7 @@
 		</div>
 	</div>
 	<p id="api-message" class="hidden">Like most people, tabs may take 10 minutes to get out of bed. Mainly due to API restrictions, but also, laziness.</p>
-	<div data-hover="Settings" class="settings"><img src="../icons/settings.png"></div>
+	<div data-hover="Settings" class="settings"><img src="../icons/settings.svg"></div>
 	<script type="text/javascript" src="../scripts/dayjs.min.js"></script>
 	<script type="text/javascript" src="../scripts/common.js"></script>
 	<script type="text/javascript" src="../scripts/dashboard.js"></script>

html/popup.html

@@ -31,7 +31,7 @@ <h3 class="center">Snooze Until</h3>
 			<span class="upcoming" data-today=""></span>
 		</div>
 	</div>
-	<div class="settings" data-hover="Settings"><img data-href="/html/settings.html" src="../icons/settings.png"></div>
+	<div class="settings" data-hover="Settings"><img data-href="/html/settings.html" src="../icons/settings.svg"></div>
 	<script type="text/javascript" src="../scripts/dayjs.min.js"></script>
 	<script type="text/javascript" src="../scripts/common.js"></script>
 	<script type="text/javascript" src="../scripts/popup.js"></script>

html/rise_and_shine.html

@@ -13,6 +13,7 @@
 		.tab-list {margin-top: 3em}
 		.tab {padding: 1em; margin: .75em 0; border-radius: .25em; cursor: pointer}
 		.tab:hover {background-color: #f7f7f7}
+		body.dark .tab:hover {background-color: #222}
 		.icon {width: 10%}
 		.icon img {height: 2em; width: 2em}
 		.tab-title {width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}

html/settings.html

@@ -79,6 +79,15 @@ <h4>Close popup automatically after</h4>
 				<option value="2000">2 seconds</option>
 			</select></div>
 		</div>
+		<div class="input-container flex">
+			<div>
+				<h4>Extension Theme</h4>
+			</div>
+			<div class="select-wrapper"><select id="theme">
+				<option value="light">Light</option>
+				<option value="dark">Dark</option>
+			</select></div>
+		</div>
 		<div class="input-container flex">
 			<div>
 				<h4>Show badge on Snoozz icon</h4>

manifest.json

@@ -1,7 +1,7 @@
 {
 	"name": "Snoozz - Snooze Tabs & Windows for later",
 	"short_name": "Snoozz",
-	"description": "Declutter your browser by snoozing tabs and windows for later, and have them automatically wake up when you actually need them.",
+	"description": "Declutter your browser by snoozing tabs and windows until you actually need them.",
 	"version": "2.3.1",
 
 	"icons": {

scripts/background.js

@@ -130,6 +130,7 @@ async function setUpExtension() {
 		evening: 18,
 		timeOfDay: 'morning',
 		history: 14,
+		theme: 'light',
 		badge: 'today',
 		closeDelay: 1000,
 		contextMenu: ['today-evening', 'tom-morning', 'tom-evening', 'weekend', 'monday']

scripts/common.js

@@ -84,6 +84,13 @@ async function createWindow(tabId) {
 }
 
 /*	CONFIGURE	*/
+
+async function setTheme() {
+	var t = await getOptions('theme');
+	document.body.classList.toggle('dark', t === 'dark');
+}
+setTheme();
+
 async function updateBadge(cachedTabs, cachedBadge) {
 	var num = 0;
 	var badge = cachedBadge || await getOptions('badge');

scripts/popup.js

@@ -138,13 +138,16 @@ function changePreviewAfterSnooze(previewParent, choice) {
 	var preview = previewParent.querySelector(`.preview`);
 	preview.classList.add('snoozed');
 	preview.textContent = '';
-	preview.appendChild(Object.assign(document.createElement('span'), {textContent: `Snoozing ${previewParent.getAttribute('data-preview')}`}));
-	preview.style.transition = `background-position ${closeDelay - 100}ms linear, color 400ms ease-in-out ${(closeDelay/2) - 250}ms`;
-	setTimeout(_ => {
-		preview.style.color = choice.classList.contains('dark-on-hover') ? '#fff' : '#000';
-		preview.style.backgroundImage = `linear-gradient(to right, ${getComputedStyle(choice).backgroundColor} 50%, rgb(221, 221, 221) 0)`
-		preview.classList.add('animate');
-	});
+	preview.appendChild(Object.assign(document.createElement('span'), {
+		textContent: `Snoozing ${previewParent.getAttribute('data-preview')}`,
+		style: {
+			transition: `color 400ms ease-in-out ${(closeDelay/2) - 250}ms`,
+			color: choice.classList.contains('dark-on-hover') ? '#fff' : '#000',
+		}
+	}));
+	preview.style.transition = `background-position ${closeDelay - 100}ms linear`
+	preview.style.backgroundImage = `linear-gradient(to right, ${getComputedStyle(choice).backgroundColor} 50%, ${getComputedStyle(preview).backgroundColor} 0)`
+	preview.classList.add('animate');
 }
 
 window.onload = init

scripts/settings.js

@@ -48,7 +48,7 @@ async function calculateStorage() {
 }
 
 function updateFormValues(storage) {
-	['morning', 'evening', 'timeOfDay', 'history', 'badge', 'closeDelay'].forEach(o => document.getElementById(o).value = storage[o].toString())
+	['morning', 'evening', 'timeOfDay', 'history', 'theme', 'badge', 'closeDelay'].forEach(o => {if (storage[o]) document.getElementById(o).value = storage[o].toString()})
 	if (storage.contextMenu.length > 0) storage.contextMenu.forEach(o => document.getElementById(o).checked = true);
 	if (storage.contextMenu.length > 4) document.querySelector('.choice-list').classList.add('disabled');
 }
@@ -67,6 +67,7 @@ async function save(e) {
 	document.querySelectorAll('select').forEach(s => options[s.id] = isNaN(s.value) ? s.value : parseInt(s.value));
 	options.contextMenu = Array.from(document.querySelectorAll('#contextMenu input:checked')).map(c => c.id);
 	saveOptions(options);
+	setTheme();
 }
 
 function toggleRightClickOptions(e) {
@@ -116,6 +117,7 @@ async function resetSettings() {
 		morning: 9,
 		evening: 18,
 		timeOfDay: 'morning',
+		theme: 'light',
 		history: 14,
 		badge: 'today',
 		closeDelay: 1000,

styles/clock.css

@@ -4,11 +4,11 @@
 .face-1,.face-2,.middle{background:#f8f8f8;border-radius:50%}
 .hour,.minute,.second,.arm{border-radius:50px}
 .contain-clock{margin:-75px auto;width:155px;height:200px}
-.bell{background:#F2B147}
+.bell{background:#f3b845}
 .middle{background:#4A89C5}
 .bell,.face-2{box-shadow:inset -5px 0 1px rgba(0,0,0,.1)}
 .face-1{top:23px;left:23px;z-index:3;width:109px;height:109px}
-.face-2{margin:10em auto;z-index:2;border:15px solid #E34D68;width:125px;height:125px}
+.face-2{margin:10em auto;z-index:2;border:15px solid #df4e76;width:125px;height:125px}
 .line{left:50%;margin-left:-3px;background:#575757;width:6px;height:126px}
 .line-2{left:63px;transform:rotate(90deg)}
 .line-3,.line-4,.line-5,.line-6,.second{margin-left:-1px;width:2px}

styles/common.css

@@ -10,11 +10,20 @@ body, html, h1, h3, h4, h4+p {
 	margin: 0 auto;
 }
 body {
-	background-color: #FFF;
+	--color: #000;
+	--bg-color: #fff;
+
+	color: var(--color);
+	background-color: var(--bg-color);
+
 	padding: 1em 0;
 	font-family: 'Arial', sans-serif;
 	font-size: .8rem;
 }
+body.dark {
+	--bg-color: #333;
+	--color: #FFF;
+}
 @-moz-document url-prefix() {
 	body {
 		font-size: .75em;
@@ -39,6 +48,9 @@ body {
 	margin-left: 1.5em;
 	max-height: 2.5em;
 }
+body.dark .snoozz-text, body.dark img[src="../icons/unknown.png"], body.dark .settings img {
+	filter: invert(1);
+}
 .scroll-logo {
 	position: fixed;
 	top: 0;
@@ -61,7 +73,7 @@ body {
 	animation: spin 5s infinite linear;
 }
 a {
-	color: #000;
+	color: var(--color);
 	cursor: pointer;
 	text-decoration: underline;
 }
@@ -76,15 +88,9 @@ a:hover {
 	top: 0.5em;
 	right: 0.5em;
 	cursor: pointer;
-	box-sizing: border-box;
-	border: 1px solid white;
 }
 .settings img, .dashboard img {
 	width: 3em;
-	transition: background-color .3s ease-in-out;
-	-webkit-backface-visibility: hidden;
-	border: 1px solid white;
-	-webkit-background-clip: padding-box;
 	filter: grayscale(100%)
 }
 .settings:before, .dashboard:before {
@@ -98,17 +104,12 @@ a:hover {
 	touch-action: none;
 	transition: opacity .3s ease-in-out;
 	white-space: nowrap;
-	background-color: #fff;
 }
 .settings:hover:before, .dashboard:hover:before {
 	opacity: 1;
 }
 .settings img:hover {
-	filter: grayscale(0);
-	background: linear-gradient(-90deg, rgba(223,78,118,1) 0%, rgba(243,184,69,1) 100%);
-	clip-path: polygon(87% 25%, 75% 13%, 67% 21%, 58% 17%, 58% 6%, 42% 6%, 42% 17%, 33% 21%, 25% 13%, 13% 25%, 21% 33%, 17% 41%, 6% 41%, 6% 59%, 17% 59%, 20% 67%, 13% 75%, 25% 87%, 33% 79%, 41% 83%, 41% 94%, 59% 94%, 59% 83%, 67% 80%, 75% 88%, 88% 76%, 80% 67%, 83% 59%, 94% 59%, 94% 41%, 83% 41%, 79% 33%);
-	-webkit-clip-path: polygon(87% 25%, 75% 13%, 67% 21%, 58% 17%, 58% 6%, 42% 6%, 42% 17%, 33% 21%, 25% 13%, 13% 25%, 21% 33%, 17% 41%, 6% 41%, 6% 59%, 17% 59%, 20% 67%, 13% 75%, 25% 87%, 33% 79%, 41% 83%, 41% 94%, 59% 94%, 59% 83%, 67% 80%, 75% 88%, 88% 76%, 80% 67%, 83% 59%, 94% 59%, 94% 41%, 83% 41%, 79% 33%);
-	animation: spin 2.5s linear infinite;
+	animation: spin 2.5s steps(16, end) infinite;
 }
 
 .dashboard img:hover {

styles/dashboard.css

@@ -40,7 +40,7 @@ h2 {
 	border-color: #E34D68;
 }
 #history h2 {
-	border-color: #444;
+	border-color: var(--color);
 }
 .time-group.hidden, .time-action.hidden, #api-message.hidden {
 	display: none;
@@ -58,7 +58,7 @@ h2 {
 .time-action:hover {
 	cursor: pointer;
 	text-decoration: underline;
-	color: #444;
+	color: var(--color);
 }
 .tab {
 	position: relative;
@@ -72,6 +72,9 @@ h2 {
 	box-sizing: border-box;
 	flex-wrap: wrap;
 }
+body.dark .tab {
+	background-color: #232323;
+}
 .tab > div:nth-child(-n+5) {
 	height: 100%;
 	display: flex;
@@ -104,7 +107,6 @@ h2 {
 	overflow-y: hidden;
 	min-height: unset !important;
 	transition: opacity .5s ease-in-out, max-height .5s linear, border-color .5s ease-in-out;
-	border-top: 1px solid transparent;
 	opacity: 1;
 	display: flex;
 	flex-wrap: wrap;
@@ -130,7 +132,6 @@ h2 {
 .window:not(.collapsed) .tabs {
 	max-height: 33vh;
 	opacity: 1;
-	border-color: #EDEDED;
 }
 .little-tab {
 	display: flex;
@@ -157,6 +158,9 @@ h2 {
 	text-transform: uppercase;
 	color: #777;
 }
+body.dark .nap-time, body.dark .wakeup-label {
+	color: #BABABA;
+}
 .edit-container {
 
 }
@@ -171,6 +175,7 @@ h2 {
 	font-size: .85em;
 	text-transform: uppercase;
 	background-color: #CCC;
+	color: #000;
 	padding: .15em .4em;
 	border: 2px solid transparent;
 	transition: all .25s ease-in-out;
@@ -188,12 +193,18 @@ h2 {
 	opacity: .25;
 	max-height: 1em;
 }
+body.dark .remove-btn-container img:not(:hover) {
+	opacity: .4;
+}
 .remove-btn-container img:hover {
 	opacity: 1;
 }
 .wakeup-button, .remove-button {
 	cursor: pointer;
 }
+body.dark .remove-btn-container img, body.dark .icon.dropdown {
+	filter: invert(1);
+}
 #history .tab:not(.window) .tab-name:hover {
 	text-decoration: underline;
 	cursor: pointer;
@@ -234,15 +245,15 @@ p {
 	font-size: 1.2em;
 	margin: 2.5em 0;
 }
-p, p a {
-	color: #666;
+body:not(.dark) p, p a {
+	opacity: .75;
 }
 .settings img {
-	max-width: 2.5em;
+	max-width: 2.25em;
 	margin: .25em;
 }
 .settings:before {
-	font-size: 1.25em;
+	font-size: 1.15em;
 }
 .search-container {
 	margin: 2em 0;
@@ -255,6 +266,8 @@ p, p a {
 	border: none;
 	height: 2em;
 	width: 20em;
+	color: var(--color);
+	background-color: var(--bg-color);
 	-moz-appearance: none;
 	-webkit-appearance: none;
 }
@@ -269,7 +282,7 @@ p, p a {
 	display: inline-block;
 	padding-bottom: 3px;
 	transition: background-position .3s linear .2s;
-	background: linear-gradient(90deg, #F3B845 0%, #DF4E76 50%, #DDD 50%, #DDD 100%);
+	background: linear-gradient(90deg, #f3b845 0%, #DF4E76 50%, #DDD 50%, #DDD 100%);
 	background-size: 200%;
 	background-position: right;
 }
@@ -289,17 +302,16 @@ p, p a {
 	top: .3rem;
 	height: 1.2em;
 	width: 1.25em;
-	transition: left .2s linear .25s, background-color 1ms linear .3s, filter .3s ease-in-out;
-	background: #FFF url('../icons/search.svg') no-repeat 98% center;
+	background: url('../icons/search.svg') no-repeat 98% center;
+	transition: left .2s linear .25s, filter .3s ease-in-out;
 }
 .input-wrapper.searching {
 	background-position: left;
 	transition-delay: 0s;
 }
 .input-wrapper.searching:after {
 	left: 105%;
-	background-color: rgba(0,0,0,0);
-	transition-delay: .3s;
+	transition-delay: .3s, 0s;
 }
 .input-wrapper.searching.valid-search:after {
 	filter: invert(44%) sepia(34%) saturate(3287%) hue-rotate(316deg) brightness(93%) contrast(87%);