Developing a dark theme.

src/web/ControlsWaiter.js

@@ -106,11 +106,11 @@ ControlsWaiter.prototype.autoBakeChange = function() {
     this.app.autoBake_ = autoBakeCheckbox.checked;
 
     if (autoBakeCheckbox.checked) {
-        autoBakeLabel.classList.remove("btn-default");
         autoBakeLabel.classList.add("btn-success");
+        autoBakeLabel.classList.remove("btn-default");
     } else {
-        autoBakeLabel.classList.remove("btn-success");
         autoBakeLabel.classList.add("btn-default");
+        autoBakeLabel.classList.remove("btn-success");
     }
 };
 

src/web/stylesheets/components/_operation.scss

@@ -13,7 +13,9 @@
     position: relative;
     border-width: 1px;
     border-style: solid;
-    border-top-width: 0;
+    border-top: none;
+    border-left: none;
+    border-right: none;
 }
 
 .arg-group {
@@ -55,7 +57,7 @@
     line-height: $argInputLineHeight;
     color: $argFontColour;
     background-color: $argBackground;
-    border: 1px solid $primaryBorderColour;
+    border: 1px solid $argBorderColour;
     font-family: $fixedWidthFontFamily;
 }
 
@@ -67,7 +69,7 @@ select {
     display: block;
     padding: 6px 8px;
     height: 34px;
-    border: 1px solid $primaryBorderColour;
+    border: 1px solid $argBorderColour;
     background-color: $argBackground;
     color: $argFontColour;
 }
@@ -83,9 +85,10 @@ textarea.arg {
     min-height: 50px;
     height: 70px;
     margin-top: 5px;
-    border: 1px solid $primaryBorderColour;
+    border: 1px solid $argBorderColour;
     resize: vertical;
     color: $argFontColour;
+    background-color: $argBackground;
     font-family: $fixedWidthFontFamily;
 }
 

src/web/stylesheets/layout/_controls.scss

@@ -44,11 +44,11 @@ $controlsDivision: 65%;
     width: 60px;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    border-left: 1px solid #5cb85c;
+    border-left: 1px solid $btnSuccessBgColour;
 }
 
 #auto-bake-label:hover {
-    border-left-color: #398439;
+    border-left-color: $btnSuccessHoverBorderColour;
 }
 
 #auto-bake-label div {

src/web/stylesheets/layout/_modals.scss

@@ -67,7 +67,7 @@
 #save-footer {
     border-top: none;
     margin-top: 0;
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primaryBorderColour;
 }
 
 #support-modal textarea {

src/web/stylesheets/main.scss

@@ -17,7 +17,7 @@
 
 // CyberChef styles
 // Default theme
-@import "themes/_classic";
+@import "themes/_dark";
 
 // Utilities
 @import "utils/_mixins";

src/web/stylesheets/themes/_classic.scss

@@ -27,6 +27,9 @@ $secondaryBorderColour: #eee;
 $titleColour: #424242;
 $titleWeight: bold;
 
+$bannerFontColour: #468847;
+$bannerBgColour: #dff0d8;
+
 
 // Operation colours
 $opListOperationFontColour: #3a87ad;
@@ -69,9 +72,28 @@ $argInputLineHeight: 20px;
 $argInputFontSize: 15px;
 $argFontColour: #424242;
 $argBackground: #fff;
+$argBorderColour: #ddd;
 $argDisabledBackground: #eee;
 
 
+// Buttons
+$btnDefaultFontColour: #333;
+$btnDefaultBgColour: #fff;
+$btnDefaultBorderColour: #ddd;
+
+$btnDefaultHoverFontColour: #333;
+$btnDefaultHoverBgColour: #ebebeb;
+$btnDefaultHoverBorderColour: #adadad;
+
+$btnSuccessFontColour: #fff;
+$btnSuccessBgColour: #5cb85c;
+$btnSuccessBorderColour: #4cae4c;
+
+$btnSuccessHoverFontColour: #fff;
+$btnSuccessHoverBgColour: #449d44;
+$btnSuccessHoverBorderColour: #398439;
+
+
 // Highlighter colours
 $hl1: #fff000;
 $hl2: #95dfff;
@@ -80,12 +102,13 @@ $hl4: #fcf8e3;
 $hl5: #8de768;
 
 
-// Misc.
+// Scrollbar
-$dropFileBorderColour: #3a87ad;
-
-$bannerFontColour: #468847;
-$bannerBgColour: #dff0d8;
-
 $scrollbarTrack: $secondaryBackgroundColour;
 $scrollbarThumb: #ccc;
 $scrollbarHover: #bbb;
+
+
+// Misc.
+$dropFileBorderColour: #3a87ad;
+$popoverBackground: #fff;
+$popoverBorderColour: #ccc;

src/web/stylesheets/themes/_dark.scss

