From 4995f95ebd4d06c3db42769fcdec1c5fe5be51b9 Mon Sep 17 00:00:00 2001 From: sfan5 Date: Mon, 4 Sep 2017 00:18:39 +0200 Subject: [PATCH] Improve dark theme (#357) * Add 'dark' class to if dark theme is activated * Make dark theme suck considerably less --- nyaa/static/css/main.css | 66 ++++++++++++++++++++++++++++++++++++++ nyaa/static/js/main.js | 7 ++++ nyaa/templates/layout.html | 2 +- 3 files changed, 74 insertions(+), 1 deletion(-) diff --git a/nyaa/static/css/main.css b/nyaa/static/css/main.css index 02ecbf2..de55b45 100644 --- a/nyaa/static/css/main.css +++ b/nyaa/static/css/main.css @@ -390,6 +390,72 @@ h6:hover .header-anchor { display: inline-block; } +/* Dark theme */ + +body.dark { + color: #afafaf; +} + +kbd { + background-color: #4a4a4a; +} + +body.dark .torrent-list > tbody > tr > td > a { + font-weight: bold; +} + +body.dark .torrent-list > thead > tr, body.dark tbody > tr, +body.dark .panel > .panel-heading { + color: #cbcbcb; +} + +body.dark .table-striped > tbody > tr:nth-of-type(odd) { + background-color: #363636; +} + +body.dark .table-hover > tbody > tr:hover { + background-color: rgba(255, 255, 255, 0.2); +} + +body.dark .table-bordered > thead:first-child > tr:first-child > th, +body.dark .table-bordered > tbody > tr > td { + border: 1px solid #212121; +} + +/* trusted */ +body.dark .torrent-list > tbody > tr.success > td { + color: inherit; + background-color: rgba(60, 206, 0, 0.12); +} +body.dark .torrent-list > tbody > tr.success:hover > td { + background-color: rgba(60, 206, 0, 0.18); +} +body.dark div.panel-success, +body.dark div.panel-success > .panel-heading { + border-color: #33452c; /* == trusted entry in torrent list */ +} +body.dark div.panel-success > .panel-heading { + background-color: #56704b; /* == trusted entry in torrent list + hover */ +} + +/* remake */ +body.dark .torrent-list > tbody > tr.danger > td { + color: inherit; + background-color: rgba(208, 0, 0, 0.12); +} +body.dark .torrent-list > tbody > tr.danger:hover > td { + color: inherit; + background-color: rgba(208, 0, 0, 0.18); +} +body.dark div.panel-danger, +body.dark div.panel-danger > .panel-heading { + border-color: #452c2c; /* == remake entry in torrent list */ +} +body.dark div.panel-danger > .panel-heading { + background-color: #714b4b;/* == remake entry in torrent list + hover */ +} + + @media (max-width: 991px) { .panel-body .col-md-5 { margin-left: 20px; diff --git a/nyaa/static/js/main.js b/nyaa/static/js/main.js index 9176fb8..f5e8639 100644 --- a/nyaa/static/js/main.js +++ b/nyaa/static/js/main.js @@ -3,6 +3,9 @@ document.addEventListener("DOMContentLoaded", function(event) { // wait for cont e.preventDefault(); // keep link from default action, which going to top of the page toggleDarkMode(); // toggle theme }); + // needs to be done here as is not available when the script in the head runs + if (typeof(Storage) !== 'undefined' && localStorage.getItem('theme') === 'dark') + document.body.classList.add('dark'); }); @@ -214,10 +217,14 @@ document.addEventListener("DOMContentLoaded", function() { // function setThemeDark() { // bsThemeLink.href = '/static/css/bootstrap-dark.min.css'; // localStorage.setItem('theme', 'dark'); +// if (document.body !== null) +// document.body.classList.add('dark'); // } // function setThemeLight() { // bsThemeLink.href = '/static/css/bootstrap.min.css'; // localStorage.setItem('theme', 'light'); +// if (document.body !== null) +// document.body.classList.remove('dark'); // } // } diff --git a/nyaa/templates/layout.html b/nyaa/templates/layout.html index 9c99a7a..9d7feea 100644 --- a/nyaa/templates/layout.html +++ b/nyaa/templates/layout.html @@ -33,7 +33,7 @@ This theme changer script needs to be inline and right under the above stylesheet link to prevent FOUC (Flash Of Unstyled Content) Development version is commented out in static/js/main.js at the bottom of the file --> - +