feat(theme): Vaporwave (#1682)

* Make vaporwave dark theme work

* Tweak vaporwave light theme

---------

Co-authored-by: Dessalines <dessalines@users.noreply.github.com>

src/assets/css/themes/_variables.vaporwave-dark.scss

@@ -0,0 +1,27 @@
+@import "./variables.vaporwave";
+
+// Colors
+$white: #fff;
+$gray-200: #ebebeb;
+$gray-600: #888;
+$gray-700: #444;
+$gray-800: #303030;
+$gray-900: #222;
+
+$light: $gray-700;
+
+$body-bg: $gray-900;
+$body-color: $gray-200;
+
+$card-bg: $body-bg;
+$navbar-dark-color: rgba($body-bg, 0.5);
+$navbar-light-active-color: rgba($gray-200, 0.9);
+$navbar-light-disabled-color: rgba($gray-200, 0.3);
+$navbar-light-color: rgba($white, 0.5);
+$nav-tabs-link-active-color: $purple;
+$input-bg: $gray-600;
+$input-color: $white;
+$input-disabled-bg: $gray-800;
+$input-border-color: $gray-800;
+$mark-bg: $gray-600;
+$pre-color: $gray-200;

src/assets/css/themes/_variables.vaporwave-light.scss

@@ -0,0 +1,13 @@
+@import "./variables.vaporwave";
+
+// Colors
+$gray-600: #6c757d;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+
+$light: darken($gray-300, 1.5);
+
+$body-bg: $gray-100;
+$body-color: $gray-700;
+$text-muted: $gray-500;

src/assets/css/themes/_variables.vaporwave.scss

@@ -0,0 +1,32 @@
+@import "./variables";
+
+// Colors
+$gray-100: #f8f9fa;
+$gray-300: #dee2e6;
+$gray-500: #adb5bd;
+
+$blue: #01cdfe;
+$indigo: #b967ff;
+$purple: #b967ff;
+$pink: rgb(255, 64, 186);
+$red: rgb(255, 95, 110);
+$orange: rgb(255, 167, 93);
+$yellow: #fffb96;
+$green: #05ffa1;
+$teal: #01cdfe;
+$cyan: #01cdfe;
+
+$primary: $pink;
+$secondary: $blue;
+
+$enable-shadows: true;
+$enable-gradients: true;
+$enable-responsive-font-sizes: true;
+
+$border-radius: 1rem;
+$border-radius-lg: 1rem;
+$font-family-monospace: Arial, "Noto Sans", sans-serif;
+$yiq-text-light: $gray-300;
+$text-muted: $gray-500;
+$navbar-light-hover-color: rgba($primary, 0.7);
+$font-family-sans-serif: "Lucida Console", Monaco, monospace;

src/assets/css/themes/vaporwave-dark.scss

@@ -0,0 +1,32 @@
+@import "variables.vaporwave-dark";
+@import "../../../../node_modules/bootstrap/scss/bootstrap";
+
+.shadow-sm {
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.15),
+    rgba(255, 255, 255, 0)
+  );
+}
+
+.navbar {
+  background: none;
+}
+
+.dropdown-item:hover,
+option:disabled {
+  color: $secondary;
+}
+
+.btn-sm {
+  margin: 0.25rem;
+}
+
+.form-control::placeholder {
+  text-shadow: 0.5px 0.5px 0 $secondary, 0.5px -0.5px 0 $secondary,
+    -0.5px 0.5px 0 $secondary, -0.5px -0.5px 0 $secondary;
+}
+
+.input-group-text {
+  background: $gray-500;
+}

src/assets/css/themes/vaporwave-light.scss

@@ -0,0 +1,10 @@
+@import "variables.vaporwave-light";
+@import "../../../../node_modules/bootstrap/scss/bootstrap";
+
+.form-control::placeholder {
+  color: $gray-500;
+}
+
+.dropdown-item:hover:not(.active) {
+  background-color: $secondary;
+}

src/server/utils/build-themes-list.ts

@@ -12,6 +12,8 @@ const themes: ReadonlyArray<string> = [
   "litely",
   "litely-red",
   "litely-compact",
+  "vaporwave-dark",
+  "vaporwave-light",
   "i386",
 ];