From 9dde71e067e5fef23641ead657c7239175dd8fb8 Mon Sep 17 00:00:00 2001
From: thrownness <57295746+thrownness@users.noreply.github.com>
Date: Thu, 5 Mar 2020 22:19:55 -0500
Subject: [PATCH] Add light/dark mode switching
---
src/css/dark.css | 13 +++++++++++++
src/css/light.css | 13 +++++++++++++
src/css/style.css | 38 +++++++++++++++++++++-----------------
src/index.html | 15 +++++++++++++++
4 files changed, 62 insertions(+), 17 deletions(-)
create mode 100644 src/css/dark.css
create mode 100644 src/css/light.css
diff --git a/src/css/dark.css b/src/css/dark.css
new file mode 100644
index 00000000..1d492582
--- /dev/null
+++ b/src/css/dark.css
@@ -0,0 +1,13 @@
+/* dark.css: 👉 light-on-dark */
+:root {
+ --text-color: #ffffff;
+ --text-small: #777;
+ --text-time: rgba(255, 255, 255, 0.45);
+ --main-color: #3b3936;
+ --header-color: #292929;
+ --chat-active: #252525;
+ --chat-hover: #363636;
+ --msg-content-background: #000000;
+ --our-msg: #3f4939;
+ --notify: #476974;
+}
\ No newline at end of file
diff --git a/src/css/light.css b/src/css/light.css
new file mode 100644
index 00000000..663f96a7
--- /dev/null
+++ b/src/css/light.css
@@ -0,0 +1,13 @@
+/* light.css: 👉 dark-on-light */
+:root {
+ --text-color: #262626;
+ --text-small: #777;
+ --text-time: rgba(0, 0, 0, 0.45);
+ --main-color: #e5ddd5;
+ --header-color: #efefef;
+ --chat-active: #eaeaea;
+ --chat-hover: #f3f3f3;
+ --msg-content-background: #ffffff;
+ --our-msg: #d7f7c5;
+ --notify: #9ee8ff;
+}
\ No newline at end of file
diff --git a/src/css/style.css b/src/css/style.css
index 1a5f5355..210fe460 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,3 +1,7 @@
+:root {
+ color-scheme: light dark;
+}
+
* { box-sizing: border-box; }
html { height:100%; overflow:hidden; }
@@ -5,7 +9,7 @@ html { height:100%; overflow:hidden; }
body {
opacity: 0;
font-size: 15px;
- color: #262626;
+ color: var(--text-color);
font-family: "SF Pro Text", "SF Pro Icons", system, -apple-system, system-ui, system-ui, "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif;
padding: 0;
margin: 0;
@@ -82,7 +86,7 @@ img {
.chat {
display: flex;
flex-direction: row;
- background-color: white;
+ background-color: var(--msg-content-background);
height: 100%;
overflow: hidden;
position: fixed;
@@ -117,7 +121,7 @@ img {
header {
display: flex;
flex:1;
- background-color: #efefef;
+ background-color: var(--header-color);
max-height:60px;
border-bottom: 1px solid rgba(0,0,0,.08);
}
@@ -146,7 +150,7 @@ header #back-button {
flex:1;
overflow-y: scroll;
padding: 10px 15px;
- background-color: #e5ddd5;
+ background-color: var(--main-color);
min-width: 0;
}
@@ -158,7 +162,7 @@ header #back-button {
}
.msg-content {
- background-color: #ffffff;
+ background-color: var(--msg-content-background);
padding: 6px 10px;
border-radius: 8px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
@@ -236,13 +240,13 @@ header #back-button {
}
.msg.our .msg-content {
- background-color: #d7f7c5;
+ background-color: var(--our-msg);
}
.msg .time {
text-align: right;
font-size: 12px;
- color: rgba(0, 0, 0, 0.45);
+ color: var(--text-time);
}
.day-separator {
@@ -330,7 +334,7 @@ header #back-button {
flex:1;
flex-direction: row;
max-height:70px;
- background-color: #efefef;
+ background-color: var(--header-color);
padding: 10px 15px;
}
@@ -364,7 +368,7 @@ header #back-button {
overflow-y: hidden;
overflow-x: hidden;
padding: 10px 15px;
- background-color: #efefef;
+ background-color: var(--header-color);
cursor: pointer;
}
@@ -417,7 +421,7 @@ header #back-button {
.chat-item .text {
padding-right: 5px;
padding-top: 16px;
- border-bottom: 1px solid #f3f3f3;
+ border-bottom: 1px solid var(--chat-hover);
line-height: 20px;
}
@@ -452,20 +456,20 @@ header #back-button {
small {
font-size: 12px;
- color: #777;
+ color: var(--text-small);
}
.chat-item.active, .chat-item.active:hover {
- background: #eaeaea;
+ background: var(--chat-active);
}
.chat-item:hover {
- background: #f3f3f3;
+ background: var(--chat-hover);
}
.chat-item.new {
align-items: center;
- border-bottom: 1px solid #f3f3f3;
+ border-bottom: 1px solid var(--chat-hover);
}
#new-chat input {
@@ -474,11 +478,11 @@ small {
#not-seen-by-them {
padding: 10px 15px;
- background-color: #9ee8ff;
+ background-color: var(--notify);
}
#not-seen-by-them button {
- background: #fff;
+ background: var(--msg-content-background);
}
#not-seen-by-them button:hover, #not-seen-by-them button:active, #not-seen-by-them button:focus {
@@ -486,7 +490,7 @@ small {
}
#enable-notifications-prompt {
- background: #9ee8ff;
+ background: var(--notify);
padding: 22px 15px;
cursor: pointer;
overflow-y: hidden;
diff --git a/src/index.html b/src/index.html
index afa046e3..ff0fa609 100644
--- a/src/index.html
+++ b/src/index.html
@@ -23,7 +23,22 @@
+
+
+
+
+
+