You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+5-1Lines changed: 5 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,7 +19,11 @@
19
19
20
20
## Contributing
21
21
22
-
To start contributing, fork this repository, then use the included debug launch script to see your changes in real-time. Use a [colour mixer](https://colordesigner.io/color-mixer) to experiment with colours and shades.
22
+
To start contributing, fork this repository, then use the following debug scripts:
23
+
24
+
- Run **New Window with VSCode Theme** to open a new window that responds to generated theme file changes in real-time.
25
+
26
+
Use a [colour mixer](https://colordesigner.io/color-mixer) to experiment with colours and shades.
23
27
24
28
Pull requests are welcome. Please provide a description and screenshots of your changes.
Copy file name to clipboardExpand all lines: docs/colours.md
+33-20Lines changed: 33 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -32,9 +32,13 @@ The Command Palette is a very important part of the program, and must communicat
32
32
33
33
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.
34
34
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.
35
+
The title background can be the same colour, as the different vertical position of the input is evidence enough that the interaction style of the Command Palette has changed.
36
36
37
37
> -`quickInput.background`
38
+
> -`quickInputTitle.background`
39
+
40
+
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.
41
+
38
42
> -`list.activeSelectionBackground`
39
43
40
44
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.
@@ -46,15 +50,11 @@ The above alpha is also used for the inactive selection, as it merely represents
46
50
47
51
##### Backgrounds
48
52
49
-
The background colour of inputs looks good as the Command Palette background colour, for it stands out just enough in the sidebar, and fully blends in inside the Command Palette.
53
+
The background colour of inputs does not work as that of the Command Palette, for the inputs would blend in too much within the editor area, and disappear completely if they appeared in the Command Palette itself (e.g. tool checkboxes). Rather than using a 3:2 mix of the editor area colour and the active tab colour, these use a 1:2 mix, ensuring that they stand out without looking polarising.
50
54
55
+
> -`checkbox.background`
51
56
> -`dropdown.background`
52
57
> -`input.background`
53
-
54
-
###### Settings
55
-
56
-
The above background colours do not work well in the Settings view, as they blend in too much with the editor area. Rather than using a 3:2 mix of the editor area colour and the active tab colour, these use a 1:2 mix, ensuring that they stand out without looking polarising.
57
-
58
58
> -`settings.checkboxBackground`
59
59
> -`settings.dropdownBackground`
60
60
> -`settings.numberInputBackground`
@@ -108,13 +108,6 @@ The notifications center counts as such a widget. Having its header be the same
108
108
109
109
> -`notificationCenterHeader.background`
110
110
111
-
#### Checkboxes
112
-
113
-
Checkboxes appear when using GitHub Copilot and selecting what tools should be available to the AI model. They do not look good when dark, because they clash too much with the highlight colour in the Command Palette, nor should they be too bright, otherwise they would simply be distracting. Instead, they need to be a mixture of the Command Palette background colour and the highlight colour, so they look good when alternating between the two states. A mix of 5:3 works well.
114
-
115
-
<!-- TODO: Add dark border colour for maximum visibility -->
116
-
> -`checkbox.background`
117
-
118
111
#### Shadows
119
112
120
113
For widgets with shadows (e.g. Find and Replace), a very specific black alpha was chosen, `#6d`. This is just dark enough to make the widget distinguishable from the editor area and all text found within it, but not so dark that it becomes distracting. The same is true for the top of the editor area when the view is scrolled.
@@ -516,28 +509,39 @@ Because the debug view in the sidebar represents actual programmatic concepts, t
516
509
517
510
As with the debug view, the icons in the Outline also make use of the semantic colours in this theme.
518
511
519
-
<!-- TODO: Add remaining Outline symbols, determine if use of constant variable colour is correct -->
520
512
-*Boolean*/*Null*/*Number*: The value colour
521
-
-*Class*: The class colour
522
-
-*Constant*: The constant variable colour (for variety)
513
+
-*Class*/*Enum*/*Interface*/*Struct*: The class colour
514
+
-*Constant*/*Enum Member*: The constant variable colour (for variety)
523
515
-*Constructor*/*Function*/*Method*: The function colour
524
-
-*Field*/*Property*/*Variable*: The variable colour
525
-
-*Module*: The control flow colour
526
-
-*String*: The string colour
516
+
-*Event*/*Field*/*Key*/*Property*/*Variable*: The variable colour
517
+
-*Array*/*Module*/*Namespace*/*Object*/*Operator*/*Package*: The control flow colour
518
+
-*File*/*String*: The string colour
527
519
-*Type Parameter*: The type colour
528
520
521
+
> -`symbolIcon.arrayForeground`
529
522
> -`symbolIcon.booleanForeground`
530
523
> -`symbolIcon.constantForeground`
531
524
> -`symbolIcon.classForeground`
532
525
> -`symbolIcon.constructorForeground`
526
+
> -`symbolIcon.enumeratorForeground`
527
+
> -`symbolIcon.enumeratorMemberForeground`
528
+
> -`symbolIcon.eventForeground`
533
529
> -`symbolIcon.fieldForeground`
530
+
> -`symbolIcon.fileForeground`
534
531
> -`symbolIcon.functionForeground`
532
+
> -`symbolIcon.interfaceForeground`
533
+
> -`symbolIcon.keyForeground`
534
+
> -`symbolIcon.objectForeground`
535
+
> -`symbolIcon.operatorForeground`
535
536
> -`symbolIcon.methodForeground`
536
537
> -`symbolIcon.moduleForeground`
538
+
> -`symbolIcon.namespaceForeground`
537
539
> -`symbolIcon.nullForeground`
538
540
> -`symbolIcon.numberForeground`
541
+
> -`symbolIcon.packageForeground`
539
542
> -`symbolIcon.propertyForeground`
540
543
> -`symbolIcon.stringForeground`
544
+
> -`symbolIcon.structForeground`
541
545
> -`symbolIcon.typeParameterForeground`
542
546
> -`symbolIcon.variableForeground`
543
547
@@ -712,6 +716,8 @@ The constant variable name colour is a 29:18 mix between variable and constant v
712
716
> -`source.css`
713
717
> -**Ignore**
714
718
> -`source.ignore`
719
+
> -**Jinja**
720
+
> -`source.jinja`
715
721
> -**Properties**
716
722
> -`source.ini`
717
723
@@ -723,6 +729,8 @@ The constant variable name colour is a 29:18 mix between variable and constant v
723
729
> -`constant.other.ellipsis`
724
730
> -**CSS**
725
731
> -`constant.other.color`
732
+
> -**Jinja**
733
+
> -`meta.scope.jinja.variable`
726
734
> -**Markdown**
727
735
> -`markup.italic`
728
736
> -`punctuation.definition.italic`
@@ -793,6 +801,7 @@ The constant variable name colour is a 29:18 mix between variable and constant v
793
801
> -**C#**
794
802
> -`punctuation.curlybrace`
795
803
> -`punctuation.squarebracket`
804
+
> -`punctuation.definition.interpolation`
796
805
> -**Elm**
797
806
> -`keyword.type.elm`
798
807
> -`punctuation.bracket`
@@ -806,6 +815,8 @@ The constant variable name colour is a 29:18 mix between variable and constant v
806
815
> -`punctuation.definition.binding-pattern`
807
816
> -`punctuation.definition.template-expression`
808
817
> -`punctuation.terminator`
818
+
> -**Jinja**
819
+
> -`meta.scope.jinja.tag`
809
820
> -**Lua**
810
821
> -`source.lua`
811
822
> -**Properties**
@@ -865,3 +876,5 @@ One downside of this approach is that for old languages (such as Java) that have
0 commit comments