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%);
}
  • 16 replies

There are 16 replies. Estimated reading time: 18 minutes

  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 @Cobertos
        2020-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. 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 @rdricco
            2020-11-07 08:28:57.218Z

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

            1. 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 @rdricco
                  2020-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 @fdf92441
                      2020-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. 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 @fdf92441
                            2020-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. Ok :- )

                  2. In reply toKajMagnus:
                    @Mr.Nobody
                      2021-08-20 19:58:35.222Z2022-02-24 16:48:01.404Z

                      Sharing the Updated Dark Theme that we are using in our forum. It is based on what KajMagnus shared in 2019, but with fixes to work better after updates (fixed topic titles, topic previews and some other things)
                      (check our forum for a preview: https://how-to-create-a-fun-mmorpg.talkyard.net/)

                      /* 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;
                      }
                      
                      1. @Mr.Nobody
                          2021-08-24 17:21:12.887Z

                          Updated to fix the list view of posts and also the editor, which were missing.

                          1. In reply toMr.Nobody:
                            @Mr.Nobody
                              2022-02-24 16:48:16.200Z

                              updated again, edited some more things.

                              1. Ok :- )   (I'll have a closer look, later when it's time to add user friendly theming support. To see what colors, borders, etc need to be configurable)

                            • C
                              In reply toKajMagnus:
                              cilex-ft @cilex_ft
                                2022-01-07 00:59:38.412Z

                                I've been playing with Hugo recently to manage a blog, and the thme I use, PaperMod, https://adityatelange.github.io/hugo-PaperMod/, happens to have a really nice solution to manage Dark Mode - and hence to create my own theme easily if necessary.

                                It uses css variables to define stuff:

                                :root {
                                    --gap: 24px;
                                    --content-gap: 20px;
                                    --nav-width: 1024px;
                                    --main-width: 720px;
                                    --header-height: 60px;
                                    --footer-height: 60px;
                                    --radius: 8px;
                                    --theme: rgb(255, 255, 255);
                                    --entry: rgb(255, 255, 255);
                                    --primary: rgb(30, 30, 30);
                                    --secondary: rgb(108, 108, 108);
                                    --tertiary: rgb(214, 214, 214);
                                    --content: rgb(31, 31, 31);
                                    --hljs-bg: rgb(28, 29, 33);
                                    --code-bg: rgb(245, 245, 245);
                                    --border: rgb(238, 238, 238);
                                }
                                

                                then uses javascript to switch to Dark mode:

                                .dark {
                                    --theme: rgb(29, 30, 32);
                                    --entry: rgb(46, 46, 51);
                                    --primary: rgb(218, 218, 219);
                                    --secondary: rgb(155, 156, 157);
                                    --tertiary: rgb(65, 66, 68);
                                    --content: rgb(196, 196, 197);
                                    --hljs-bg: rgb(46, 46, 51);
                                    --code-bg: rgb(55, 56, 62);
                                    --border: rgb(51, 51, 51);
                                }
                                

                                Then css juste uses these variables:

                                .main {
                                    position: relative;
                                    min-height: calc(100vh - var(--header-height) - var(--footer-height));
                                    max-width: calc(var(--main-width) + var(--gap) * 2);
                                    margin: auto;
                                    padding: var(--gap);
                                }
                                .pagination a {
                                    color: var(--theme);
                                    background: var(--primary);
                                }
                                

                                Perhaps you can use this trick? Just my 2c...

                                1. Looks nice :- )   I'm thinking that when Talkyard "soon" (read: this year 2022 or next) gets a theme builder, it'll use CSS variables. Good browser support nowadays: https://caniuse.com/css-variables (IE11 not supported anyway)