diff --git a/src/css/themes/default.css b/src/css/themes/default.css
index 9f271e076..0424488b5 100644
--- a/src/css/themes/default.css
+++ b/src/css/themes/default.css
@@ -206,6 +206,111 @@
 }
 
 :root.dark {
+    --default-ink: var(--light-gray-10);
+    --default-ink-a4: var(--light-gray-10-a4);
+    --default-ink-a50: var(--light-gray-30-a50);
+    --default-surface: var(--dark-gray-90);
+    --default-surface-hover: var(--dark-gray-50);
+    --bg-1: hsla(250, 13%, 9%, 1);
+    --bg-1-border: hsla(250, 13%, 16%, 1);
+    --bg-overlay-50: #0008;
+    --bg-code: hsla(0, 2%, 0%, 0.8);
+    --fg-0-80: hsla(0, 0%, 53%, 0.8);
+    --fg-0-70: hsla(0, 0%, 53%, 0.7);
+    --fg-0-60: hsla(0, 0%, 53%, 0.6);
+    --fg-0-50: hsla(0, 0%, 53%, 0.5);
+    --fg-0-40: hsla(0, 0%, 53%, 0.4);
+    --fg-0-30: hsla(0, 0%, 53%, 0.3);
+    --fg-0-20: hsla(0, 0%, 53%, 0.2);
+    --link-ink: #bb86fc;
+    --fieldset-header-surface: transparent;
+    --fieldset-header-ink: var(--light-gray-30);
+    --hor-separator-color: var(--dark-gray-50);
+    --button-surface: var(--light-gray-10-a12);
+    --button-ink: var(--default-ink);
+    --button-surface-hover: var(--light-gray-10-a12);
+    --button-active-surface: var(--light-gray-70);
+    --button-important-surface: var(--dark-gray-30);
+    --button-important-surface-hover: var(--light-gray-60);
+    --button-disabled-filter: opacity(38%);
+    --button-disabled-surface: var(--dark-gray-50);
+    --button-disabled-ink: var(--light-gray-30-a50);
+    --button-preferred-surface: var(--dark-gray-50);
+    --button-preferred-ink: var(--light-gray-70);
+    --checkbox-size: calc(var(--font-size) + 2px);
+    --checkbox-ink: var(--default-ink);
+    --checkbox-checked-ink: #bb86fc;
+  /*--select-surface:*/
+    --bg-transient-notice: var(--dark-gray-50);
+    --dashboard-bar-shadow: 0px 0px 0px 1px var(--default-ink-a4);
+    --dashboard-tab-active-ink: #bb86fc;
+    --dashboard-tab-surface-hover: var(--default-surface-hover);
+    --fg-icon-info-lvl-0-dimmed: #888;
+    --fg-icon-info-lvl-0: inherit;
+    --fg-icon-info-lvl-1-dimmed: hsla(258, 57%, 35%, 1);
+    --fg-icon-info-lvl-1: hsla(258, 66%, 48%, 1);
+    --info-lvl-2-ink: var(--yellow-50);
+    --info-lvl-2-ink-hover: var(--yellow-60);
+    --fg-icon-info-lvl-3-dimmed: hsla(16, 100%, 50%, 0.5);
+    --fg-icon-info-lvl-3: hsla(16, 100%, 50%, 1);
+    --fg-icon-info-lvl-4-dimmed: hsla(0, 100%, 35%, 0.5);
+    --fg-icon-info-lvl-4: hsla(0, 100%, 35%, 1);
+    --large-icon-info-lvl-2: hsla(41, 100%, 47%, 1);
+    --bg-tooltip: var(--dark-gray-50);
+    --fg-tooltip: var(--light-gray-30);
+    --bg-popup-cell-1: var(--dark-gray-50);
+    --popup-power-ink: var(--violet-70);
+    --popup-power-disabled-ink: var(--light-gray-60);
+    --popup-power-ink-hover: var(--dark-gray-30);
+    --bg-popup-cell-2: var(--dark-gray-50);
+    --bg-popup-cell-label-filter: opacity(40%);
+    --fg-popup-cell-cname: hsla(0, 0%, 53%, 0.3);
+    --bg-popup-cell-allow: hsla(120, 40%, 75%, 1);
+    --bg-popup-cell-allow-own: hsla(120, 100%, 30%, 1);
+    --bg-popup-cell-noop: hsla(0, 0%, 75%, 1);
+    --bg-popup-cell-noop-own: hsla(0, 0%, 45%, 1);
+    --bg-popup-cell-block: hsla(0, 50%, 80%, 1);
+    --bg-popup-cell-block-own: hsla(0, 100%, 40%, 1);
+    --bg-popup-cell-label-mixed: hsla(45, 100%, 38%, 1);
+    --popup-icon-x-ink: #e22850;
+
+ /* Need to set colors in forms.css for moz-field stuffz
+  -moz-FieldText: #888888 !important;  change from these names to either HEX value or variables.  default-ink
+  -moz-Field: #15141a !important;    var would be var(--dark-gray-90) hex value might be easiest though.
+ /* TO DO
+ 1. Epicker window box color Variables needed;
+  #ublock0-epicker aside
+  background-color: var(--dark-gray-90)
+  outer border: var(--dark-gray-90)
+  inner order: var (
+  color: #999999a0
+  html#ublock0-epicker, #ublock0-epicker body
+    background: transparent !important;
+    color: #777 !important;
+
+ 2. CodeMirror (my filters and Whitelist) ADVANCED SETTINGS (background and color need variables)
+      .CodeMirror background: (currenty set to white) need a var
+    my Rules tab
+    codemirror panes   CodeMirror-merge-pane CodeMirror-merge-left
+    CodeMirror-merge-pane CodeMirror-merge-editor CodeMirror-merge-pane-rightmost
+    ***** file used is codemirror.css *********
+
+ 3. #cloudWidget background (linked to img) background is hsl - would be better if we had a background color instead of hsl.
+    ***** file used is cloud-ui.css ********
+ 4. Logger UI screen.  .permatoolbar, modalOverlayContainer : background-color;
+    headers  background-color, color border-color
+    #netFilteringDialog > div.panes > .dynamic .entry background-color: border-bottom:  ;
+    #netFilteringDialog > div.panes > .dynamic .entry > .action > .allow .noop .block
+    background-color.
+    #modalOverlayClose stoke: background-color
+    ****** file used is logger-ui.css *******
+    *//*
+ 5. Seperator bar - element/selector is hr   in common.css a variable is assigned.  popup-fenix.css
+    border-top - assigned HEX of #e3e2e3 variable should be assinged like in common.css
+    var(--hor-separator-color)
+ 6. .rulesetTools border color needs a variable
+    **** popup-fenix.css *****
+*/
 }
 
 :root.dark.colorBlind {