@@ -0,0 +1,121 @@
+/**
+ * Dark theme definitions
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+// tabs
+// links
+// disabled buttons
+// popovers
+// toggle-string dropdowns
+// alerts
+
+$primaryFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$primaryFontColour: #c5c5c5;
+$primaryFontSize: 14px;
+$primaryLineHeight: 20px;
+
+$fixedWidthFontFamily: "Monaco", "Droid Sans Mono", "Consolas", monospace;
+$fixedWidthFontColour: inherit;
+$fixedWidthFontSize: inherit;
+
+$subtextFontColour: #999;
+$subtextFontSize: 13px;
+
+$primaryBackgroundColour: #1e1e1e;
+$secondaryBackgroundColour: #252525;
+
+$primaryBorderColour: #444;
+$secondaryBorderColour: #3c3c3c; //todo
+
+$titleColour: #fff;
+$titleWeight: bold;
+
+$bannerFontColour: #c5c5c5;
+$bannerBgColour: #333;
+
+
+// Operation colours
+$opListOperationFontColour: #c5c5c5;
+$opListOperationBgColour: #333;
+$opListOperationBorderColour: #444;
+
+$recListOperationFontColour: #c5c5c5; //todo
+$recListOperationBgColour: #333;
+$recListOperationBorderColour: #444;
+
+$selectedOperationFontColor: #c09853; //todo
+$selectedOperationBgColour: #fcf8e3;
+$selectedOperationBorderColour: #fbeed5;
+
+$breakpointFontColour: #b94a48; //todo
+$breakpointBgColour: #f2dede;
+$breakpointBorderColour: #eed3d7;
+
+$breakpointFontColour: #b94a48; //todo
+$breakpointBgColour: #f2dede;
+$breakpointBorderColour: #eed3d7;
+
+$disabledFontColour: #999; //todo
+$disabledBgColour: #dfdfdf;
+$disabledBorderColour: #cdcdcd;
+
+$fcOperationFontColour: #396f3a; //todo
+$fcOperationBgColour: #c7e4ba;
+$fcOperationBorderColour: #b3dba2;
+
+$fcBreakpointOperationFontColour: #94312f; //todo
+$fcBreakpointOperationBgColour: #eabfbf;
+$fcBreakpointOperationBorderColour: #e2aeb5;
+
+
+// Operation arguments
+$argTitleFontWeight: bold; //todo
+$argInputHeight: 34px;
+$argInputLineHeight: 20px;
+$argInputFontSize: 15px;
+$argFontColour: #bbb;
+$argBackground: #252525;
+$argBorderColour: #205375;
+$argDisabledBackground: #eee; //todo
+
+
+// Buttons
+$btnDefaultFontColour: #c5c5c5;
+$btnDefaultBgColour: #3c3c3c;
+$btnDefaultBorderColour: #205375;
+
+$btnDefaultHoverFontColour: #c5c5c5;
+$btnDefaultHoverBgColour: #2d2d2d;
+$btnDefaultHoverBorderColour: #205375;
+
+$btnSuccessFontColour: #fff;
+$btnSuccessBgColour: #073655;
+$btnSuccessBorderColour: #0e639c;
+
+$btnSuccessHoverFontColour: #fff;
+$btnSuccessHoverBgColour: #0e639c;
+$btnSuccessHoverBorderColour: #0e639c;
+
+
+// Highlighter colours
+$hl1: #fff000; //todo
+$hl2: #95dfff;
+$hl3: #ffb6b6;
+$hl4: #fcf8e3;
+$hl5: #8de768;
+
+
+// Scrollbar
+$scrollbarTrack: #1e1e1e;
+$scrollbarThumb: #424242;
+$scrollbarHover: #4e4e4e;
+
+
+// Misc.
+$dropFileBorderColour: #3a87ad; //todo
+$popoverBackground: #444;
+$popoverBorderColour: #666;

src/web/stylesheets/utils/_overrides.scss

@@ -15,18 +15,38 @@ a:focus {
 }
 
 .btn-default {
-    border-color: #ddd;
+    color: $btnDefaultFontColour;
-}
+    background-color: $btnDefaultBgColour;
-
+    border-color: $btnDefaultBorderColour;
-.btn-default:focus {
-    background-color: #fff;
-    border-color: #adadad;
 }
 
 .btn-default:hover,
-.btn-default:active {
+.btn-default:active,
-    background-color: #ebebeb;
+.btn-default:hover:active {
-    border-color: #adadad;
+    color: $btnDefaultHoverFontColour;
+    background-color: $btnDefaultHoverBgColour;
+    border-color: $btnDefaultHoverBorderColour;
+}
+
+.btn-default:focus {
+    color: $btnDefaultFontColour;
+    background-color: $btnDefaultBgColour;
+    border-color: $btnDefaultHoverBorderColour;
+}
+
+.btn-success {
+    color: $btnSuccessFontColour;
+    background-color: $btnSuccessBgColour;
+    border-color: $btnSuccessBorderColour;
+}
+
+.btn-success:hover,
+.btn-success:active,
+.btn-success:focus,
+.btn-success:hover:active {
+    color: $btnSuccessHoverFontColour;
+    background-color: $btnSuccessHoverBgColour;
+    border-color: $btnSuccessHoverBorderColour;
 }
 
 .btn,
@@ -54,6 +74,15 @@ input[type="search"]::-webkit-search-cancel-button {
     overflow-y: auto;
 }
 
+.modal-content {
+    background-color: $primaryBackgroundColour;
+}
+
+.modal-header,
+.modal-footer {
+    border-color: $primaryBorderColour;
+}
+
 .form-control {
     background-color: transparent;
 }
@@ -89,6 +118,17 @@ optgroup {
     width: auto !important;
 }
 
+.popover,
+.popover.right>.arrow {
+    background-color: $popoverBackground;
+    border-color: $popoverBorderColour;
+}
+
+.popover.right>.arrow:after {
+    // border-color: $popoverBorderColour;
+    border-right-color: $popoverBackground;
+}
+
 
 /* Bootstrap-switch */