🎨 Add theme support

- Move root (var) style properties to `/assets/css/themes.scss`
- Improve mobile navigation
- Create section component for the collapsable sections.
- Create logo component, so color can be changed.

- Add settings page
- Add option to select theme color
- Add option to select theme background
- Add option to enable/disable multi-colored frames.

- Add settings to VueX Store
- Persist VueX store in LocalStorage.

assets/css/styles.scss

@@ -1,15 +1,8 @@
-:root {
-  --bg-color: #121212;
-  --fg-color: #FFF;
-  --ac-color: #51FF0D;
-  --err-color: #393939;
-}
-
 $responsiveWidth: 720px;
 
 ::selection {
   background-color: var(--ac-color);
-  color: var(--bg-color);
+  color: var(--act-color);
 }
 
 ::-webkit-scrollbar {
@@ -106,7 +99,7 @@ button {
   padding: 8px 16px;
   border-radius: 4px;
   background-color: var(--ac-color);
-  color: var(--bg-color);
+  color: var(--act-color);
   font-weight: 700;
   font-size: 16px;
   cursor: pointer;
@@ -128,55 +121,55 @@ fieldset textarea, fieldset pre {
   resize: vertical;
 }
 
-fieldset.request {
+fieldset.blue {
   border-color: #57b5f9;
 }
 
-fieldset.request legend {
+fieldset.blue legend {
   color: #57b5f9;
 }
 
-fieldset.history {
+fieldset.gray {
   border-color: #9B9B9B;
 }
 
-fieldset.history legend {
+fieldset.gray legend {
   color: #9B9B9B;
 }
 
-fieldset.authentication {
+fieldset.green {
   border-color: #B8E986;
 }
 
-fieldset.authentication legend {
+fieldset.green legend {
   color: #B8E986;
 }
 
-fieldset.parameters {
+fieldset.cyan {
   border-color: #50E3C2;
 }
 
-fieldset.parameters legend {
+fieldset.cyan legend {
   color: #50E3C2;
 }
 
-fieldset.reqbody {
+fieldset.blue-dark {
   border-color: #4A90E2;
 }
 
-fieldset.reqbody legend {
+fieldset.blue-dark legend {
   color: #4A90E2;
 }
 
-fieldset.response {
+fieldset.purple {
   border-color: #C198FB;
 }
 
-fieldset.response legend {
+fieldset.purple legend {
   color: #C198FB;
 }
 
-.hidden .collapsible {
+.collapsible.hidden {
   display: none;
 }
 
@@ -189,13 +182,28 @@ pre {
   padding: 8px 16px;
   width: calc(100% - 8px);
   border-radius: 4px;
-  background-color: #000;
+  background-color: var(--bg-dark-color);
   color: var(--fg-color);
   font-weight: 700;
   font-size: 18px;
   font-family: monospace;
 }
 
+// Force the same height, for dropdowns and regular input boxes.
+select,
+input,
+option {
+  height: 38px;
+}
+
+input[type="checkbox"] {
+  width: initial;
+
+  &, & + label {
+    vertical-align: middle;
+  }
+}
+
 .error {
   background-color: var(--err-color);
 }

assets/css/themes.scss

@@ -0,0 +1,39 @@
+/**
+  Main Themes:
+
+  - dark (default)
+  - light
+ */
+
+// Dark is the default theme variant.
+:root {
+  --bg-dark-color: #000000;
+  // Background color
+  --bg-color: #121212;
+  // Text color
+  --fg-color: #FFF;
+
+  // Error color
+  --err-color: #393939;
+
+  // Active color
+  --ac-color: #51FF0D;
+  // Active text color
+  --act-color: #121212;
+}
+
+:root.light {
+  --bg-dark-color: #ffffff;
+  // Background color
+  --bg-color: #F6F8FA;
+  // Text color
+  --fg-color: #121212;
+
+  // Error color
+  --err-color: invert(#393939, 1);
+
+  // Active color
+  --ac-color: #51FF0D;
+  // Active text color
+  --act-color: #121212;
+}