No internet connection
  1. Home
  2. Support

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%);
}
  • 10 replies
  1. KajMagnus @KajMagnus2019-09-30 05:53:01.335Z2020-10-08 15:32:41.332Z

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

      2. In reply toKajMagnus:
        Rrenato ricco @rdricco2020-11-07 08:28:57.218Z

        Don't work when using on gatsby... maybe I forgot something?

        1. KajMagnus @KajMagnus2020-11-08 18:55:42.728Z

          You added the CSS to Talkyard? Not to the Gatsby blog? Shouldn't matter what blog framework is in use — the colors and styles inside the <iframe> (Talkyard's blog comments are in an iframe) aren't affected by if it's Gatsby or Ghost or something else "outside" the iframe.

          (If you paste / send me a link to the blog I could have a look)

          1. Rrenato ricco @rdricco2020-11-09 00:09:08.041Z

            I was trying on Gatsby, on my global css. I forgot about the css/js config on talkyard.
            I think it's solved. Thank you!

            1. In reply toKajMagnus:
              FDaniel Franco @fdf924412020-11-10 19:26:42.853Z

              Hi, I am very new to using all of this. I love it and can you help me in making chat not look weird in my blog's dark mode.
              Mi blogBlog in GitHub
              I don't know where to start, so it looks white when it's white and dark when everything is dark.

              1. KajMagnus @KajMagnus2020-11-13 08:50:40.140Z

                Hi Daniel (sorry for the late reply), there's just a little bit support for light and dark themes — namely a custom html data-iframe-html-class attribute:

                <div class="talkyard-comments" data-iframe-html-class="some-css-class">
                

                It makes the <html> tag inside the <iframe> get a CSS class some-css-class of your choice. So you could do:

                <div class="talkyard-comments" data-iframe-html-class="dark-theme">
                

                which would make the HTML in the iframe look like:

                <html class=" ...  dark-theme">
                

                And then you can prefix the styles for the blog comments, with .dark-theme.

                This attribute takes effect on page load (but not if changed dynamicaly after page already loaded).

                To change theme dynamically — maybe it'd be good if Talkyard's iframe listened for some type of postMessage(...) message, like setTheme: "the-blogs-dark-theme-name". Then, the toggle theme button on your blog, could do postMessage(['setTheme', 'Dark-Theme']) or sth like that.

                (B.t.w. maybe sounds a bit weird, but I a bit like the colors at the blog, as they are now. Maybe just the gray text background on the Light theme that looks a bit surprising.
                It's Gatsby, right?)

                1. FDaniel Franco @fdf924412020-11-14 00:09:52.464Z

                  Hola, muchas gracias por ayudarme. Si es Gatsby, aunque jugando un poco con las trasparencias de colores pude lograr algo lindo tanto en el tema día como noche. :)

                  1. KajMagnus @KajMagnus2020-11-14 14:31:45.209Z

                    Ok :- )