firefox/chrome/theme.as.css

   1 /*** Dark theme ***/
   2 /* inspired by https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme */
   3 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
   4
   5 /* adjust internal vars */
   6 *:root {
   7     /*TODO: eventually change to use lwt/chrome/-moz colors*/
   8     --in-content-page-color: #ccc !important;
   9     --in-content-page-background: #222 !important;
  10     --in-content-text-color: #ccc !important;
  11     /* --in-content-selected-text: #fff; */
  12     --in-content-box-background: #444 !important;
  13     --in-content-box-background-odd: #3a3a3a !important;
  14     --in-content-box-background-hover: #555 !important;
  15     --in-content-box-background-active: #333 !important;
  16     --in-content-box-border-color: #777 !important;
  17     --info-box-background-color: var(--in-content-box-background) !important;
  18     --info-box-border-color: var(--in-content-box-border-color) !important;
  19     /* --in-content-item-hover: rgba(0,149,221,0.25); */
  20     --in-content-item-selected: -moz-cellhighlight !important;
  21     /* --in-content-border-highlight: #0a84ff; */
  22     /* --in-content-border-focus: #0a84ff; */
  23     --in-content-border-color: #777 !important;
  24     /* --in-content-category-outline-focus: 1px dotted #0a84ff; */
  25     --in-content-category-text: #ccc !important;
  26     --in-content-category-text-active: #c0c0c0 !important;
  27     /* --in-content-category-text-selected: #0a84ff; */
  28     /* --in-content-category-text-selected-active: #0060df; */
  29     /* --in-content-category-background-hover: rgba(12,12,13,0.1); */
  30     /* --in-content-category-background-active: rgba(12,12,13,0.15); */
  31     /* --in-content-category-background-selected-hover: rgba(12,12,13,0.15); */
  32     /* --in-content-category-background-selected-active: rgba(12,12,13,0.2); */
  33     /* --in-content-tab-color: #424f5a; */
  34     --in-content-link-color: #09f !important;
  35     --in-content-link-color-hover: #0ff !important;
  36     --in-content-link-color-active: #0070aa !important;
  37     --in-content-link-color-visited: #0050aa !important;
  38     --in-content-primary-button-background: #05a !important;
  39     --in-content-primary-button-background-hover: #0040aa !important;
  40     --in-content-primary-button-background-active: #002070 !important;
  41     --in-content-table-background: #444 !important;
  42     /* --in-content-table-border-dark-color: #d1d1d1; */
  43     /* --in-content-table-header-background: #0a84ff; */
  44 }
  45 @-moz-document url(about:debugging) {
  46     .addon-target-container {
  47         background: var(--in-content-box-background) !important;
  48     }
  49 }
  50 @-moz-document url(about:performance) {
  51     #subprocess-reports td { /*no table-background??*/
  52         background: var(--in-content-box-background) !important;
  53     }
  54 }
  55 @-moz-document url(about:plugins), url(about:restartrequired),
  56                url(about:serviceworkers), url(about:webrtc) {
  57     html, body {
  58         /* XXX: doesnt always apply */
  59         background-color: var(--in-content-background-color) !important;
  60     }
  61 }
  62 @-moz-document url(about:webrtc) {
  63     .stats, .log {
  64         background-color: var(--info-box-background-color) !important;
  65         border-color: var(--info-box-border-color) !important;
  66     }
  67 }
  68 @-moz-document url(about:preferences), url(about:addons) {
  69     .info-panel, .extension-controlled {
  70         background-color: var(--info-box-background-color) !important;
  71         border-color: var(--info-box-border-color) !important;
  72     }
  73 }
  74
  75 /* Scrollbar */
  76 xul|page, xul|scrollbar, *:root {
  77     /* scrollbar-color: rgb(210, 210, 210) rgb(46, 54, 69) !important; */
  78     scrollbar-color: #05a #252525 !important;
  79     scrollbar-width: none !important;
  80 }
  81
  82 /* This should change the "not found" page image colors */
  83 #errorPageContainer:not(.button-container),
  84 #your-rights .rights-header,
  85 #lic-info .license-header {
  86     filter: invert(95%) hue-rotate(200deg)
  87 }
  88 @-moz-document url(about:devtools) {
  89     .left-pane {
  90         filter: invert(95%) hue-rotate(200deg)
  91     }
  92 }
  93 /* This fixes the inverted colors caused by the image filter */
  94 #errorPageContainer .button-container,
  95 #errorPageContainer #text-container,
  96 #your-rights .rights-header div,
  97 #lic-info .license-header div {
  98     filter: invert(95%) hue-rotate(-200deg)
  99 }
 100
 101 /* View source */
 102 @-moz-document url-prefix(view-source:) {
 103     html {
 104         background: #222 !important;
 105         color: #ccc !important;
 106     }
 107     .attribute-name {color: #093 !important}
 108     .start-tag, .end-tag {color: #f93 !important}
 109     .attribute-value {color: #09f !important}
 110 }