Forum › Dark Theme for Dynasty Scans
uhm so, here you go.
There's a css part and a javascript part, you can apply them with extensions that allow for css and javascript injection such as "User JavaScript and CSS" for chrome.
Obviously this comes with no guarantee whatsoever, it may or may not work in your browser.
Tested on Chromium.
css
/**
* @name DynastyDark
* @description Dark theme for Dynasty Scans
* @author kasumitheia
*/
:root {
--bg-badge: #53516c;
--divider-color: #707070;
--bg-body: #191a1c;
--bg-dark: #121114;
--bg-content: #1c1c1e;
--bg-button: #222;
--bg-active: #2c2c2c;
--bg-highlight: #2c2c3c;
--bg-highlight-light: #38384d;
--bg-hint: #7c7c9738;
--text-body: #bdbdbd;
--text-content: #d7d7d7;
--text-active: #ddd;
--text-highlight: #fff;
}
/* GLOBAL */
body {
background-color: var(--bg-body);
background-image: none;
color: var(--text-body);
}
#content.container {
padding: 16px 20px;
background-color: var(--bg-dark);
box-shadow: unset;
border-radius: 8px;
}
a,
h2,
h4 {
color: var(--text-content);
}
a:hover,
a:focus {
color: unset;
}
.label,
.badge {
background-color: var(--bg-badge);
color: unset;
}
.pagination ul {
box-shadow: none;
}
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
.pagination ul > li > a,
.pagination ul > li > span {
background-color: var(--bg-button);
border-color: #474747;
}
.pagination ul > li > a:hover,
.pagination ul > li > a:focus,
.pagination ul > .active > a,
.pagination ul > .active > span {
background-color: var(--bg-highlight);
color: var(--text-active);
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
}
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus {
background-color: var(--bg-content);
}
/* managing nav bar margin and colour */
.brand img {
display: none;
}
.navbar.navbar-inverse .navbar-inner {
background: var(--bg-dark);
border-radius: 8px;
}
.navbar {
width: 1210px;
margin-left: auto;
margin-right: auto;
margin-top: 32px;
margin-bottom: 20px;
}
.navbar-inner {
min-height: 36px;
padding: 8px 20px;
}
.navbar .nav > li > a {
padding: 8px 15px 8px;
}
.navbar .nav > li {
margin-right: 8px;
}
.navbar .nav .custom-link:hover {
background-color: var(--bg-highlight);
border-radius: 16px;
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
color: var(--text-highlight);
}
.navbar-search {
margin-top: 2px;
}
.navbar-inverse .navbar-search .search-query {
border: none;
background-color: var(--bg-content);
box-shadow: none;
padding: 6px 14px;
}
.navbar-inverse .navbar-search .search-query:focus,
.navbar-inverse .navbar-search .search-query.focused {
padding: 6px 14px;
color: var(--text-active);
text-shadow: none;
background-color: var(--bg-active);
box-shadow: none;
}
.navbar-inverse .nav > li > a:focus,
.navbar-inverse .nav > li > a:hover {
background-color: var(--bg-highlight);
border-radius: 16px;
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
color: var(--text-highlight);
}
.navbar .nav .divider-vertical {
height: 24px;
margin: 6px 20px;
border-left: unset;
border-right: 1px solid;
border-right-color: var(--divider-color);
}
.icon-bullhorn {
background-position: center;
background-size: contain;
background-image: url(https://assets-global.website-files.com/6257adef93867e50d84d30e2/653714c1f22aef3b6921d63d_636e0a6ca814282eca7172c6_icon_clyde_white_RGB.svg);
}
/* Nav Bar -> account toggle */
.navbar-inverse .brand,
.navbar-inverse .nav > li > a {
color: var(--text-active);
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-to,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
background-color: var(--bg-highlight);
color: var(--text-highlight);
border-radius: 16px;
}
.navbar .nav > li > .dropdown-menu:after {
border-bottom: 6px solid var(--bg-content);
}
.dropdown-menu {
padding: 4px 0;
background-color: var(--bg-content);
border: none;
}
.dropdown-menu .divider {
margin: 8px 6px;
background-color: var(--divider-color);
border-bottom: none;
}
.dropdown-menu > li > a {
padding: 6px 14px;
margin: 4px 8px;
color: var(--text-active);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
background-color: var(--bg-highlight);
border-radius: 16px;
background-image: none;
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
}
/* Main Page */
#main.chapters .chapter {
color: var(--text-content);
}
#main.chapters .chapter .title,
#main.chapters .chapter .title small,
.thumbnail .caption {
color: inherit;
}
.thumbnail {
border: none;
background-color: var(--bg-content);
border-radius: 8px;
padding: 8px;
}
a.thumbnail:hover,
a.thumbnail:focus {
box-shadow: none;
background-color: var(--bg-hint);
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
}
/* Main page -> recently added */
div.span4 {
margin-left: auto;
}
.nav-list > li > a {
padding: 8px 15px;
}
.nav-list > li > a,
.nav-list .nav-header {
text-shadow: none;
}
a:hover,
a:focus {
color: var(--text-highlight);
}
.nav > li > a:hover,
.nav > li > a:focus {
color: var(--text-highlight);
background-color: var(--bg-highlight);
border-radius: 8px;
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
}
li.filtered_results {
padding: 4px 0;
}
/* Directory */
#main.tags.index .row {
margin: 16px 0;
}
.nav-tabs > li,
.nav-pills > li {
margin-right: 8px;
}
.nav-pills > li > a {
margin-top: unset;
margin-bottom: unset;
margin-right: unset;
border-radius: 16px;
}
.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav.nav-pills > li > a:hover,
.nav-pills > .active > a:focus,
.nav.nav-pills > li > a:focus {
color: var(--text-highlight);
background-color: var(--bg-highlight);
border-radius: 16px;
}
/* Lists */
#main.lists.index .table tbody {
display: flex;
flex-direction: column;
}
.table.table-striped .trow {
background-color: var(--bg-content);
display: flex;
margin: 8px 0;
border-radius: 8px;
cursor: pointer;
}
.table.table-striped .trow:hover {
background-color: var(--bg-hint);
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
}
.table.table-striped .trow div {
flex: 1;
}
.table .trow div .btn-mini {
background-color: var(--bg-active);
}
.table .trow div .btn-mini:hover {
background-color: var(--bg-highlight-light);
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
}
.table .trow div {
width: 124px;
padding: 8px;
line-height: 20px;
text-align: left;
vertical-align: top;
color: var(--text-content);
border-top: none;
}
.table .trow div:last-child {
text-align: center;
}
/* Forum */
#main.topics.index .forum_topic:nth-child(odd) {
background-color: var(--bg-dark);
}
#main.topics.index .forum_topic {
border-bottom: none;
padding: 10px 20px;
}
.row {
margin-left: unset;
display: flex;
}
[class*='span'] {
float: unset;
margin-left: unset;
}
#main.topics.index .forum_topic .info {
margin-left: auto;
}
#main.topics.index .forum_topic .info > span {
border-radius: 8px;
background: var(--bg-content);
color: var(--text-content);
padding: 2px 8px;
margin-left: 4px;
}
.toolbar {
background: var(--bg-dark);
border-bottom: none;
padding: 20px;
}
.span9 {
width: 846px;
background-color: var(--bg-content);
padding: 8px;
border-radius: 8px;
}
/* Forum -> Posts */
.topics-toolbar {
background: var(--bg-dark);
padding: 20px;
margin: -20px -20px 0 -20px;
display: flex;
align-items: center;
}
.pull-right {
margin-left: auto;
}
h2 {
line-height: unset;
margin: unset;
}
#main .posts .forum_post .info {
margin: unset;
padding: 8px;
background-color: var(--bg-content);
border-top: none;
border-bottom: none;
border-radius: 8px;
}
#main.topics.show .posts .forum_post p,
#main.topics.show .posts .forum_post code {
color: var(--text-content);
}
.span5.align-right.actions.bulleted {
margin-left: auto;
}
.body.row {
border-radius: 0 0 8px 8px;
margin: 12px 0 20px;
}
#main .posts .forum_post .message,
#main .posts .forum_post .details {
margin-top: unset;
margin-bottom: unset;
}
#main .posts .forum_post .avatar {
text-align: unset;
margin-bottom: unset;
}
.span2.details .bulleted {
background-color: var(--bg-content);
padding: 8px 8px 0;
border-radius: 8px 8px 0 0;
}
.span2.details .joined {
background-color: var(--bg-content);
padding: 0 8px 8px;
border-radius: 0 0 8px 8px;
}
.forum_post .message {
word-wrap: break-word;
/* padding: 8px; */
/* background-color: var(--bg-content); */
border-radius: 8px;
margin-left: 12px;
}
/* Forum -> Posts -> Composing */
#main .posts::after {
margin: unset;
background: var(--divider-color);
}
#main.new #new_forum_topic,
#main.new #new_forum_post {
margin-top: 20px;
}
textarea {
color: var(--text-active);
background-color: var(--bg-content);
padding: 6px 14px;
border: none;
border-radius: 16px;
}
/* Forum -> Posts -> Composing -> Preview */
#main.create #new_forum_topic p,
#main.create #new_forum_topic code,
#main.create #new_forum_post p,
#main.create #new_forum_post code {
color: var(--text-content);
}
pre {
background-color: var(--bg-body);
border: none;
border-radius: 8px;
}
hr {
border-top: none;
border-bottom: 1px solid var(--divider-color);
}
/* Buttons */
.btn {
color: var(--text-active);
background-color: var(--bg-button);
background-image: none;
border: none;
box-shadow: none;
padding: 6px 14px;
text-shadow: none;
border-radius: 16px;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
color: var(--text-highlight);
background-color: var(--bg-highlight);
outline: none;
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
}
.btn-group > .btn:first-child {
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
.btn-group + .btn-group {
margin-left: 12px;
}
.btn-group.open .btn.dropdown-toggle {
background-color: var(--bg-highlight);
color: var(--text-highlight);
border-radius: 16px;
}
.btn-group > .btn-mini,
.btn-group > .btn-small {
padding: 4px 12px;
}
.caret {
border-top: 4px solid var(--text-active);
}
/* manga details */
.cover-chapters .span10 {
margin-left: auto;
}
/* author page */
.thumbnails {
margin-left: unset;
}
.thumbnails.cover-list {
display: flex;
}
.thumbnails > li {
margin-right: 24px;
}
/* chapter reading -> pages-list */
#reader .pages-list a {
color: #767676;
}
#reader .pages-list a.active {
background: var(--bg-highlight);
color: var(--text-active);
}
#reader .pages-list a:hover {
background: var(--bg-highlight-light);
color: var(--text-highlight);
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
}
/* chapter reading -> chapter-action buttons */
#main.chapters.show {
padding-right: unset;
min-height: 64px;
display: flex;
}
.chapter-info-wrapper {
display: flex;
flex-direction: column;
}
#main.chapters.show #chapter-actions {
position: relative;
display: flex;
flex-direction: row-reverse;
right: unset;
top: unset;
margin-left: auto;
}
#main.chapters.show #chapter-actions .btn-toolbar {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#main.chapters.show #next_select {
margin: unset;
width: 111px;
}
[class^='icon-']:not(.icon-white) {
filter: invert(1);
}
.nav-pills > .active > a > [class^='icon-'],
.nav-pills > .active > a > [class*=' icon-'],
.nav-list > .active > a > [class^='icon-'],
.nav-list > .active > a > [class*=' icon-'],
.navbar-inverse .nav > .active > a > [class^='icon-'],
.navbar-inverse .nav > .active > a > [class*=' icon-'],
.dropdown-menu > li > a:hover > [class^='icon-'],
.dropdown-menu > li > a:focus > [class^='icon-'],
.dropdown-menu > li > a:hover > [class*=' icon-'],
.dropdown-menu > li > a:focus > [class*=' icon-'],
.dropdown-menu > .active > a > [class^='icon-'],
.dropdown-menu > .active > a > [class*=' icon-'],
.dropdown-submenu:hover > a > [class^='icon-'],
.dropdown-submenu:focus > a > [class^='icon-'],
.dropdown-submenu:hover > a > [class*=' icon-'],
.dropdown-submenu:focus > a > [class*=' icon-'] {
background-image: url(/assets/twitter/bootstrap/glyphicons-halflings-b4c22a0ed1f42188864f0046f0862ecb.png);
}
/* chapter reading -> fullscreen */
#reader.fullscreen #image img {
max-height: 100vh;
}
#reader.noresize #image img {
max-height: unset;
}
/* account settings */
#main.users.show > h2 {
margin-bottom: 16px;
}
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
background-color: var(--bg-content);
color: var(--text-body);
}
input[type='text'],
input[type='password'],
input[type='datetime'],
input[type='datetime-local'],
input[type='date'],
input[type='month'],
input[type='time'],
input[type='week'],
input[type='number'],
input[type='email'],
input[type='url'],
input[type='search'],
input[type='tel'],
input[type='color'],
.uneditable-input {
color: var(--text-active);
background-color: var(--bg-active);
border: none;
border-radius: 16px;
}
textarea:focus,
input[type='text']:focus,
input[type='password']:focus,
input[type='datetime']:focus,
input[type='datetime-local']:focus,
input[type='date']:focus,
input[type='month']:focus,
input[type='time']:focus,
input[type='week']:focus,
input[type='number']:focus,
input[type='email']:focus,
input[type='url']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='color']:focus,
.uneditable-input:focus {
box-shadow: none;
}
select {
color: var(--text-active);
background-color: var(--bg-button);
padding: 6px 14px;
border: none;
border-radius: 16px;
}
select:focus,
input[type='file']:focus,
input[type='radio']:focus,
input[type='checkbox']:focus {
outline: none;
}
.form-horizontal .help-block {
width: fit-content;
padding: 8px;
background-color: var(--bg-content);
border-radius: 8px;
}
.chzn-container .chzn-drop {
background: var(--bg-content);
border: none;
border-radius: 16px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
box-shadow: none;
margin-top: 8px;
}
.chzn-container .chzn-results li {
padding: 6px 14px;
margin: 4px 8px;
color: var(--text-active);
}
.chzn-container-multi .chzn-choices {
background-color: var(--bg-button);
border: none;
border-radius: 16px;
box-shadow: none;
}
.chzn-container-multi .chzn-choices .search-choice {
color: unset;
background-color: var(--bg-badge);
border: none;
background-image: none;
box-shadow: none;
font-weight: bold;
font-size: 12px;
line-height: 14px;
margin: 5px 0 3px 8px;
padding: 2px 20px 2px 4px;
}
.chzn-container-active .chzn-choices {
border: none;
background-color: var(--bg-highlight);
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
box-shadow: none;
}
.chzn-container .chzn-results .highlighted {
background-color: unset;
color: var(--text-active);
}
ul.chzn-choices:active,
ul.chzn-choices:focus {
background-color: var(--bg-highlight);
}
.chzn-container .chzn-results .group-result:hover {
background-color: unset;
color: #999;
transition: none;
}
.chzn-container .chzn-results li:hover {
background-color: var(--bg-highlight);
border-radius: 16px;
color: var(--text-highlight);
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
}
select#user_time_zone:focus {
outline: none;
}
.form-actions,
/* signin */
.well .form-actions,
.well legend {
color: var(--text-content);
background-color: var(--bg-dark);
border-top: 1px solid var(--divider-color);
}
.well {
min-height: 20px;
padding: 19px;
margin-bottom: unset;
background-color: unset;
border: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 8px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: none;
}
javascript
/**
* @name DynastyDark
* @description JS code for DynastyDark, dark theme for Dynasty Scans
* @author kasumitheia
*/
function fixTableRowHover(contentContainer) {
const table = contentContainer.querySelector('#main.lists.index .table tbody');
if (!table) return;
const trArray = Array.from(table.rows);
for (const trElement of trArray) {
const divRow = document.createElement('div');
divRow.className = 'trow';
for (const tdElement of trElement.children) {
const divCell = document.createElement('div');
divCell.className = tdElement.className;
divCell.innerHTML = tdElement.innerHTML;
divRow.appendChild(divCell);
}
trElement.parentNode.replaceChild(divRow, trElement);
}
}
function forumToolbar(contentContainer) {
let main = contentContainer.querySelector('#main.topics.show');
if (!main) return;
let topicTitle = contentContainer.querySelector('#main.topics.show > h2');
let topicButton = contentContainer.querySelector(
'#main.topics.show > div.pull-right.bulleted.middle'
);
let topicToolbar = document.createElement('div');
topicToolbar.className = 'topics-toolbar';
topicToolbar.appendChild(topicTitle);
topicToolbar.appendChild(topicButton);
main.parentNode.insertBefore(topicToolbar, main);
}
function chapterInfoWrapper(contentContainer) {
let main = contentContainer.querySelector('#main.chapters.show');
if (!main) return;
let chapterTitle = main.querySelector('#chapter-title');
let chapterDetails = main.querySelector('#chapter-details');
let chapterActions = main.querySelector('#chapter-actions');
let wrapper = document.createElement('div');
wrapper.className = 'chapter-info-wrapper';
wrapper.appendChild(chapterTitle);
wrapper.appendChild(chapterDetails);
main.insertBefore(wrapper, chapterActions);
}
function homepageLink(navbar) {
let navElement = navbar.querySelector('.nav .added ');
let link = document.createElement('a');
link.textContent = 'Dynasty Scans';
link.href = '/';
let listItem = document.createElement('li');
listItem.className = 'custom-link';
listItem.appendChild(link);
navElement.parentNode.insertBefore(listItem, navElement);
}
function navbarFix() {
let contentContainer = document.getElementById('content');
let navbar = contentContainer.querySelector('div.navbar.navbar-inverse');
contentContainer.parentNode.insertBefore(navbar, contentContainer);
return { navbar, contentContainer };
}
// Separate navbar from content container
let { navbar, contentContainer } = navbarFix();
// Add Dynasty Scans homepage link to navbar
homepageLink(navbar);
// Wrap chapter-title and chapter-details in another container for inline styling with chapter-actions
chapterInfoWrapper(contentContainer);
// Separate Forum discussion title & button into own toolbar
forumToolbar(contentContainer);
// Switch Lists table row element to div
fixTableRowHover(contentContainer);
last edited at Jun 20, 2024 7:35PM