Skip to content
A dark theme for passionate developers
Branch: develop
Clone or download

README.md

icon

Universe theme

A dark theme for passionate developers. Made in planet earth 🌎

Version Installs Rating Licence

Universe

Universe purple

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

Search

Search

Notifications

Notifications

Settings

Settings

Syntax highlight

CSS

CSS

Elixir

Elixir

GraphQL

GraphQL

GraphQL

HTML

HTML

Javascript

Javascript

JSON

JSON

Markdown

Markdown

Pug

Pug

React

React

Typescript

Typescript

Vue

Vue

YAML

YAML

Color reference

User interface

Universe

Usage Color Hex color
editor background deep blue 5 #0E1729 #0E1729
editor foreground neutral 1 #D6D9E0 #D6D9E0

Universe Purple

Usage Color Hex color
editor background deep purple 5 #150E29 #150E29
editor foreground 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 Iosevka

Which icons do you recommend to use?

I love Monokai pro icons. You need to install the Monokai pro theme

What are the recommended editor settings?

"workbench.colorTheme": "Universe",
"workbench.iconTheme": "Monokai Pro Icons",
"editor.fontFamily": "Iosevka",
"editor.fontWeight": "500",
"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.

You can’t perform that action at this time.