No internet connection

Changing the colors

By KajMagnus @KajMagnus2019-03-21 12:18:25.331Z2020-06-18 06:09:06.938Z

How to edit CSS to change the colors, to match your main website / your top header / your blog.

Later, there'll be a user interface for this, so you won't need to edit any CSS code. Also, currently, the arrow background is white so if you change the background, they'll look weird. I'm changing the background to transparent though.

/* Primary button colors  (green = hue 154, in this example)
------------------------------*/

.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(154, 80%, 39%);
}
.DW.DW .dw-ar-t > .dw-p-as > .dw-a-reply,
button.esScrollBtns_menu.btn.btn-default {
    background: hsl(154, 100%, 36%);
}


/* 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(0, 46%, 95%) !important;   /* bright red = hue 0, just an example */
}

/* Edits preview border color
------------------------------*/

.s_T_ReTo,
.s_T_YourPrvw {
    background: hsl(207, 100%, 84%);
}
.s_T-Prvw-IsEd.dw-id0:not(.s_P-Prvw-Real) {
    outline-color: hsl(207, 100%, 84%);
}
.s_P-Prvw:not(.s_P-Prvw-Real),
.dw-id0.s_T-Prvw-IsEd.dw-id0:not(.s_P-Prvw-Real),
.s_T-Flat.s_T-Prvw-IsEd.s_T-Flat:not(.s_P-Prvw-Real) {
    border-bottom-color: hsl(207, 100%, 84%) !important;
}

/* Makes the Sign Up dialog Log-In-instead button simpler to notice
------------------------------*/
.esLD_Switch .esLD_Switch_L {
    color: white;
    background: hsl(207, 100%, 48%);
    padding: 4px 9px 4px 12px;
    margin: 0 4px 0 7px;
    box-shadow: 3px 3px 2px rgba(0,0,0,31%);
}
  • 3 replies
  1. KajMagnus @KajMagnus2019-09-30 05:53:01.335Z

    For dark themes:

    /* 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.  */
    }
    
    1. CPeter - Cobertos @Cobertos2020-02-26 04:56:33.762Z

      I believe brightness won't work because you're using filter: instead of backdrop-filter: because the arrow is a background image.

      1. KajMagnus @KajMagnus2020-02-26 18:42:06.274Z

        I tried with:

        .dw-arw {
            backdrop-filter: brightness(90%);
        }
        

        However, this doesn't affect the background-image, i.e. the arrows — instead it affects the things behind the arrows, i.e. behind the background, ... = backdrop. The docs:

        The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent

        https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

        Here's a demo: https://css-tricks.com/the-backdrop-filter-css-property/

        Anyway, thanks for mentioning backdrop-filter, I didn't know about it or the concept of a backdrop before.