ESR Dark Mode – userContent.css

/* -------------------------------------------------------------- */
/*   v4.0.3-C  ||  Firefox ESR v68.9.0  ||  HighValueDayGame      */
/* -------------------------------------------------------------- */

@-moz-document url(about:blank), url(about:home), url(about:newtab),
url(about:preferences), url(about:preferences#general), url(about:preferences#home),
url(about:preferences#search), url(about:preferences#privacy), url(about:preferences#sync),
url(about:addons), url(about:config), url(about:debugging#addons),
url-prefix("chrome://mozapps/content/update/history.xul"),
url-prefix("chrome://mozapps/content/preferences/changemp.xul"),
url-prefix("chrome://mozapps/content/extensions/aboutaddons.html"),
url-prefix("chrome://pippki/content/certManager.xul"),
url-prefix("chrome://pippki/content/device_manager.xul"),
url-prefix("chrome://passwordmgr/content/passwordManager.xul"),
url-prefix("chrome://browser/content/sanitize.xul"),
url-prefix("chrome://browser/content/preferences/fonts.xul"),
url-prefix("chrome://browser/content/preferences/colors.xul"),
url-prefix("chrome://browser/content/preferences/languages.xul"),
url-prefix("chrome://browser/content/preferences/connection.xul"),
url-prefix("chrome://browser/content/preferences/containerss.xul"),
url-prefix("chrome://browser/content/preferences/permissions.xul"),
url-prefix("chrome://browser/content/preferences/sitePermissions.xul"),
url-prefix("chrome://browser/content/preferences/siteDataSettings.xul") {

body {                                                           /* Window background colour*/
background-color: rgb(32,32,32) !important;
}

.search-wrapper .logo-and-wordmark .wordmark {                   /* "Firefox" text */
fill: rgb(200,200,200) !important;
}

#newtab-search-text {                                            /* Search box */
background-color: rgb(52,52,52) !important; 
color: rgb(200,200,200) !important;
}

#newtab-search-text:focus { 
border: 1px solid rgb(48,48,48) !important; 
box-shadow: 0px 0px 0px 2px rgba(48,48,48,1)  !important;
}

.contentSearchHeader {                                           /* "DuckDuckGo" and "Change Search Settings" text */
background-color: rgb(52,52,52) !important;
color: rgb(200,200,200) !important;
border-color: rgb(132,132,132) !important;
}

.contentSearchHeader:hover {                                     /* "DuckDuckGo" and "Change Search Settings" text, HOVER */
background-color: rgb(132,132,132) !important;
color: rgb(0,0,0) !important;
border-color: rgb(132,132,132) !important;
}

.contentSearchSuggestionEntry {                                  /* Search results */
color: rgb(200,200,200) !important;
background-color: rgb(52,52,52) !important;
}

.contentSearchSuggestionEntry:hover {                            /* Search results, HOVER */
background-color: rgb(132,132,132) !important;
color: rgb(0,0,0) !important;
}

.icon {
display: none !important;
}


/* -------------------------------------------------------------- */
/* SERVICE PAGES                                                  */
/* -------------------------------------------------------------- */

:root {                                  
  --in-content-page-color: rgb(220,220,220) !important;          /* text */
  --in-content-deemphasized-text: rgb(220,220,220) !important;
  --in-content-page-background: rgb(32,32,32) !important;        /* background */
  --in-content-text-color: rgb(220,220,220) !important;          /* titles and side lists */

  --in-content-box-background: rgb(52,52,52) !important;         /* search boxes and check boxes */
  --in-content-box-border-color: rgb(144,144,144) !important;    /* border - static - search & check boxes*/
  --in-content-border-focus: rgb(169,169,169) !important;        /* check boxes - border on hover */
  --in-content-border-hover: rgb(169,169,169) !important;        /* search boxes - hover */
  --in-content-border-active: rgb(80,80,80) !important;          /* search boxes - active */
  --in-content-border-active-shadow: none !important;            /* search boxes - shadow */

  --in-content-box-background-hover: rgb(80,80,80) !important;   /* top row "One-Click Search Engines" */
  --in-content-item-hover: rgb(80,80,80) !important;             /* hover on items in "One-Click Search Engines" */

  --in-content-border-color: rgb(128,128,128) !important;        /* border of disabled items and horizontal lines */

  --in-content-border-highlight: rgb(128,128,128) !important;    /* border of selected tab in Extensions/Options, Privacy/Certificates, etc. */


                                                                 /* text selected left-hand side */
  --in-content-category-text-selected: rgb(120,220,190) !important;         /* static */
  --in-content-category-text-selected-active: rgb(120,220,190) !important;  /* on-click */
  --in-content-category-background-selected-hover: none !important;         /* background on hover */
  --in-content-category-background-selected-active: none !important;        /* background selected */
  --in-content-category-outline-focus: none !important;                     /* border when going out of selection */


                                                                 /* text NOT selected left-hand side */
  --in-content-category-background-hover: none !important;                  /* background on hover */
  --in-content-category-background-active: none !important;                 /* background selected */

  --in-content-tab-color: rgb(0,100,0) !important;               /* links */
  --in-content-link-color:  rgb(120,220,190) !important;
  --in-content-link-color-hover:  rgb(120,220,190) !important;
  --in-content-link-color-active: rgb(120,220,190) !important;
  --in-content-link-color-visited: rgb(120,220,190) !important;

  --in-content-button-background: rgb(56,56,56) !important;      /* buttons */
  --in-content-button-background-hover: rgb(72,72,72) !important;
  --in-content-button-background-active: rgb(56,56,56) !important;

  --in-content-dialogtitle-background: rgb(56,56,56) !important; /* header open dialog windows */
  --in-content-dialogtitle-border: rgb(128,128,128) !important;  /* horizontal border */
  --in-content-warning-container: rgb(80,80,80) !important;      /* background items on the main page */

                                                                 /* buttons in Extension */
  --in-content-primary-button-background: rgb(128,128,128) !important;
  --in-content-primary-button-background-hover: rgb(144,144,144) !important;
  --in-content-primary-button-background-active: rgb(128,128,128) !important;

  --in-content-item-selected: rgb(80,80,80) !important;
}

/* -------------------------------------------------------------- */
/* Items left-hand side */

#categories > .category[selected], #categories > .category.selected {
  color: rgb(120,220,190) !important;
  background-color: rgb(32,32,32) !important;
}

#categories > .category[selected]:hover, #categories > .category.selected:hover {
  background-color: none !important;
}

