autonomic-cooperative/autonomic.zone
Archived
5
0
Fork 0
Code Issues 15 Pull Requests 2 Releases Activity

Base of a new dark theme based of dracula color scheme

Browse Source
This commit is contained in:
Roxie Gibson 2020-02-28 15:48:13 +00:00 committed by georgeowell
parent 9f657c6b65
commit e9a4cb4c60
4 changed files with 37 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/js/main.js
View File

@ -85,7 +85,7 @@
} }
}, },
color: { color: {
value: "#f99081" value: "#ff5555"
}, },
shape: { shape: {
type: "circle", type: "circle",
@ -125,7 +125,7 @@
line_linked: { line_linked: {
enable: true, enable: true,
distance: 250, distance: 250,
color: "#f99081", color: "#ff5555",
opacity: 0.8, opacity: 0.8,
width: 2 width: 2
}, },

2
src/assets/styles/components/_banner.scss
View File

@ -104,7 +104,7 @@ body.is-loading {
.particle { .particle {
position: relative; position: relative;
user-select: none; user-select: none;
background: _palette(accent3, bg); background: _palette(bg);
@include breakpoint(medium) { @include breakpoint(medium) {
background: none; background: none;

13
src/assets/styles/libs/_drac.scss Normal file
View File

@ -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;

40
src/assets/styles/libs/_vars.scss
View File

@ -1,3 +1,5 @@
@import "drac";
// Misc. // Misc.
$misc: ( $misc: (
max-spotlights: 10, max-spotlights: 10,
@ -31,20 +33,20 @@
// Palette. // Palette.
$palette: ( $palette: (
bg: #29335C, bg: $background,
fg: #fff, fg: $foreground,
fg-bold: #fff, fg-bold: $foreground,
fg-light: rgba(255,255,255,0.5), fg-light: rgba($foreground, 0.5),
border: #fff, border: $foreground,
border-bg: rgba(144,144,144,0.25), border-bg: rgba(144,144,144,0.25),
border2: #fff, border2: $foreground,
border2-bg: rgba(144,144,144,0.5), border2-bg: rgba(144,144,144,0.5),
accent1: ( accent1: (
bg: #F3A712, bg: $pink,
fg-bold: #ffffff, fg-bold: #ffffff,
fg: mix(#F3A712, #ffffff, 25%), fg: mix($pink, #ffffff, 25%),
fg-light: mix(#F3A712, #ffffff, 40%), fg-light: mix($pink, #ffffff, 40%),
border: rgba(0,0,0,0.125), border: rgba(0,0,0,0.125),
border-bg: rgba(255,255,255,0.075), border-bg: rgba(255,255,255,0.075),
border2: rgba(0,0,0,0.25), border2: rgba(0,0,0,0.25),
@ -63,10 +65,10 @@
), ),
accent3: ( accent3: (
bg: #ed4933, bg: $red,
fg-bold: #ffffff, fg-bold: $foreground,
fg: mix(#ed4933, #ffffff, 25%), fg: #282a36,//mix($nord11, #ffffff, 25%),
fg-light: mix(#ed4933, #ffffff, 40%), fg-light: #282a36,
border: rgba(0,0,0,0.125), border: rgba(0,0,0,0.125),
border-bg: rgba(255,255,255,0.075), border-bg: rgba(255,255,255,0.075),
border2: rgba(0,0,0,0.25), border2: rgba(0,0,0,0.25),
@ -74,10 +76,10 @@
), ),
accent4: ( accent4: (
bg: #25558C, bg: mix(#44475a, #000, 50%),
fg-bold: #ffffff, fg-bold: $foreground,
fg: mix(#25558C, #ffffff, 25%), fg: $dark-foreground,
fg-light: mix(#25558C, #ffffff, 40%), fg-light: $dark-foreground,
border: rgba(0,0,0,0.125), border: rgba(0,0,0,0.125),
border-bg: rgba(255,255,255,0.075), border-bg: rgba(255,255,255,0.075),
border2: rgba(0,0,0,0.25), border2: rgba(0,0,0,0.25),
@ -87,8 +89,8 @@
accent5: ( accent5: (
bg: #e2e2e2, bg: #e2e2e2,
fg-bold: #ffffff, fg-bold: #ffffff,
fg: mix(#F3A712, #ffffff, 25%), fg: mix($pink, #ffffff, 25%),
fg-light: mix(#F3A712, #ffffff, 40%), fg-light: mix($pink, #ffffff, 40%),
border: rgba(0,0,0,0.125), border: rgba(0,0,0,0.125),
border-bg: rgba(255,255,255,0.075), border-bg: rgba(255,255,255,0.075),
border2: rgba(0,0,0,0.25), border2: rgba(0,0,0,0.25),