a3x
/
nyaa
mirror of https://gitlab.com/SIGBUS/nyaa.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improve dark theme (#357) 

* Add 'dark' class to <body> if dark theme is activated

* Make dark theme suck considerably less
This commit is contained in:
sfan5 2017-09-04 00:18:39 +02:00 committed by Arylide
parent 6b49af4fb7
commit 4995f95ebd
3 changed files with 74 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
nyaa/static/css/main.css
View File

@ -390,6 +390,72 @@ h6:hover .header-anchor {
display: inline-block; 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) { @media (max-width: 991px) {
.panel-body .col-md-5 { .panel-body .col-md-5 {
margin-left: 20px; margin-left: 20px;

7
nyaa/static/js/main.js
View File

@ -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 e.preventDefault(); // keep link from default action, which going to top of the page
toggleDarkMode(); // toggle theme toggleDarkMode(); // toggle theme
}); });
// needs to be done here as <body> 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() { // function setThemeDark() {
// bsThemeLink.href = '/static/css/bootstrap-dark.min.css'; // bsThemeLink.href = '/static/css/bootstrap-dark.min.css';
// localStorage.setItem('theme', 'dark'); // localStorage.setItem('theme', 'dark');
// if (document.body !== null)
// document.body.classList.add('dark');
// } // }
// function setThemeLight() { // function setThemeLight() {
// bsThemeLink.href = '/static/css/bootstrap.min.css'; // bsThemeLink.href = '/static/css/bootstrap.min.css';
// localStorage.setItem('theme', 'light'); // localStorage.setItem('theme', 'light');
// if (document.body !== null)
// document.body.classList.remove('dark');
// } // }
// } // }

2
nyaa/templates/layout.html
View File

@ -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) 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 Development version is commented out in static/js/main.js at the bottom of the file
--> -->
<script>function toggleDarkMode(){"dark"===localStorage.getItem("theme")?setThemeLight():setThemeDark()}function setThemeDark(){bsThemeLink.href="{{ bootstrap_dark }}",localStorage.setItem("theme","dark")}function setThemeLight(){bsThemeLink.href="{{ bootstrap_light }}",localStorage.setItem("theme","light")}if("undefined"!=typeof Storage){var bsThemeLink=document.getElementById("bsThemeLink");"dark"===localStorage.getItem("theme")&&setThemeDark()}</script> <script>function toggleDarkMode(){"dark"===localStorage.getItem("theme")?setThemeLight():setThemeDark()}function setThemeDark(){bsThemeLink.href="{{ bootstrap_dark }}",localStorage.setItem("theme","dark"),document.body!==null&&document.body.classList.add('dark')}function setThemeLight(){bsThemeLink.href="{{ bootstrap_light }}",localStorage.setItem("theme","light"),document.body!==null&&document.body.classList.remove('dark')}if("undefined"!=typeof Storage){var bsThemeLink=document.getElementById("bsThemeLink");"dark"===localStorage.getItem("theme")&&setThemeDark()}</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" integrity="sha256-an4uqLnVJ2flr7w0U74xiF4PJjO2N5Df91R2CUmCLCA=" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" integrity="sha256-an4uqLnVJ2flr7w0U74xiF4PJjO2N5Df91R2CUmCLCA=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />