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;