Changing the colors

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

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

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