No internet connection
  1. Home
  2. Support

How to apply Dark theme/template?

By @Mr.Nobody
    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 #2, click to view
    • 4 replies
    1. @Mr.Nobody
        2022-07-08 00:51:20.692Z2022-07-11 19:51:20.341Z

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

        ReplySolution
        1. 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

          1. @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.

          2. 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).