#categories > .category:hover {
    background-color: none !important;
}

/* -------------------------------------------------------------- */

richlistitem[selected="true"] {                                  /* items selected in a list */
  background-color: rgb(102,102,102) !important;
  color: rgb(220,220,220) !important;
}

.checkbox-check {
  filter: grayscale(100%) !important;                            /* square check boxes */
}

.radio-check {                                                   /* round check boxes */
  filter: grayscale(100%) !important;
}
xul|*.radio-check {
  background-color: none !important;
}

.content-blocking-icon, .permission-icon, .content-blocking-category .checkbox-label-box, .extra-information-label > image, .arrowhead, .content-blocking-info-image, .reload-tabs-button, .content-blocking-warning-image {
  -moz-context-properties: fill;
  fill: rgb(220,220,220) !important;
}

/* -------------------------------------------------------------- */
/* Preferences / General */

.face-smile {
  filter: grayscale(100%) !important;
}

.extension-controlled-icon {
  filter: grayscale(100%) !important;
}

.typeIcon, .actionIcon, .actionsMenu .menulist-icon {
  filter: grayscale(100%) !important;
}

#downloadFolder {
  filter: grayscale(100%);
}

/* -------------------------------------------------------------- */
/* Preferences / Search */

treecol:not([hideheader="true"]), treecolpicker {                /* one-click search engines */
  background-color: rgb(52,52,52) !important;
  color: rgb(220,220,220) !important;
}

tree {
  filter: grayscale(100%) !important;                            /* icons one-click search engines */
}

.menuitem-iconic, .menu-iconic, menuitem[image] {
  filter:grayscale(25%) !important;
}

.userContext-icon {                                              /* container icons */
  filter:grayscale(25%) !important;
}

.menulist-label-box {
  filter: grayscale(100%) !important;                            /* icon default search engine */
}

.searchBarImage {
  filter:grayscale(25%) !important;
}

/* -------------------------------------------------------------- */
/* Preferences / Privacy */

.content-blocking-category.selected {      
  border: 1px solid rgb(144,144,144) !important;
  background-color: rgba(120,220,190,0.3) !important;
}

.content-blocking-warning {
  background-color: rgba(169,169,169,0.2) !important;
}

tab[visuallyselected] {                                          /* Certificates */
    color: rgb(220,220,220) !important;
}
tab[selected] {
    background-color: rgb(56,56,56) !important !important;
}
tab {
    color: rgb(220,220,220) !important;
}
tab:hover {
  background-color: rgb(72,72,72) !important;
}

/* -------------------------------------------------------------- */
/* Extensions */

.addon-description {
  color: rgb(220,220,220) !important;;
}

.addon-detail-row {
  color: rgb(220,220,220) !important;;
}

.addon.card:hover {
  box-shadow: var(--card-shadow), 0 0 0 2px rgb(144,144,144) !important;
}

.card-heading-icon {
  filter:grayscale(25%) !important;
}

/* -------------------------------------------------------------- */
/* Debugging#addons */

.card:hover {
  box-shadow: var(--card-shadow), 0 0 0 2px rgb(144,144,144) !important;
}

}