diff --git a/ext/src/ui/options/index.html b/ext/src/ui/options/index.html index 5e9b10e..f3e68f2 100644 --- a/ext/src/ui/options/index.html +++ b/ext/src/ui/options/index.html @@ -2,7 +2,10 @@ + + + diff --git a/ext/src/ui/options/index.tsx b/ext/src/ui/options/index.tsx index a9ceeca..d23bacc 100644 --- a/ext/src/ui/options/index.tsx +++ b/ext/src/ui/options/index.tsx @@ -424,12 +424,14 @@ class OptionsApp extends Component<{}, OptionsAppState> {
-
-

LICENSE

+
+ +

LICENSE

+
{ LICENSE.replace(/\S\n\S/g, "") }
-
+
@@ -437,19 +439,19 @@ class OptionsApp extends Component<{}, OptionsAppState> {

TRANSLATORS

diff --git a/ext/src/ui/options/styles/index.css b/ext/src/ui/options/styles/index.css index c8ec72f..e99c527 100644 --- a/ext/src/ui/options/styles/index.css +++ b/ext/src/ui/options/styles/index.css @@ -3,8 +3,43 @@ --secondary-color: rgb(125, 125, 125); } +@media (prefers-color-scheme: dark) { + :root { + --border-color: var(--grey-50); + --secondary-color: var(--grey-10-a60); + } + + a { color: var(--blue-40); } + a:hover { color: var(--blue-50); } + a:hover:active { color: var(--blue-60); } + + body { + background: #202023 !important; + color: white !important; + } + + .editable-list { + background-color: #202023 !important; + color: white !important; + } + .editable-list__item:nth-child(even) { + background-color: initial !important; + } + .editable-list__item:nth-child(odd) { + background-color: var(--grey-80) !important; + } + + .about, + .about > summary { + background-color: rgba(255, 255, 255, 0.1) !important; + } + .about hr { + border-top: 1px solid rgba(255, 255, 255, 0.1) !important; + } +} + *:invalid { - box-shadow: 0 0 1.5px 1px red; + box-shadow: 0 0 1.5px 1px var(--red-50); } #root { diff --git a/ext/src/ui/photon-colors.css b/ext/src/ui/photon-colors.css new file mode 100644 index 0000000..cc95ac3 --- /dev/null +++ b/ext/src/ui/photon-colors.css @@ -0,0 +1,91 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* Photon Colors CSS Variables v3.2.0 */ + +:root { + --magenta-50: #ff1ad9; + --magenta-60: #ed00b5; + --magenta-70: #b5007f; + --magenta-80: #7d004f; + --magenta-90: #440027; + + --purple-30: #c069ff; + --purple-40: #ad3bff; + --purple-50: #9400ff; + --purple-60: #8000d7; + --purple-70: #6200a4; + --purple-80: #440071; + --purple-90: #25003e; + + --blue-40: #45a1ff; + --blue-50: #0a84ff; + --blue-50-a30: rgba(10, 132, 255, 0.3); + --blue-60: #0060df; + --blue-70: #003eaa; + --blue-80: #002275; + --blue-90: #000f40; + + --teal-50: #00feff; + --teal-60: #00c8d7; + --teal-70: #008ea4; + --teal-80: #005a71; + --teal-90: #002d3e; + + --green-50: #30e60b; + --green-60: #12bc00; + --green-70: #058b00; + --green-80: #006504; + --green-90: #003706; + + --yellow-50: #ffe900; + --yellow-60: #d7b600; + --yellow-70: #a47f00; + --yellow-80: #715100; + --yellow-90: #3e2800; + + --red-50: #ff0039; + --red-60: #d70022; + --red-70: #a4000f; + --red-80: #5a0002; + --red-90: #3e0200; + + --orange-50: #ff9400; + --orange-60: #d76e00; + --orange-70: #a44900; + --orange-80: #712b00; + --orange-90: #3e1300; + + --grey-10: #f9f9fa; + --grey-10-a10: rgba(249, 249, 250, 0.1); + --grey-10-a20: rgba(249, 249, 250, 0.2); + --grey-10-a40: rgba(249, 249, 250, 0.4); + --grey-10-a60: rgba(249, 249, 250, 0.6); + --grey-10-a80: rgba(249, 249, 250, 0.8); + --grey-20: #ededf0; + --grey-30: #d7d7db; + --grey-40: #b1b1b3; + --grey-50: #737373; + --grey-60: #4a4a4f; + --grey-70: #38383d; + --grey-80: #2a2a2e; + --grey-90: #0c0c0d; + --grey-90-a05: rgba(12, 12, 13, 0.05); + --grey-90-a10: rgba(12, 12, 13, 0.1); + --grey-90-a20: rgba(12, 12, 13, 0.2); + --grey-90-a30: rgba(12, 12, 13, 0.3); + --grey-90-a40: rgba(12, 12, 13, 0.4); + --grey-90-a50: rgba(12, 12, 13, 0.5); + --grey-90-a60: rgba(12, 12, 13, 0.6); + --grey-90-a70: rgba(12, 12, 13, 0.7); + --grey-90-a80: rgba(12, 12, 13, 0.8); + --grey-90-a90: rgba(12, 12, 13, 0.9); + + --ink-70: #363959; + --ink-80: #202340; + --ink-90: #0f1126; + + --white-100: #ffffff; + +} diff --git a/ext/src/ui/popup/index.html b/ext/src/ui/popup/index.html index 5e9b10e..f3e68f2 100755 --- a/ext/src/ui/popup/index.html +++ b/ext/src/ui/popup/index.html @@ -2,7 +2,10 @@ + + + diff --git a/ext/src/ui/popup/index.tsx b/ext/src/ui/popup/index.tsx index 51be595..d7f22b6 100755 --- a/ext/src/ui/popup/index.tsx +++ b/ext/src/ui/popup/index.tsx @@ -310,7 +310,7 @@ class ReceiverEntry extends Component { ? `${this.props.receiver.host}:${this.props.receiver.port}` : application.statusText } -