LilyPichu/_variables.scss at main · NYRI4/LilyPichu · GitHub

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
@use "lilypichu.scss";

// Remove decorations
@import url("https://nyri4.github.io/LilyPichu/stuff/overlay.css");

:root {
  // --- User variables ---

  // Jumping GIF
  --jumping-gif: url("https://i.imgur.com/dCd49s0.gif");

  // Background (if you want an image replace it by :

  // --background-tertiary-alt: url("image-link");
  --background-tertiary-alt: #ffc7d4;

  // Border-radius for the whole theme
  --border-radius: 20px;

  .colorDefault__0b482.focused__27621,
  .colorDefault__0b482:active:not(.hideInteraction__2790e) {
    background-color: var(--background-modifier-hover) !important;
  }

  // Buttons
  .lookFilled__19298 {
    background-color: #c5536c !important;
  }
  .lookFilled__19298:active,
  .lookFilled__19298:hover {
    background-color: #b64a61 !important;
  }
  .lookOutlined-3yKVGo:not(.colorWhite-1H92hK) {
    color: #c5536c;
    border-color: #c5536c;
  }

  // Hover background
  .colorDefault__0b482.focused__27621,
  .colorDefault__0b482:active:not(.hideInteraction__2790e) {
    color: var(--interactive-normal);
  }
}

.theme-dark {
  // Text
  --text-normal: #f8e1e5;
  --header-primary: #f8e1e5;
  --interactive-normal: #fab1bd;
  --channels-default: #f8e1e5;

  --text-muted: #e2c1c7;
  --interactive-muted: #ad8c91;

  --header-secondary: #e2c1c7;
  --interactive-hover: #e2c1c7;
  --interactive-active: #e2c1c7;

  // Background color
  --background-primary: #5e3640 !important;
  --background-secondary: #49292f;
  --background-secondary-alt: #3b1d24;
  --background-tertiary: #220f14;
  --background-floating: #221115;
  --background-accent: #c5536c;
  --activity-card-background: var(--background-secondary-alt);
  --channeltextarea-background: var(--background-secondary);
  --modal-background: var(--background-primary);
  --background-modifier-hover: #5e36403b;
  --background-modifier-active: #5e364058;
  --background-modifier-selected: #5e364068;
  --toast-background: #5e3640 !important;
  --toast-header: #3b1d24 !important;
  --toast-contents: #49292f !important;
  --toast-border: #49292f !important;
  --input-background: var(--background-secondary);

  // Scrollbar
  --scrollbar-auto-thumb: var(--background-tertiary);
  --scrollbar-auto-track: var(--background-secondary-alt);
  --scrollbar-thin-thumb: var(--background-tertiary);
  --scrollbar-thin-track: transparent;

  // Other
  --channel-text-area-placeholder: var(--text-muted);
  --deprecated-quickswitcher-input-background: var(--background-primary);
  --brand-experiment: var(--background-accent);
  --channel-icon: var(--interactive-normal);
}

.theme-light {
  // Text
  --text-normal: #a86373;
  --header-primary: #a86373;
  --interactive-normal: #a86373;
  --channels-default: #a86373;

  --text-muted: #a86373;
  --interactive-muted: #cf92a0;

  --header-secondary: #cf92a0;
  --interactive-hover: #be7d8c;
  --interactive-active: #b36f7f;

  // Background color
  --background-primary: #ffffff;
  --background-secondary: #ffeeee;
  --background-secondary-alt: #fdc7c7;
  --background-tertiary: #ffbbbb;
  --background-floating: #ffbbbb;
  --background-accent: #c5536c;
  --channeltextarea-background: var(--background-secondary);
  --background-modifier-hover: rgba(56, 31, 31, 0.062);
  --background-modifier-active: rgba(19, 12, 12, 0.123);
  --background-modifier-selected: rgba(31, 21, 21, 0.11);

  // Scrollbar
  --scrollbar-auto-thumb: var(--background-tertiary);
  --scrollbar-auto-track: var(--background-secondary-alt);
  --scrollbar-thin-thumb: var(--background-tertiary);
  --scrollbar-thin-track: transparent;

  // Other
  --deprecated-quickswitcher-input-background: var(--background-primary);
}

#app-mount {
  // Fonts
  --font-primary: "Nunito";
  --font-display: "Nunito";
}