How to use the VSCode theme generator

Color Theory, Color Schemes and Sacred Geometry Patterns

I've always been fascinated by Sacred Geometry and its patterns, the way it was used in several ancient structures and moreover how Sacred Geometry can be applied to almost everywhere around us, in nature, in the human body, in music, in the stock market, etc.

How every time some Sacred Geometry Pattern is used or identified on something, it pleasures the eyes and the mind.

Color themes for VSCode is all about using colors to highlight the code in both informative and pleasing way so us developers can easly identify and understand the code we are reading or working on while also pleasing the eyes and the mind.

By looking at how the Color Theory traditional color schemes are calculated using a base color and depending on the color scheme it shows one, two or more mathing colors using its pattern on top of the color whell i though, what if there was a way to use some Sacred Geometry patterns in top of the color whell to identify and derive matching colors?

After some research and a lot of testing, I've identified some Sacred Geometry Patterns that can be used as color schemes if combined with color theory. In the same traditional way, with a base color, or in the case of this algorithm a base hue, using a Sacred Geometry pattern on top of the color whell it is possible to derive a set of matching colors. The number of matching colors generated depends on the pattern used.

I've identified more than 30 different Sacred Geometry Patterns and implemented most of them in his VSCode theme generator. The results, at least for me, are surprisingly good most of the times. The colors generated combining the base hues extracted from each pattern with some small random variations using some pre-determinated saturation and lightness values, added/subtracted or multiplied by some small random numbers or fractions are usually very pleasing to the eye while enabling almost infinite colors combinations.

I encourage you to try it out and see the results for yourself, by selecting each of the available Sacred Geometry Patterns and generating the color sets a few times using the Generate button until you find some that pleases your eyes. In case you want to have a more guided approach, there is a small resume of what to expect from each of the available patterns.

How to generate a theme

• 1. Go to the create a theme page.

• 2. Select if the theme will be dark or light by adjusting the Switch control.

• 3. Then you have two options:

• 3.1. Randomize a new theme by selecting the button Randomize or pressing Crtl + r - all available options will be randomized and the colors will be generated accordingly to the randomized options.

• 3.2. Manually select the desired options and Generate the theme

  • a. After setting the dark or light switch, select one of the available color schemes. There are the color schemes from the conventional color theory and the innovative, created by RLabs Inc., color schemes based on Sacred Geometry Patterns.

  • b. After selecting the color scheme, you can ajust the base hue slider to select the base color for the to be generated theme, this color will be used as AC1 (Accent 1) color and will be the input for the calculations of the other base hues generated by the selected color scheme.

  • d. You can now click the Generate button or press Crtl + g to generate the theme.

In both cases, pressing the Generate button or the Crtl + g shortcut will re-generate new colors based on the current selected options.

Use fewer colors

For both Randomize and Generate options, you can select the use fewer colors option.

When the colors are generated, first, the algorithm generates a set of scheme hues that are derived from the selected color scheme and base hue. Using these set of scheme hues the ui colors are generated, among the ui colors there are the AC1 and AC2 colors, if this option is not selected, the algorithm then generates two additional sets of scheme hues using the selected color scheme but this time in combination with both the AC1 and AC2 recently generated colors, the new sets are added to the initial set of scheme hues and only then the set of syntax colors is generated derived of this larger set of scheme hues.

With this option selected, all colors are derived from the initial set of scheme hues generated using only the selected color scheme and base hue. The result is less variation in the generated colors.

Individually changing colors

You can also individually change the colors by clicking on the color you want to change, a color picker with the color of the selected item will be displayed, you can change it to any color of your preference. The result will be displayed immediately.

Locking one or more colors

During the whole process, at any time, you can click the locker icon displayed next to each color, by doing so, the color will be locked and won't be randomized when using both the Randomize and Generate options to generate a new set of colors.

TIP: You can, for example, lock the BG1 (Background color for the editor) and then Randomize or Generate all the remaining colors for your theme with the selected background color.

Saving a theme

When logged in, once you're happy with the generated theme, you can give it a name and click the Save button to save the theme to your collection. Each theme in your collection must have an unique name.

Once saved, you can continue to fine-tune the theme colors, re-generate the colors with the same options or select new options and generate the all unlocked colors again.

At anytime you can click on the update button to save any changes you want to keep.

Loading a theme

You can load any theme to edit by clicking the Edit button on the Saved Themes page or by selecting the theme name from the list on the create theme page.

If you have a recently saved or loaded a theme in the generator page, by clicking the Generate button new colors will be generated for the active theme with the current selected options allowing you to update it. The Randomize button, will be unload the current theme, all options will be randomized and the colors will be generated allowing you to save a new theme.

Deleting a theme

You can delete a theme by clicking the Delete button on your saved themes page.

Public and private themes

You can set the theme as public by checking the Public Theme checkbox.

A public theme will be displayed in the Discover page and in your saved themes page, a private theme will only be displayed in the later one.

How install a theme in VSCode

Download the theme from the Discover or Saved themes page. It will be a .vsix file.

Open VSCode and press Ctrl+Shift+P or Cmd+Shift+P to open the Command Palette.

Type Extensions: Install from VSIX and press Enter.

Select the .vsix file you downloaded and press Enter.

Go to Settings -> Themes -> Color Theme or press Crtl/Cmd + k + t and select the newly installed theme.

or

Go to the extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or by pressing Ctrl/Cmd+Shift+X.

Select the theme in the list of installed extensions.

