Skip to content

Commit d6e1f28

Browse files
committed
Use transparency for list backgrounds
1 parent 2d63978 commit d6e1f28

2 files changed

Lines changed: 8 additions & 6 deletions

File tree

docs/colours.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,15 @@ The Command Palette is a very important part of the program, and must communicat
3232

3333
The background of the Command Palette can be the same colour as that of a tab being hovered-over, for it is the perfect colour to distinguish it from the rest of the program while remaining visible, and is unlikely to appear at the same time as its usage.
3434

35-
The highlighted item, on the other hand, needs to be a bright colour, but not be too bright to make it look distracting. Starting with the background colour and moving towards white, a mix of 11:1 works well. When it is being highlighted by hovering, it is a 19:1 mix instead.
35+
The highlighted item, on the other hand, needs to be a bright colour, but not be too bright to make it look distracting. Starting with the background colour and moving towards white, a mix of 11:1 works well. When it is being highlighted by hovering, it is a 19:1 mix instead. This has been converted to a pure white alpha (`#16`) so it works for all lists, especially the Explorer view.
3636

37-
<!-- TODO: List colours are used in multiple places, not just the Command Palette. Change them to use white with different alphas. -->
3837
> - `quickInput.background`
39-
> - `list.hoverBackground`
4038
> - `list.activeSelectionBackground`
39+
40+
The above alpha is also used for the inactive selection, as it merely represents a selection that is not in focus, which is not a distinction that needs to be made when the focus border already does this. A hover alpha of `#0c` is slightly above half the alpha of the active selection, it looking better than `#0b` in the Explorer view.
41+
4142
> - `list.inactiveSelectionBackground`
43+
> - `list.hoverBackground`
4244
4345
#### Inputs
4446

themes/Oblique Dark Orange-color-theme.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
"titleBar.activeForeground": "#8ea5a5",
88
"icon.foreground": "#8ea5a5",
99
"quickInput.background": "#121e1e",
10-
"list.hoverBackground": "#1e2929",
11-
"list.activeSelectionBackground": "#263131",
12-
"list.inactiveSelectionBackground": "#263131",
10+
"list.activeSelectionBackground": "#ffffff16",
11+
"list.inactiveSelectionBackground": "#ffffff16",
12+
"list.hoverBackground": "#ffffff0c",
1313
"dropdown.background": "#121e1e",
1414
"input.background": "#121e1e",
1515
"dropdown.foreground": "#acc6c6",

0 commit comments

Comments
 (0)