Merge pull request #1 from takoserver/main

ダークモード追加しました
Myoko1110 · Aug 29, 2024 · 414e28b · 414e28b
2 parents 9ea6bd3 + aed6c60
commit 414e28b
Showing 1 changed file with 130 additions and 0 deletions.
diff --git a/stylesheet.css b/stylesheet.css
@@ -622,3 +622,133 @@ html, body {
         padding: 8px;
     }
 }
+@media (prefers-color-scheme: dark) {
+    html,body {
+        background-color: #1A202C;
+        color: #E2E8F0;
+    }
+    .l-header {
+        background-color: #2D3748;
+    }
+    .l-header-logo {
+        background-color: #2D3748;
+    }
+    .l-header-logo:hover {
+        background-color: #4A5568;
+    }
+    .l-header__ul-item {
+        background-color: #2D3748;
+    }
+    .l-header__ul-item:hover {
+        background-color: #4A5568;
+    }
+    .l-header__ul-item.is-active svg {
+        fill: #E2E8F0;
+    }
+    .l-header__ul-item a {
+        color: #E2E8F0;
+    }
+    .p-talk-list-search input {
+        background-color: #2D3748;
+        color: #E2E8F0;
+    }
+    .p-talk-list-rooms {
+        background-color: #1A202C;
+    }
+    .c-talk-rooms {
+        background-color: #1A202C;
+    }
+    .c-talk-rooms:hover {
+        background-color: #4A5568;
+    }
+    .c-talk-rooms.is-active {
+        background-color: #4A5568;
+    }
+    .c-talk-rooms button {
+        color: #E2E8F0;
+    }
+    .c-talk-rooms a {
+        color: #E2E8F0;
+    }
+    .c-talk-rooms-icon img {
+        background-color: #2D3748;
+    }
+    .c-talk-rooms-name {
+        color: #E2E8F0;
+    }
+    .c-talk-rooms-msg {
+        color: #E2E8F0;
+    }
+    .p-talk-chat-title {
+        background-color: #2D3748;
+        color: #E2E8F0;
+    }
+    .p-talk-chat-prev {
+        background-color: #2D3748;
+    }
+    .p-talk-chat-prev:hover {
+        background-color: #4A5568;
+    }
+    .p-talk-chat-prev svg {
+        fill: #E2E8F0;
+    }
+    .p-talk-chat-container {
+        background-color: #2D3748;
+    }
+    .c-talk-chat {
+        background-color: #2D3748;
+    }
+    .c-talk-chat-msg {
+        color: #E2E8F0;
+    }
+    .c-talk-chat.other .c-talk-chat-msg {
+        color: black;
+    }
+    .c-talk-chat.self .c-talk-chat-msg {
+        background-color: #E53E3E;
+        color: #E2E8F0;
+    }
+    .c-talk-chat-date {
+        color: #E2E8F0;
+    }
+    .c-talk-chat.other .c-talk-chat-date {
+        color: #E2E8F0;
+    }
+    .c-talk-chat.self .c-talk-chat-date {
+        color: #E2E8F0;
+    }
+    .c-talk-date {
+        color: #E2E8F0;
+    }
+    .c-talk-chat-date-box {
+        background-color: #4A5568;
+        color: #E2E8F0;
+    }
+    .p-talk-chat-send__form {
+        background-color: #2D3748;
+    }
+    .p-talk-chat-send__file img {
+        background-color: #2D3748;
+    }
+    .p-talk-chat-send__file img:hover {
+        background-color: #4A5568;
+    }
+    .p-talk-chat-send__textarea {
+        background-color: #2D3748;
+        color: #E2E8F0;
+    }
+    .p-talk-chat-send__dummy {
+        color: #E2E8F0;
+    }
+    .p-talk-chat-send__msg label {
+        color: #E2E8F0;
+    }
+    .c-talk-chat-msg::before {
+        background-image: url("static/icon_tale_white.svg");
+    }
+    .c-talk-chat-msg {
+        background-color: #2D3748;
+        color: #E2E8F0;
+    }
+}
+