mirror of
https://github.com/irislib/iris-messenger.git
synced 2024-10-18 14:13:21 +00:00
Add light/dark mode switching
This commit is contained in:
parent
cdaa664879
commit
9dde71e067
13
src/css/dark.css
Normal file
13
src/css/dark.css
Normal file
@ -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;
|
||||||
|
}
|
13
src/css/light.css
Normal file
13
src/css/light.css
Normal file
@ -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;
|
||||||
|
}
|
@ -1,3 +1,7 @@
|
|||||||
|
:root {
|
||||||
|
color-scheme: light dark;
|
||||||
|
}
|
||||||
|
|
||||||
* { box-sizing: border-box; }
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
html { height:100%; overflow:hidden; }
|
html { height:100%; overflow:hidden; }
|
||||||
@ -5,7 +9,7 @@ html { height:100%; overflow:hidden; }
|
|||||||
body {
|
body {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
font-size: 15px;
|
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;
|
font-family: "SF Pro Text", "SF Pro Icons", system, -apple-system, system-ui, system-ui, "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -82,7 +86,7 @@ img {
|
|||||||
.chat {
|
.chat {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
background-color: white;
|
background-color: var(--msg-content-background);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -117,7 +121,7 @@ img {
|
|||||||
header {
|
header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex:1;
|
flex:1;
|
||||||
background-color: #efefef;
|
background-color: var(--header-color);
|
||||||
max-height:60px;
|
max-height:60px;
|
||||||
border-bottom: 1px solid rgba(0,0,0,.08);
|
border-bottom: 1px solid rgba(0,0,0,.08);
|
||||||
}
|
}
|
||||||
@ -146,7 +150,7 @@ header #back-button {
|
|||||||
flex:1;
|
flex:1;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
background-color: #e5ddd5;
|
background-color: var(--main-color);
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -158,7 +162,7 @@ header #back-button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.msg-content {
|
.msg-content {
|
||||||
background-color: #ffffff;
|
background-color: var(--msg-content-background);
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
|
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
|
||||||
@ -236,13 +240,13 @@ header #back-button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.msg.our .msg-content {
|
.msg.our .msg-content {
|
||||||
background-color: #d7f7c5;
|
background-color: var(--our-msg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg .time {
|
.msg .time {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: rgba(0, 0, 0, 0.45);
|
color: var(--text-time);
|
||||||
}
|
}
|
||||||
|
|
||||||
.day-separator {
|
.day-separator {
|
||||||
@ -330,7 +334,7 @@ header #back-button {
|
|||||||
flex:1;
|
flex:1;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
max-height:70px;
|
max-height:70px;
|
||||||
background-color: #efefef;
|
background-color: var(--header-color);
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -364,7 +368,7 @@ header #back-button {
|
|||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
background-color: #efefef;
|
background-color: var(--header-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -417,7 +421,7 @@ header #back-button {
|
|||||||
.chat-item .text {
|
.chat-item .text {
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
padding-top: 16px;
|
padding-top: 16px;
|
||||||
border-bottom: 1px solid #f3f3f3;
|
border-bottom: 1px solid var(--chat-hover);
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -452,20 +456,20 @@ header #back-button {
|
|||||||
|
|
||||||
small {
|
small {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #777;
|
color: var(--text-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-item.active, .chat-item.active:hover {
|
.chat-item.active, .chat-item.active:hover {
|
||||||
background: #eaeaea;
|
background: var(--chat-active);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-item:hover {
|
.chat-item:hover {
|
||||||
background: #f3f3f3;
|
background: var(--chat-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-item.new {
|
.chat-item.new {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-bottom: 1px solid #f3f3f3;
|
border-bottom: 1px solid var(--chat-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
#new-chat input {
|
#new-chat input {
|
||||||
@ -474,11 +478,11 @@ small {
|
|||||||
|
|
||||||
#not-seen-by-them {
|
#not-seen-by-them {
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
background-color: #9ee8ff;
|
background-color: var(--notify);
|
||||||
}
|
}
|
||||||
|
|
||||||
#not-seen-by-them button {
|
#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 {
|
#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 {
|
#enable-notifications-prompt {
|
||||||
background: #9ee8ff;
|
background: var(--notify);
|
||||||
padding: 22px 15px;
|
padding: 22px 15px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
|
@ -23,7 +23,22 @@
|
|||||||
<meta name="theme-color" content="#74d5f1">
|
<meta name="theme-color" content="#74d5f1">
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="./css/cropper.min.css">
|
<link rel="stylesheet" type="text/css" href="./css/cropper.min.css">
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// If `prefers-color-scheme` is not supported, fall back to light mode.
|
||||||
|
if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
|
||||||
|
document.documentElement.style.display = 'none';
|
||||||
|
document.head.insertAdjacentHTML(
|
||||||
|
'beforeend',
|
||||||
|
'<link rel="stylesheet" href="style/light.css" onload="document.documentElement.style.display = \'\'">'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<link rel="stylesheet" href="./css/dark.css" media="(prefers-color-scheme: dark)">
|
||||||
|
<link rel="stylesheet" href="./css/light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">
|
||||||
|
<!-- The main stylesheet -->
|
||||||
<link rel="stylesheet" type="text/css" href="./css/style.css">
|
<link rel="stylesheet" type="text/css" href="./css/style.css">
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var userAgent = navigator.userAgent.toLowerCase();
|
var userAgent = navigator.userAgent.toLowerCase();
|
||||||
var isElectron = (userAgent.indexOf(' electron/') > -1);
|
var isElectron = (userAgent.indexOf(' electron/') > -1);
|
||||||
|
Loading…
Reference in New Issue
Block a user