Skip to content

Oni (鬼) is a type of ogre youkai and Nebula Oni Theme has colors from outer space!

License

Notifications You must be signed in to change notification settings

psudo-dev/nebula-oni-theme

Repository files navigation

Nebula Oni Logo

Table of Contents

Description

Oni (鬼) is a type of ogre youkai and Nebula Oni Theme has colors from outer space!

This theme has a lot of different options for the main color, background, syntax options and more! You can customize everything and add your own flair through the extension's menu in VSCode's Settings!

(Syntax: Hourglass / Background: Grey)

Nebula Syntax - Hourglass - Typescript

(Syntax: Pegasus / Background: Purple)

Nebula Syntax - Pegasus - Typescript

(Syntax: Spirograph / Background: Dark Grey)

Nebula Syntax - Spirograph - Typescript

(Syntax: Cerberus / Background: Blue)

Nebula Syntax - Cerberus - Typescript

(Main Color: Bumblebee / Background: Grey)

Oni UI Menu

(Main Color: Peach / Background: Blue)

Oni UI Menu

(Main Color: Mint / Background: Purple)

Oni UI Menu

Nebula Oni Theme

This started as a simple Atom's One Dark Syntax customization by someone that had just finished his first programming course, had no idea how to change syntax colors and started tweaking the settings.json file and it got a bit out of hand and it became this:

A completely different theme with multiple UI options and a new Syntax that has nothing to do with the original project.

Spread Nebula Oni Theme across the Outer Space

If you liked this theme and you want to support it, you can do simple things like:

  • sharing this theme with friends and colleagues
  • rating it on Visual Studio Code Market Place
  • giving it a star on Github

There are several ways to help and support it!

Nebula Oni » Theme Options

For Oni UI there are six options for the Main Color and six different colors for Background, and you can combine the two in any way you prefer!

You also have options for italic, different colors for comments, selection highlight and more!

And it's all easily customizable through the Nebula Oni Menu!

(Main Color: Sakura / Background: Glacial Blue)

Nebula Oni Menu

Oni UI

There are a lot of small details and visual hints that can make your life a lot easier when interacting with an interface. So I've tried my best to combine them together and enhance the UX/UI of the Visual Studio Code.

I hope you like it and give it a try! For more info, check Oni UI's page

Main Colors

Oni UI Main Colors

Background Colors

Oni UI Background Colors

Nebula Syntax

There are four different color schemes for Nebula Syntax. Each one has a different feel because of some unique color combinations that are different from each other, some are common for all four and some just for each pair (Hourglass/Spirograph and Pegasus/Cerberus).

Examples

Hourglass (Javascript)

Nebula Syntax - Hourglass

Pegasus (JSON)

*Color Schemes for JSON are split into pairs (Hourglass/Spirograph and Pegasus/Cerberus)

Nebula Syntax - Pegasus

Spirograph (Markdown)

*Markdown is the same for all Color Schemes

Nebula Syntax - Spirograph

Cerberus (HTML)

Nebula Syntax - Cerberus

Syntax Brightness

VSCode's Menu

Nebula Oni Color Theme also has Dimmed Syntax Brightness option. It's for people that either prefer less contrast or an overall darker setting.

If you work at night or if you simply prefer dimmed syntax colors, select the Dimmed option. The Syntax Brightness is about 10% darker with this setting.

If you mix-and-match the Syntax Brightness with the Background Color, you've got 4 different contrast options.

Darker Background with Normal Syntax Brightness for high-contrast settings.

High-Contrast

Normal Background and Normal Syntax Brightness or Darker Background with Dimmed Syntax Brightness for a middle of the pack contrast level.

Grey Background - Normal Syntax Brightness

Dark Grey Background - Dimmed Syntax Brightness

And for low-contrast, just combine Dimmed Syntax Brightness with Normal Background Color.

Low-Contrast

Theme Features

Selection Highlight and Find Match Highlight

When you make a selection, the matching text will be highlighted in Violet, so it's easier to find other instances of the same word.

With Find Match, the matched word in focus will have a border that matches the Oni UI color and the other selections will be highlighted in Violet.

For those that might not be onboard with the Violet selection, there is a Clear, standard option, with something more neutral.

Ultra Violet

Ultra  Violet Highlight

Clear

Ultra  Violet Highlight

VSCode Native Bracket Pair Colorization

For now, first you need to enable the settings. Go to Settings > Editor > Bracket Pair Colorization.

Side Bar

Since now VSCode has its built-in Bracket Pair Colorization, I've basically used the same colors I've created for the extension but now it's here natively.

I made a different color combination for each pair of Color Schemes, that way you have similar colors matching less frequently.

( Hourglass / Spirograph )

Side Bar

( Pegasus / Cerberus )

Side Bar

Focus Border

It's a border that appears on mouse clicks and through keyboard navigation. If you don't need it, there is the option to disable it.

(Main Color: Aqua / Background: Purple)

Focus Border Example

Italic

Italic is basically used for classes, namespace, interface and special cases like this, self, super, etc. This theme uses Semantic Highlight because that was the only way to target function parameters.

For now you have less fine tuning with Semantic Highlight, but it helps you identify things much faster when coding, so I ended up dropping all the work I've done on textmate scope and started from scratch to make the theme compatible with Semantic Highlight.

Comments

There are 4 colors for comments, the standard grey, but also violet, magenta and forest, each of the colors have a lighter and a darker version, for a total of 8 options.

Comments Colors

Side Bar and Activity Bar

The background and foreground colors help you easily find which file is open, what is selected and what is in focus.

Hovering over the items will highlight the text with the same color as the Oni UI Main Color.

The selection in focus is a bright white text so it doesn't interfere with Git Decorations or Errors colors when using the file Explorer.

(Main Color: Lavender / Background: Dark Grey)

Side Bar

Command Palette

(Main Color: Sakura / Background: Glacial Blue)

Side Bar

Color Information

These colors are used across the mini map, editor gutter, notifications, git decorations and warnings so users can easily identify what's going on in a glimpse.

Oni UI - Info Colors

Tabs

The Tabs have different background colors, border and text so it's easier for you to identify which one is open or what is in focus.

(Main Color: Mint / Background: Dark Grey)

Tab

Panel and Terminal

I tried to select colors that are easy to read but it's still compatible with terminal customizations like ZSH shell.

For more information on how to customized it, check VSCode Customization's page.

Terminal

Extensions

I've customized extensions that are color-related, so if someone would like colors that match the Nebula Syntax colors, I'm sharing my settings for these Extensions.

Better Comments

Better Comments Customization

Better Comments Customization

Bracket Pair Colorizer and Indent Rainbow

( Hourglass / Spirograph )

Bracket Pair Colorizer Customization

( Pegasus / Cerberus )

Bracket Pair Colorizer Customization

VSCode Customization

If you want more information on how to customize your Oni UI and Nebula Syntax, I made this quick guide with the basics to customize the workbench and the syntax.

More Info

Release History

Issues and Suggestions

References and Links

Author

I'm just getting into programming. This project was supposed to be something very simple but it got bigger and bigger and instead of just a few days or weeks, it ended up taking months.

I've probably have one or two more themes I might publish - that once upon a time were just a single Color Theme - but I'm also considering creating Icons, who knows?

If you want to support this theme, would you consider:

And if you really liked this theme, would you consider buying me a coffee?

Thanks,

[ psudo.dev ]

License

About

Oni (鬼) is a type of ogre youkai and Nebula Oni Theme has colors from outer space!

Resources

License

Stars

Watchers

Forks

Packages

No packages published