From 603e5c96f11987112264b1c8da3479196d7e377a Mon Sep 17 00:00:00 2001
From: Roxie Gibson <me@roxxers.xyz>
Date: Fri, 28 Feb 2020 15:48:13 +0000
Subject: [PATCH] Base of a new dark theme based of dracula color scheme

---
 src/assets/js/main.js                     |  4 +--
 src/assets/styles/components/_banner.scss |  2 +-
 src/assets/styles/libs/_drac.scss         | 13 ++++++++
 src/assets/styles/libs/_vars.scss         | 40 ++++++++++++-----------
 4 files changed, 37 insertions(+), 22 deletions(-)
 create mode 100644 src/assets/styles/libs/_drac.scss

diff --git a/src/assets/js/main.js b/src/assets/js/main.js
index 5df2f67..c4b236b 100644
--- a/src/assets/js/main.js
+++ b/src/assets/js/main.js
@@ -85,7 +85,7 @@
             }
           },
           color: {
-            value: "#f99081"
+            value: "#ff5555"
           },
           shape: {
             type: "circle",
@@ -125,7 +125,7 @@
           line_linked: {
             enable: true,
             distance: 250,
-            color: "#f99081",
+            color: "#ff5555",
             opacity: 0.8,
             width: 2
           },
diff --git a/src/assets/styles/components/_banner.scss b/src/assets/styles/components/_banner.scss
index c4fa00b..edb7d20 100644
--- a/src/assets/styles/components/_banner.scss
+++ b/src/assets/styles/components/_banner.scss
@@ -104,7 +104,7 @@ body.is-loading {
 .particle {
   position: relative;
   user-select: none;
-  background: _palette(accent3, bg);
+  background: _palette(bg);
 
   @include breakpoint(medium) {
     background: none;
diff --git a/src/assets/styles/libs/_drac.scss b/src/assets/styles/libs/_drac.scss
new file mode 100644
index 0000000..2e4bfee
--- /dev/null
+++ b/src/assets/styles/libs/_drac.scss
@@ -0,0 +1,13 @@
+$background: #282a36;
+$current-line: #44475a;
+$selection: #44475a;
+$foreground: #f8f8f2;
+$dark-foreground: mix($foreground, #000, 90%);
+$comment: #6272a4;
+$cyan: #8be9fd;
+$green: #50fa7b;
+$orange: #ffb86c;
+$pink: #ff79c6;
+$purple: #bd93f9;
+$red: #ff5555;	
+$yellow: #f1fa8c;
\ No newline at end of file
diff --git a/src/assets/styles/libs/_vars.scss b/src/assets/styles/libs/_vars.scss
index c29d45e..a00b6cf 100644
--- a/src/assets/styles/libs/_vars.scss
+++ b/src/assets/styles/libs/_vars.scss
@@ -1,3 +1,5 @@
+@import "drac";
+
 // Misc.
   $misc: (
     max-spotlights:   10,
@@ -31,20 +33,20 @@
 
 // Palette.
   $palette: (
-    bg:         #29335C,
-    fg:         #fff,
-    fg-bold:      #fff,
-    fg-light:     rgba(255,255,255,0.5),
-    border:       #fff,
+    bg:         $background,
+    fg:         $foreground,
+    fg-bold:      $foreground,
+    fg-light:     rgba($foreground, 0.5),
+    border:       $foreground,
     border-bg:      rgba(144,144,144,0.25),
-    border2:      #fff,
+    border2:      $foreground,
     border2-bg:     rgba(144,144,144,0.5),
 
     accent1: (
-      bg:       #F3A712,
+      bg:       $pink,
       fg-bold:    #ffffff,
-      fg:       mix(#F3A712, #ffffff, 25%),
-      fg-light:   mix(#F3A712, #ffffff, 40%),
+      fg:       mix($pink, #ffffff, 25%),
+      fg-light:   mix($pink, #ffffff, 40%),
       border:     rgba(0,0,0,0.125),
       border-bg:    rgba(255,255,255,0.075),
       border2:    rgba(0,0,0,0.25),
@@ -63,10 +65,10 @@
     ),
 
     accent3: (
-      bg:       #ed4933,
-      fg-bold:    #ffffff,
-      fg:       mix(#ed4933, #ffffff, 25%),
-      fg-light:   mix(#ed4933, #ffffff, 40%),
+      bg:       $red,
+      fg-bold:    $foreground,
+      fg:       #282a36,//mix($nord11, #ffffff, 25%),
+      fg-light:   #282a36,
       border:     rgba(0,0,0,0.125),
       border-bg:    rgba(255,255,255,0.075),
       border2:    rgba(0,0,0,0.25),
@@ -74,10 +76,10 @@
     ),
 
     accent4: (
-      bg:       #25558C,
-      fg-bold:    #ffffff,
-      fg:       mix(#25558C, #ffffff, 25%),
-      fg-light:   mix(#25558C, #ffffff, 40%),
+      bg:       mix(#44475a, #000, 50%),
+      fg-bold:    $foreground,
+      fg:       $dark-foreground,
+      fg-light:   $dark-foreground,
       border:     rgba(0,0,0,0.125),
       border-bg:    rgba(255,255,255,0.075),
       border2:    rgba(0,0,0,0.25),
@@ -87,8 +89,8 @@
     accent5: (
       bg:       #e2e2e2,
       fg-bold:    #ffffff,
-      fg:       mix(#F3A712, #ffffff, 25%),
-      fg-light:   mix(#F3A712, #ffffff, 40%),
+      fg:       mix($pink, #ffffff, 25%),
+      fg-light:   mix($pink, #ffffff, 40%),
       border:     rgba(0,0,0,0.125),
       border-bg:    rgba(255,255,255,0.075),
       border2:    rgba(0,0,0,0.25),