style: updated theme colors for notifications
mellbacon committed
May 21, 2024 at 14:12 UTC
75d29c42c39f93d2f0b4cd66da52f5ca44d94bb0
6 files changed
+50
-24
src/config/extensions/default_themes/themes/default_dark.json
+9
-1
@@ -6,6 +6,7 @@
6
"window.background": "#171717",
7
"window.borderColor": "#414040",
8
"window.accent": "#376ba3",
9
+ "window.panelBorderColor": "#34b0f8",
10
11
"window.menuBackground": "#2D2D2D",
12
"window.menuButtonBackground": "#2D2D2D",
@@ -129,6 +130,13 @@
130
"terminal.brightBlue": "#7aa2f7",
131
"terminal.brightMagenta": "#bb9af7",
132
"terminal.brightCyan": "#7dcfff",
132
- "terminal.brightWhite": "#acb0d0"
133
+ "terminal.brightWhite": "#acb0d0",
134
+
135
+ "notification.background": "#1f1f1f",
136
+ "notification.foreground": "#fff",
137
+ "notification.defaultBorderColor": "#4589ff",
138
+ "notification.unreadColor": "#838383",
139
+ "notification.unreadBorderColor": "#333",
140
+ "notification.actionButtonColor": "#bdd4ff"
141
}
142
}
src/config/extensions/default_themes/themes/default_light.json
+9
-1
@@ -6,6 +6,7 @@
6
"window.background": "#FAFAFA",
7
"window.borderColor": "#DDDDDD",
8
"window.accent": "#0079AD",
9
+ "window.panelBorderColor": "#34b0f8",
10
11
"window.menuBackground": "#E9E9E9",
12
"window.menuButtonBackground": "#E9E9E9",
@@ -128,6 +129,13 @@
129
"terminal.brightBlue": "#34548a",
130
"terminal.brightMagenta": "#5a4a78",
131
"terminal.brightCyan": "#0f4b6e",
131
- "terminal.brightWhite": "#828594"
132
+ "terminal.brightWhite": "#828594",
133
+
134
+ "notification.background": "#f7f7f7",
135
+ "notification.foreground": "#000",
136
+ "notification.defaultBorderColor": "#4589ff",
137
+ "notification.unreadColor": "#838383",
138
+ "notification.unreadBorderColor": "#333",
139
+ "notification.actionButtonColor": "#3161bb"
140
}
141
}
src/global.css
-1
@@ -86,7 +86,6 @@ ul {
86
left: 0;
87
top: 0;
88
transition: opacity 0.2s;
89
- background-color: #34b0f8;
89
opacity: 0;
90
z-index: 1;
91
}
src/lib/Notifications/Notification.svelte
-14
@@ -54,7 +54,6 @@
54
$notification-border-width: 1px;
55
$error-color: #c02b2b;
56
$warning-color: #ffeb10;
57
- $default-color: #4589ff;
57
.info {
58
color: #6d6d6d;
59
font-weight: 200;
@@ -77,10 +76,8 @@
76
.notification {
77
display: flex;
78
min-height: $notification-height;
80
- background-color: #1f1f1f;
79
margin-bottom: 0.8rem;
80
position: relative;
83
- border-top: 3px solid $default-color;
81
flex-direction: column;
82
justify-content: center;
83
&.warning {
@@ -96,20 +93,12 @@
93
}
94
}
95
&.read {
99
- border-top-color: #333;
100
- color: #838383;
101
- .icon {
102
- background-color: #333 !important;
103
- }
96
.action-button {
97
color: #bdd4ff75 !important;
98
}
99
:global(.bx--toast-notification__close-button .bx--toast-notification__close-icon) {
100
fill: #bdd4ff75 !important;
101
}
110
- .message {
111
- color: #333;
112
- }
102
}
103
&::before {
104
position: absolute;
@@ -118,7 +107,6 @@
107
border-width: 0 $notification-border-width $notification-border-width $notification-border-width;
108
border-style: solid;
109
box-sizing: border-box;
121
- border-color: #333;
110
content: "";
111
}
112
.notification-info {
@@ -134,7 +122,6 @@
122
align-items: center;
123
.icon {
124
border-radius: 50%;
137
- background-color: $default-color;
125
min-width: 20px;
126
min-height: 20px;
127
margin-right: 10px;
@@ -159,7 +146,6 @@
146
display: flex;
147
justify-content: center;
148
align-items: center;
162
- color: #BDD4FF;
149
cursor: pointer;
150
&:nth-child(2) {
151
margin: 0 0.6rem;
src/lib/Notifications/NotificationToast.svelte
-7
@@ -49,17 +49,13 @@
49
$notification-border-width: 1px;
50
$error-color: #c02b2b;
51
$warning-color: #ffeb10;
52
- $default-color: #4589ff;
52
.notification-toast {
53
display: flex;
54
min-height: $notification-height;
56
- background-color: #1f1f1f;
55
margin-bottom: 0.8rem;
56
position: relative;
59
- border-top: 3px solid $default-color;
57
flex-direction: column;
58
justify-content: center;
62
- box-shadow: 0 2px 6px #000000cc;
59
z-index: 10;
60
&.warning {
61
border-top: 3px solid $warning-color;
@@ -80,7 +76,6 @@
76
border-width: 0 $notification-border-width $notification-border-width $notification-border-width;
77
border-style: solid;
78
box-sizing: border-box;
83
- border-color: #333;
79
content: "";
80
}
81
.notification-info {
@@ -96,7 +91,6 @@
91
align-items: center;
92
.icon {
93
border-radius: 50%;
99
- background-color: $default-color;
94
min-width: 20px;
95
min-height: 20px;
96
margin-right: 10px;
@@ -121,7 +115,6 @@
115
display: flex;
116
justify-content: center;
117
align-items: center;
124
- color: #BDD4FF;
118
cursor: pointer;
119
&:nth-child(2) {
120
margin: 0 0.6rem;
src/theme.scss
+32
@@ -340,4 +340,36 @@ button:focus {
340
&:hover {
341
background-color: #1b83ddb5;
342
}
343
+}
344
+
345
+.notification, .notification-toast {
346
+ background-color: var(--notification-background);
347
+ border-top: 3px solid var(--notification-defaultBorderColor);
348
+ color: var(--notification-foreground);
349
+ &.read {
350
+ border-top-color: var(--notification-unreadBorderColor);
351
+ color: var(--notification-unreadColor);
352
+ .icon {
353
+ background-color: var(--notification-unreadBorderColor) !important;
354
+ }
355
+ .message {
356
+ color: var(--notification-unreadBorderColor);
357
+ }
358
+ }
359
+ .details .icon {
360
+ background-color: var(--notification-defaultBorderColor);
361
+ }
362
+ &::before {
363
+ border-color: var(--window-inputBackground);
364
+ }
365
+ .action-button {
366
+ color: var(--notification-actionButtonColor);
367
+ }
368
+}
369
+.notification-toast {
370
+ box-shadow: 0 2px 6px var(--window-boxShadow);
371
+}
372
+
373
+.editor-panes .splitpanes__splitter::before {
374
+ background-color: var(--window-panelBorderColor);
375
}
\ No newline at end of file