Skip to content

MatiasOlivera/universe-theme

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

icon

Universe theme

A dark theme designed with consistent syntax highlighting, accessible text contrast and distract-free user interface that let you focus on the code.

Version Installs Rating Licence

Universe

Universe Purple

Universe Gray

Universe includes normal and italic variants.

Download


This theme was crafted with the accessibility in mind, for all and especially those with visual impairment. It achieves the accessibility standards outlined in the WCAG 2.0, specifically the ones related to the text contrast ratio.

Why is it important to me? Well, you probably read source code during long periods of time and you should not force yourself to read some text with poor contrast. Even if you don't have visual impairments, there are other factors that could affect the text readability, like direct sunlight, dark rooms, etc. so it will help you anyway.

If you want to learn more, check this guide


πŸš€ Installation

  1. Open Extensions sidebar panel in VS Code. View β†’ Extensions
  2. Search for Universe theme published by MatiasOlivera
  3. Click Install to install it.
  4. Select Universe in the quick picker (or click on Set color theme)
  5. Happy coding!

β˜„οΈ Support

Description Extensions Support
Config files .ini, .editorconfig βœ…
CSS .css βœ…
Elixir .ex, .exs βœ…
GraphQL .gql, .graphql βœ…
HTML .html βœ…
Javascript .js βœ…
JSON .json βœ…
Markdown .md βœ…
Pug .pug βœ…
React (JSX) .jsx βœ…
Typescript .ts βœ…
Vue .vue βœ…
YAML .yml βœ…

If you want support for another language / library / framework, please open an issue and let me know

🌠 Screenshots

UI

Folder

Folder

Settings

Settings

Syntax highlight

HTML

HTML

CSS

CSS

Javascript

Javascript

React

React

✨ Color reference

User interface

Usage Universe Universe Purple
editor background deep blue 5 - #0E1729 #0E1729 deep purple 5 - #150E29 #150E29
editor foreground neutral 1 - #D6D9E0 #D6D9E0 neutral 1 - #D8D5DF #D8D5DF

Syntax hightlight

The colors used for the syntax highlighting are from Material Design.

Data types

Usage Color Hex color
number orange 4 #F2B09A #F2B09A
string green 4 #BBD99E #BBD99E
constant (boolean, null) teal 4 #89D9D2 #89D9D2
character blue 4 #9AC6F2 #9AC6F2
escape character purple 4 #C1A2FF #C1A2FF
custom type (interface, class) cyan 4 #92D8E6 #92D8E6
other type teal 4 #89D9D2 #89D9D2

Keywords

Usage Color Hex color
keyword purple 4 #CCB3FF #CCB3FF

Variables, functions & classes

Usage Color Hex color
variable pink 4 #FFBAD1 #FFBAD1
object property green 4 #BBD99E #BBD99E
function name blue 4 #9AC6F2 #9AC6F2
class name yellow 4 #E6D791 #E6D791

Invalid

Usage Color Hex color
deprecated red 4 #FFA2A2 #FFA2A2
illegal red 4 #FFA2A2 #FFA2A2

Other

Usage Color Hex color
module name blue 4 #9AC6F2 #9AC6F2
text neutral 0 #F2F2F2 #F2F2F2
comment neutral 5 #758096 #758096

🌌 FAQ

Frequently Asked Questions.

Which font is used in the preview image?

It's Operator Mono.

Which icons do you recommend to use?

I love Quill icons.

What are the recommended editor settings?

"workbench.colorTheme": "Universe Purple",
"workbench.iconTheme": "quill-icons",
"editor.fontFamily": "Operator Mono",
"window.titleBarStyle": "custom",
"editor.scrollBeyondLastLine": false,

What are the recommended settings to use with Bracket Pair Colorizer?

"bracket-pair-colorizer-2.colors": ["#C1A2FF", "#FFBAD1", "#92D8E6"],
"bracket-pair-colorizer-2.forceUniqueOpeningColor": false,
"bracket-pair-colorizer-2.forceIterationColorCycle": false,
"bracket-pair-colorizer-2.highlightActiveScope": true,
"editor.matchBrackets": false,
"bracket-pair-colorizer-2.activeScopeCSS": ["opacity: 0"],
"bracket-pair-colorizer-2.showBracketsInGutter": false,
"bracket-pair-colorizer-2.showBracketsInRuler": false,
"bracket-pair-colorizer-2.showVerticalScopeLine": true,
"bracket-pair-colorizer-2.showHorizontalScopeLine": false,
"bracket-pair-colorizer-2.scopeLineCSS": [
  "borderStyle : solid",
  "borderWidth : 2px",
  "borderColor : {color}",
  "opacity: 0.5"
],

Bracket Pair Colorizer 2 is an extension that hightlight matching brackets

πŸ‘©β€πŸš€ Contributing

With feedback

Please open an issue in this repository. Or you just can talk to me on Twitter: @_matiasolivera

With code

  • Fork the repository
  • Open the repo in VS Code
  • Run the command npm install to install the dev dependencies
  • Press F5 to open a new window with this theme loaded.
  • Open File > Preferences > Color Themes and pick Universe.
  • Open a file that has a language associated. The languages' configured grammar will tokenize the text and assign 'scopes' to the tokens. To examine these scopes, invoke the Inspect TM Scopes command from the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on Mac).
  • Add the token and his color to an existing or new Typescript file
  • Run npm run ts:watch to compile the Typescript files
  • Run npm run node:watch to launch a watcher and generate the JSON theme definition on every change

Changes to the theme file are automatically applied to the Extension Development Host window.