How to apply Dark theme/template?

2022-07-08 00:49:40.417Z

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:

Solved in post #12, click to view

Reply

Linked from:

How to apply Dark theme/template?

11 replies

There are 11 replies. Estimated reading time: 32 minutes

@Mr.Nobody
2022-07-08 00:51:20.692Z2023-06-26 19:31:09.248Z
EDIT: this code is deprecated. Check the reply marked as "solution" for the latest version with more fixes.

/* 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;/
}
*/
Reply
1. KajMagnus @KajMagnus
  core-dev
  support-team
  2022-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
  Reply 1 Like
  @Mr.Nobody
  2022-07-11 19:54:12.981Z
  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.
  
  Reply
In reply toMr.Nobody⬆:
@Mr.Nobody
2022-08-05 12:33:26.570Z
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).
Reply

In reply toMr.Nobody⬆:

@Mr.Nobody

2023-06-26 03:37:07.275Z2023-07-24 17:51:33.949Z

Updated some missing colors for URL's and Forum-Categories.
Better contrast.

/* 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 <iframe> )
------------------------------*/

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


/* forum category title SYMBOL (tiny triangle on the right side of the title) */
.esForum_catsDrop .caret {
    color: #0079db;
}
/* forum category title (tiny triangle on the right side of the title) */
.DW.DW .s_F_Ts_Cat_Ttl {
    color: #0079db!important;
}


/* unvisited link */
a:link {
  color: #14FFAD;
}

/* visited link */
a:visited {
  color: #0fa671;
}

.s_F_Ts_T_Con-Para:hover {
    background: #333 !important;
}

.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: white !important;
}

.dw-topic-list tbody tr.esForum_topics_topic td .dw-p-excerpt {
    color: #808080;
    margin: 0.8ex 20px 1.2ex 0;
    max-width: 650px;
    font-size: 100%;
    letter-spacing: -0.1px;
}

.s_F_Ts_T_Con-Para:hover .dw-p-excerpt {
    color: white !important;
    background: transparent !important;
}

.dw-topic-list tbody tr.esForum_topics_topic td a.c_TpcTtl:hover {
    background: inherit;
    outline: none;
    padding-top: 0;
}

.DW .s_F_Cs_C_ChildCs_C {
    color: #ffffff;
}

.c_F_TsL_T_Title>a:first-child {
    color: #0fa671; 
}

@Mr.Nobody
2023-06-26 03:40:07.042Z
@KajMagnus I made some more fixes, let me know what you think?
I wasn't able to make this "mouse hover box" look better, do you have any suggestions?
Reply
1. KajMagnus @KajMagnus
  core-dev
  support-team
  2023-06-26 13:05:21.413Z
  Yes, if you add these, (append to your post #6: How to apply Dark theme/template? #post-6) then the annoying white background disappears, and the text color stays white:
  
  .s_F_Ts_T_Con-Para:hover { background: #333 !important; } .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: white !important; } .dw-topic-list tbody tr.esForum_topics_topic td .dw-p-excerpt { color: #808080; margin: 0.8ex 20px 1.2ex 0; max-width: 650px; font-size: 100%; letter-spacing: -0.1px; } .s_F_Ts_T_Con-Para:hover .dw-p-excerpt { color: white !important; background: transparent !important; } .dw-topic-list tbody tr.esForum_topics_topic td a.c_TpcTtl:hover { background: inherit; outline: none; padding-top: 0; }
  
  (P.S. It seems to me that, when doing quick CSS fixes, I've added too many !important, making what-you-are-doing (dark theme) more complicated.
  — There'll be some CSS refactoring in the future, and then the !important will likely disappear. I'll try to remember to make your theme work, & send you a message, then :- ))
  Reply 1 Like
  1. @Mr.Nobody
    2023-06-26 19:06:59.769Z2023-06-26 20:12:51.975Z
    This worked for the regular view, but not on small screens. When the width falls under a certain value the design switches and then the titles all get dark.
    Seems to be related to this class:
    
    If I disable it in the editor, then the text gets readable, though now it is green for some reason.
    Green also looks ok, so this would be fine as long as it was the same color in both views. I'm having trouble getting things to stay the same, probably because of those !important declarations you mentioned (or my bad CSS skills)
    
    EDIT: I added the latest changes and this element as white to the latest answer marked as "solution". I think it is now in a usable/presentable state.
    
    Reply

In reply toMr.Nobody⬆:

@Mr.Nobody

2023-07-24 18:04:44.950Z

I've updated the code again. Changed some colors to green to make it easier to see what is an URL and what not.
@KajMagnus it would be nice to clean the original CSS a bit to make it easier to change these things. the !important tags overwrite rules quite a lot.
I was able to change the topic colors to green, but the automatic coloring of URL's based on visited/not-visited status gets overwritten in most places.

/* 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 <iframe> )
------------------------------*/

.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: #0fa671;
	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: #0fa671;
	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;*/
}
*/


/* forum category title SYMBOL (tiny triangle on the right side of the title) */
.esForum_catsDrop .caret {
    color: #0079db;
}
/* forum category title (tiny triangle on the right side of the title) */
.DW.DW .s_F_Ts_Cat_Ttl {
    color: #0079db!important;
}


/* unvisited link */
a:link {
  color: #14FFAD;
}

/* visited link */
a:visited {
  color: #0fa671;
}

.s_F_Ts_T_Con-Para:hover {
    background: #333 !important;
}

.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: #0fa671!important;
}

.dw-topic-list tbody tr.esForum_topics_topic td .dw-p-excerpt {
    color: #ffffff;
    margin: 0.8ex 20px 1.2ex 0;
    max-width: 650px;
    font-size: 100%;
    letter-spacing: -0.1px;
}

.s_F_Ts_T_Con-Para:hover .dw-p-excerpt {
    color: #0fa671!important;
    background: transparent !important;
}

.dw-topic-list tbody tr.esForum_topics_topic td a.c_TpcTtl:hover {
    background: inherit;
    outline: none;
    padding-top: 0;
}

.DW .s_F_Cs_C_ChildCs_C {
    color: #0fa671;
}

.c_F_TsL_T_Title>a:first-child {
    color: #0fa671; 
}

Reply Solution

D
In reply toMr.Nobody⬆:
danialvitori @danialvitori
2023-07-22 09:51:30.023Z
I was also facing the same issue. Now finally got the answer. Thanks for posting.
Reply
1. @Mr.Nobody
  2023-07-24 17:45:56.421Z2023-07-24 17:52:02.291Z
  I found some issues with URL colors in the mobile version. I'll update the CSS-code soon to try to improve that.
  Let me know if you run into other issues.
  
  EDIT: I've updated the code to fix the mobile version.
  Reply

ReplyAdd progress note