I have updated the dark-theme CSS I have posted in an older thread, so to make the solutions easier to find I'll make a new clean thread here.
To apply the dark theme, go to:
admin area -> Look and feeel -> CSS and JS
And post the CSS from the solution bellow:
- @Mr.Nobody
/* Image border in topics for easier visualization */
.dw-p-bd-blk img {
box-shadow: 2px 2px 10px rgb(0 0 0 / 35%);
margin-left: 6px;
max-width: calc(100% - 13px);
}/* Menu items in post settings (categories and statuses) */
.esExplDrp_entry a:hover {
background: #333333;
}.esExplDrp_entry_title {
color: #fff;
}.esExplDrp_entry_expl {
color: #fff;
}/* Primary button colors (green = hue 159)
------------------------------*/.btn-primary,
.btn-primary:link,
.nav-pills>li>a.active,
.nav-pills>li>a.active:hover,
.nav-pills>li>a.active:focus,
.nav-pills>li.active>a,
.nav-pills>li.active>a:hover,
.nav-pills>li.active>a:focus,
.nav>.active {
background: hsl(159, 63%, 45%);
color: hsl(210, 6%, 12%) !important;
}.DW.DW .dw-ar-t>.dw-p-as>.dw-a-reply,
button.esScrollBtns_menu.btn.btn-default {
background: hsl(159, 100%, 54%);
color: hsl(210, 6%, 12%) !important;
}.DW.DW .dw-p-as .dw-a-reply,
.s_OpReB {
color: hsl(210, 6%, 12%) !important;
}/* Page background color
------------------------------*/body,
div[class^='dw-p'],
.dw-cmts-tlbr-head,
.dw-cmts-tlbr-open,
.dw-cmts-tlbr-details,
.dw-arw-vt-curve-to-last-sibling-indented {
background-color: hsl(210, 6%, 12%) !important;
}/* White text and bright arrows, for dark themes
------------------------------*/p,
li,
.dw-a,
.dw-cmts-tlbr-details,
.dw-cmts-count,
.dw-u-info,
.esP_By_F,
.esP_By_U,
.dw-p-hd .dw-ago,
.dw-p-hd .dw-rrs,
.dw-p-hd .esP_viewHist,
.esMetabar .dw-cmts-tlbr-head .dw-cmts-tlbr-summary>li {
color: white !important;
}/* But not inside dialogs */
.DW.DW .dw-p-as-more>.dw-a,
.DW.DW .dw-p-as-votes>.dw-a,
.esDropModal .dw-a {
color: black !important;
}#dw-cmts-tlbr {
border-color: hsl(0, 0%, 57%);
}.dw-cmts-tlbr-open {
color: gray;
}.dw-arw {
filter: invert(100%);
/* why won't brightness(9900%) have any effect? I'd like the arrows to be a bit brighter. */
}/* Embedded blog comments editor (it's in its own )
------------------------------*/.s_E-E#debiki-editor-controller {
/* background */
background: #333;
color: white;
}.s_E-E textarea {
/* where one types */
background: black;
color: white;
}.s_E-E .esEdtr_txtBtns,
/* buttons like Bold, Italic, upload-image etc */
.s_E-E .esEdtr_txtBtn {
background: #777;
color: white;
}.s_E-E .s_DfSts {
/* Info text, like "Saving draft ..." */
color: #999;
}.s_E-E .esCloseCross {
color: hsl(0 0% 83%);
}.esForumIntro {
margin: .4em 0;
max-width: 125ex;
background: #1d1f20;
padding: .93em 1.15em .35em;
}.table .table {
background-color: #1d1f20;
}.forum-table .topic-title {
color: #fff;
font-size: 15px;
}h1.dw-p-ttl a:not(.icon-edit):not(.dw-forum-intro-show) {
color: #fff;
}.btn-default {
color: #fff;
background-color: #1d1f20;
border-color: #ccc;
}.esTopbar .esAvtrName .esAvtrName_name,
.esTopbar .esAvtrName .esAvtrName_you {
color: #fff;
letter-spacing: .2px;
vertical-align: middle;
font-size: 13.5px;
}.forum-table .forum-title-wrap .forum-title {
font-weight: 700;
color: #fff;
word-break: break-word;
line-height: 125%;
}.dw-forum-actionbar button:not(.btn-primary):not(.active) {
color: #fff;
}.dw-forum-actionbar button:not(.btn-primary):not(.active):hover {
color: #000;
}body {
color: #fff;
}.esForum_navLink {
color: #fff!important;
}.esForum_catsNav .btn {
background: #1d1f20;
}small {
color: #fff;
}.s_Tb-Fxd {
background: #1d1f20;
color: #fff;
}.s_Tb-Fxd .s_Tb_Pg_Ttl {
color: #fff;
}.s_Tb-Fxd .esOpenCtxbarBtn_numOnline,
.s_Tb-Fxd .esOpenWatchbarBtn_text {
color: #fff;
}.s_Tb .btn.dw-a-tools,
.s_Tb .btn.dw-login,
.s_Tb_Pg_Cs .btn {
color: #fff;
}h1 {
color: #fff;
}h3 {
color: #fff;
}h2 {
color: #fff;
}.DW.DW .dw-ar-t>.dw-p-as>.dw-a-change {
background: #1d1f20;
}.DW.DW .dw-p-as .dw-a-reply,
.s_OpReB {
background: #1d1f20;
color: #fff !important;
}.esCtxbar .dw-comments {
background: #1d1f20;
}.esCtxbar {
background: #1d1f20;
color: #fff;
}.dw-tpc-title .s_F_Ts_T_Con_Ttl {
color: #fff;
}.dw-topic-list tbody tr.esForum_topics_topic td.dw-tpc-title .s_F_Ts_T_Con-Para:hover .s_F_Ts_T_Con_Ttl {
color: #000;
}.esForum_catsNav_sort .btn:not(.active) {
color: #fff;
}#debiki-editor-controller .preview-area .preview {
background: #1d1f20;
}.dw-help {
background-color: #0f1010;
}.s_E-E textarea {
background: #1d1f20;
color: white;
}#debiki-editor-controller .dw-editor-guidelines, #debiki-editor-controller .s_E_SimlTpcs {
background-color: #1d1f20;
}.s_T_ReTo, .s_T_YourPrvw {
background: #1d1f20;
}.s_P-Prvw:not(.s_P-Prvw-Real) {
border-bottom: 15px solid #1d1f20!important;
}.modal-content {
background-color: #1d1f20;
color: #fff;
}
.esDropModal_content {
background: #1d1f20;
color: #fff;
}.DW.DW .dw-p-as-more>.dw-a, .DW.DW .dw-p-as-votes>.dw-a, .esDropModal .dw-a {
color: #fff !important;
}.DW.DW .dw-p-as-more>.dw-a, .DW.DW .dw-p-as-votes>.dw-a, .esDropModal .dw-a:hover {
color: #000 !important;
}.esCloseCross {
color: #fff;
}h4 {
color: #fff;
}/* dropdown menu items white so readable on black theme */
.dropdown-menu>li a {
color: #e7e7e7;
}/* search box black font so viewable on white background */
button, input, optgroup, select, textarea {
color: black;
}/* href/url/links /. /
a:link {
color: #519bdc; /#0079db;/
}a:visited {
color: #6ca8da; /#0a6fc2;/
}
*/KajMagnus @KajMagnus2022-07-10 07:09:05.598Z
That looks quite cool :- ) And nice color contrasts, seems easy to read also for people with a bit impaired vision ... Hmm maybe the blue links should be a tiny bit brighter to increase the contrast? But I don't know
@Mr.Nobody
yes, also I can't seem to get the hover-effect right on the "change category" and "change status" menus.
/* Menu items in post settings (categories and statuses) */ .esExplDrp_entry a:hover { background: #333333; } .esExplDrp_entry_title { color: #fff; } .esExplDrp_entry_expl { color: #fff; }
It still has issues when hovering the "active" category (same happens when changing ticket status, the active status has the same bug).
I added this now as a half solution, but it didn't solve completly:
I will continue this when I find some more time, and yes the blue could be better as well, haven't gotten to it yet.
- 回复Mr.Nobody⬆:@Mr.Nobody
I just realized that the log-in area has some issues. Will update that as soon as possible (I am always logged in, so I didnt notice that page).