Dark theme 2

[wvxwxvw]

I ask you to remember this request and look at the solutions that were offered to you - #283
I don't know how much those codes are working now, but this one definitely works:

/* I have this global code for pages moz-extension */
body {
    background: rgba(43,42,51,1) !important;
    background-color: rgba(43,42,51,1) !important;
    color: #C7C7C7 !important;
  }
/* And this one is directly for your extension */
html, body, .dropdown.selection, .menu .item, .ui.menu {
    background: #222 !important}
.ui.small.message.visible, [data-tooltip]:hover::after, [data-tooltip]:hover::before {
    background-color: #222 !important;
    border: 1px solid #888 !important;
    color: #ccc !important}

input[type="text"], #scriptCode {
  background-color: #444 !important;
  border: 1px solid #666 !important;
  color: #ddd !important}

input[type="text"]:focus, #scriptCode:focus {border: 1px solid #0a84ff !important}

.ui.segment, .pusher  {
  background: #303030 !important;
  color: #ccc !important}

.ui.segment.active, .item.active {background: #353535 !important}
.item, label, h4, h3 {color: #ccc !important}
.item.active, .dropdown.selection, .text, .label {color: #ddd !important}

i.icon {color: #ccc !important}

.item:not(.active):hover{background: #282828 !important}

.ui.selection.dropdown .menu > .item, .ui.tabular.menu, .ui.menu,
.item.active, .ui.popup, .ui.segment {border-color: #666 !important}

.ui.negative.message {
  background-color: #2A1407 !important;
  color: #f66 !important;
  box-shadow: 0 0 0 1px #522 inset,0 0 0 0 transparent !important}

.ui.notice.message, .ui.tiny.button {
  background-color: #555 !important;
  color: #fff !important;
  border-color: #ccc !important}

.ui.tiny.button:hover {
  background-color: #666 !important;
  color: #fff !important;}

.ui.notice.message a:link, .ui.notice.message a {color: #09f !important}
.ui.notice.message a:visited {color: #0070aa !important}
.ui.notice.message a:hover {color: #0ff !important}
.ui.notice.message a:active {color: #0050aa !important}

#tmpButton svg {filter: invert(90%) !important}

label::before, .ui.popup {filter: invert(75%)}

.ui.checkbox input:checked ~ label::after {
    color: #09f !important;}

a.ui.label.transition.visible {
    background-color: #111 !important;}

}

The only thing it doesn't cover is the alerts above the settings page that appear with some actions.

I do not know how this is done in extensions, but in userContent.css, so that this code is applied only to dark topics, it is enough to enclose it in a shell:

@media (-moz-toolbar-prefers-color-scheme: dark) {
place the required code here
}

[wvxwxvw]

Pay attention to the last screenshot. With the arrow I marked the icon that does not respond to the css properties "color" and "fill". It looks like it was added in a non-standard way. It would be nice to redo it in the code, now I had to change the icon in the addon itself.