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;
}
/* 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;

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
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() {
// 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');
// }
// }

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)
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/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />