💄 Adds a new theme, used on website

src/styles/color-themes.scss

@@ -318,7 +318,7 @@ html[data-theme='minimal-light'], html[data-theme='minimal-dark'], html[data-the
   }
 
   label.lbl-toggle h3 {
-    font-size: 1.8rem;
+    font-size: 1.5rem;
   }
   .tile-title span.text {
     font-size: 1.1rem;
@@ -861,6 +861,81 @@ html[data-theme="oblivion-scotch"] {
   }
 }
 
+html[data-theme="dashy-docs"] {
+  --primary: #f5f6f7;
+  --background: #202020;
+  --background-darker: #121212;
+  --item-group-background: none;
+  --item-group-outer-background: #121212;
+  --item-group-heading-text-color: var(--background);
+  --item-group-heading-text-color-hover: var(--background);
+  --item-background: var(--background);
+  --item-background-hover: var(--background);
+  --item-text-color: var(--primary);
+  --minimal-view-section-heading-color: var(--background);
+  --item-group-padding: 0;
+  --curve-factor: 3px;
+  --curve-factor-navbar: 6px;
+  --item-shadow: 4px 4px 6px #00000080, -2px -2px 4px rgb(0 0 0 / 40%);
+  --item-group-shadow: 0px 3px 2px #222222, 0px 0px 2px #3e3e3e;
+  --font-headings: 'PTMono', 'Courier New', monospace;
+
+  footer {
+    box-shadow: 0 -3px 4px #010101;
+  }
+
+  section.settings-outer form input {
+    box-shadow: 1px 2px 4px #0b0b0b;
+  }
+
+  @mixin make-colors($first, $second) {
+    background: $first; box-shadow: 0 4px $second;
+    &:hover { box-shadow: 0 2px $second; }
+  }
+ 
+  // Section headings, nav bar items and minimal tabs
+  div.collapsable:nth-child(1n) label.lbl-toggle,
+  .minimal-section-heading:nth-child(1n),
+  a.nav-item:nth-child(1n) {
+    @include make-colors(#db78fc, #b83ddd);
+  }
+  div.collapsable:nth-child(2n) label.lbl-toggle,
+  .minimal-section-heading:nth-child(2n),
+  a.nav-item:nth-child(2n) {
+    @include make-colors(#5c85f7, #3d48dd);
+  }
+  div.collapsable:nth-child(3n) label.lbl-toggle,
+  .minimal-section-heading:nth-child(3n),
+  a.nav-item:nth-child(3n) {
+    @include make-colors(#41ef90, #1e9554);
+  }
+  div.collapsable:nth-child(4n) label.lbl-toggle,
+  .minimal-section-heading:nth-child(4n),
+  a.nav-item:nth-child(4n) {
+    @include make-colors(#dcff5a, #ceb73f);
+  }
+
+  // Section items
+  div.collapsable:nth-child(1n) { .item-wrapper:hover { .item {box-shadow: 0 2px 3px #db78fc; .tile-title { color: #db78fc; } } } }
+  div.collapsable:nth-child(2n) { .item-wrapper:hover { .item { box-shadow: 0 2px 3px #5c85f7; .tile-title { color: #5c85f7; } } } }
+  div.collapsable:nth-child(3n) { .item-wrapper:hover { .item { box-shadow: 0 2px 3px #41ef90; .tile-title { color: #41ef90; } } } }
+  div.collapsable:nth-child(4n) { .item-wrapper:hover { .item { box-shadow: 0 2px 3px #dcff5a; .tile-title { color: #dcff5a; } } } }
+
+  
+  a.nav-item, a.nav-item:hover, a.nav-item.router-link-active {
+    border: none;
+    color: var(--background);
+    font-weight: bold;
+  }
+  
+  .minimal-section-heading {
+    border: none !important;
+    &.selected {
+      background: var(--primary) !important;
+    }
+  }
+}
+
 html[data-theme="oblivion-blue"] {
   --primary: #82a5f3;
 }

src/utils/defaults.js

@@ -60,6 +60,7 @@ module.exports = {
     'vaporware',
     'high-contrast-dark',
     'high-contrast-light',
+    'dashy-docs',
   ],
   /* Which structural components should be visible by default */
   visibleComponents: {