From 2c687cb496aa00731394001d363cf32b634bacc4 Mon Sep 17 00:00:00 2001 From: TotalCaesar659 <14265316+TotalCaesar659@users.noreply.github.com> Date: Fri, 14 Oct 2022 01:18:51 +0300 Subject: [PATCH] Add Dark Mode support --- src/crxviewer.less | 24 ++++++++++++++++++++++++ src/lib/prettify/prettify.css | 14 ++++++++++++++ src/options.html | 8 ++++++++ src/popup.html | 7 +++++++ 4 files changed, 53 insertions(+) diff --git a/src/crxviewer.less b/src/crxviewer.less index 9f0570f..7cd6f39 100644 --- a/src/crxviewer.less +++ b/src/crxviewer.less @@ -408,4 +408,28 @@ img:hover { outline: 1px solid rgba(200, 200, 200, 0.5); } +@media (prefers-color-scheme: dark) { + body, + #top-bar #file-filter, + #top-bar label, + input, + #left-panel, + button, + .content-verifier-wrapper .content-verifier-output { + background-color: #313131; + color: #bfbfbf; + } + #left-panel > .resizer { + background-color: #4e4e4e; + } + #file-list li.file-selected, + .site-specific-form > div:hover { + background-color: #4e4e4e; + color: #b7b7b7; + } + .site-specific-form label:hover { + background-color: #646464; + } +} + @import (less) "search-tools.less"; diff --git a/src/lib/prettify/prettify.css b/src/lib/prettify/prettify.css index 42ddb42..f315bc9 100644 --- a/src/lib/prettify/prettify.css +++ b/src/lib/prettify/prettify.css @@ -74,3 +74,17 @@ li:hover { background: #EEE; } +@media (prefers-color-scheme: dark) { + .token.punctuation, + .token.string, + .token.atrule, + .token.attr-value { + color: #7999fb; + } + .odd-code-line { + background: #4e4e4e; + } + li:hover { + background: #646464; + } +} diff --git a/src/options.html b/src/options.html index f12db3d..a658476 100644 --- a/src/options.html +++ b/src/options.html @@ -35,6 +35,14 @@ white-space: pre-wrap; word-break: break-all; } +@media (prefers-color-scheme: dark) { + body, + button, + textarea { + background-color: #313131; + color: #bfbfbf; + } +} diff --git a/src/popup.html b/src/popup.html index e76046a..e1a623f 100644 --- a/src/popup.html +++ b/src/popup.html @@ -29,6 +29,13 @@ #download:not(.downloading) .busy { display: none; } + @media (prefers-color-scheme: dark) { + body, + button { + background-color: #313131; + color: #bfbfbf; + } + }