Set the theme as the active theme by clicking on the Set Color Theme button.

Variables used in the theme generator

The theme is generated using the following variables:

UI Colors

• BG1 - Background color for the editor, terminal, primary sidebar, inactive tabs, inputs, combo boxes, etc.

• BG2 - Background color for the activities bar, topbar, active file tab, breadcrumbs, panel header (that contains the tabs), etc.

• BG3 - Background color for the editor group, editor group header.

• FG1 - Foreground color for the editor, source code, strings, terminal, active tab, active actions sidebar button, active panel tab, icon buttons, inputs, combo boxes, etc.

• FG2 - Foreground color for the side bar, side bar section header, side bar activity bar top, side bar sticky scroll, minimap, editor group, editor group border, editor group drop background, editor group empty background, etc.

• FG3 - Contrast foreground color for the elements that uses colors oposed to the theme type (dark or light). For example, color used in the status bar foreground if the theme is dark and the generated color used in the status bar background if the theme is light and vice versa. Or the foreground color used in the buttons if the theme is dark and the generated color used in the buttons background if the theme is light and vice versa. It is a support foreground color to maintain contrast in elements with colors different than the background color.

• AC1 - Accent 1 color, used, for the active tab, selected button in the actions sidebar, terminal panel and active input borders, and as background for the secondary buttons, as foreground to the active line number and cursor color in the editor. If left unmodified it have the same hue as the selected base hue for the theme, also, its hue was used to generate the colors for functions and function calls in the syntax higlighting section. This color is also used to generate a new set of base hues using the selected color scheme to increase the color variations when generating the syntax colors when the use fewer colors option is not selected.

• AC2 - Accent 2 color, this color is used as background for the status bar, badges and buttons as foreground to links in text. Initially, it's hue was used to generate the colors for storage keywords in the syntax highlighting color set. It is also used, with an alpha factor, to highlight the selected file and the hovered files in the sidebar and items in combo boxes. This color is also used to generate a new set of base hues using the selected color scheme to increase the color variations when generating the syntax colors when the use fewer colors option is not selected.

• BORDER - Border color for the used borders in the theme.

• INFO - This color is used as foreground for info messages, links, as inserted line indicator in the diff editor and editor gutter.

• WARNING - This color is used as foreground for warning messages, as warning icon in the notification center and as warning border in the diff editor.

• ERROR - This color is used as foreground for error messages, as error icon in the notification center and as removed border in the diff editor, for the underline of errors in the editor and to indicate deleted lines in the diff editor, editor gutter, etc.

• SUCCESS - This color is used as foreground for success messages, as success icon in the notification center and as inserted border in the diff editor, inserted lines in the editor gutter, etc.

• Line Highlight - This color is used as background multi-cursor line highlight, folded lines, white-spaces, indent-guide.

• Selection - This color is used as background for the selected text in the editor, terminal, etc.

• Find Match - This color is used as background for the current search match.

Syntax Colors

• Comment - This color is used as foreground for comments and as foreground for all inactive elements in the UI.

• Keyword - This color is used as foreground for generic keywords.

• Storage - This color is used as foreground for storage keywords such as let, const, var, etc.

• Other - This color is used as foreground for other syntax elements such as .

• Language - This color is used as foreground for language specific syntax elements such as laguage specific constants like true, false, null, etc.

• Operator - This color is used as foreground for operators such as +, -, *, /, =, etc.

• Control - This color is used as foreground for control keywords such as .

• Control flow - This color is used as foreground for control flow keywords such as return, throw, break, continue, if, else, for, while, etc.

• Control import - This color is used as foreground for control import keywords such as import, from, export, etc.

• Support - This color is used as foreground for library and language support generic keywords.

• Support function - This color is used as foreground for library and language support functions such as map, filter, reduce, etc.

• Support method - This color is used as foreground for library and language support methods such as toString, slice, forEach, etc.

• Support variable - This color is used as foreground for library and language support variables such as event, this, console etc.

• Support property - This color is used as foreground for library and language support properties such as length, prototype, etc.

• Function - This color is used as foreground for function names.

• Function call - This color is used as foreground for function calls.

• Methods - This color is used as foreground for methods.

• Method call - This color is used as foreground for method calls.

• Selector - This color is used as foreground for selectors such as :hover, :active, :focus, etc.

• Parameter - This color is used as foreground for parameters.

• Variable - This color is used as foreground for variables.

• Variable read-only - This color is used as foreground for read-only variables.

• Variable declaration - This color is used as foreground for variable declarations.

• Variable property - This color is used as foreground for variable properties.

• Property - This color is used as foreground for properties.

• Property declaration - This color is used as foreground for property declarations.

• Class - This color is used as foreground for class names.

• Types - This color is used as foreground for types.

• Type parameter - This color is used as foreground for type parameters.

• Tag - This color is used as foreground for tags.

• Attribute - This color is used as foreground for attributes.

• Constant - This color is used as foreground for constants such as numbers, etc.

• Unit - This color is used as foreground for units indicators such as px, %, em, etc.

• Datetime - This color is used as foreground for datetime such as now, today, etc.

• Punctuation - This color is used as foreground for general punctuation.

• Tag punctuation - This color is used as foreground for tag punctuation such as <, >, etc.

• Punctuation quote - This color is used as foreground for punctuation quotes such as ", ', etc.

• Punctuation brace - This color is used as foreground for punctuation braces such as [ ], (), etc.

• Punctuation separator - This color is used as foreground for punctuation separators such as ,, ;, etc.