assets/scss/colors/variables.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

// Light mode palette
$light-background:        #ddd;
$light-foreground:        #444;

$light-alt-background:    #d6d6d6;
$light-alt-foreground:    #333;
  
$light-details:           #fdfdfd;
$light-error-color:       #c70000;

$light-bg-modifier:       rgba(0,0,0,.3);

$light-input-background:  #fefefe;
$light-input-foreground:  #111;
$light-input-border:      #ccc;

$light-letterpress:       rgba(0,0,0,.2);


// Dark mode palette
$dark-background:         #1f1f1f;
$dark-foreground:         #bbb;
  
$dark-alt-background:     #1c1c1c;
$dark-alt-foreground:     #ddd;
  
$dark-details:            #1a1a1a;
$dark-error-color:        #ff3131;

$dark-bg-modifier:        rgba(255,255,255,.3);

$dark-input-background:   #222;
$dark-input-foreground:   #f0f0f0;
$dark-input-border:       #262626;

$dark-letterpress:        rgba(255,255,255,.2);


// Lazy way to deter images that can be too bright
$img-filter:
  contrast(.85)
  grayscale(.3);


// General purpose
$box-border:    #222;
$error-color:   red;
$selected-fg:   #f0f0f0;