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: {
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
},

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

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

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