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),