Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/psudo-dev/nebula-oni-theme

Oni (鬼) is a type of ogre youkai and Nebula Oni Theme has colors from outer space!
https://github.com/psudo-dev/nebula-oni-theme

Last synced: 3 months ago
JSON representation

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

Awesome Lists containing this project

README 

          
![Nebula Oni Logo](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/_readme/nebula_oni_logo.png)



### Table of Contents



- [Nebula Oni Theme](#nebula-oni-theme)

- [Nebula Oni » Theme Options](#nebula-oni--theme-options)

- [Oni UI](#oni-ui)

- [Nebula Syntax](#nebula-syntax)

- [Syntax Brightness](#syntax-brightness)

- [Theme Features](#theme-features)

- [Extensions](#extensions)

- [VSCode Customization](#vscode-customization)

- [Release History](#release-history)

- [Issues and Suggestions](#issues-and-suggestions)

- [References and Links](#references-and-links)

- [Author](#author)

- [License](#license)



## 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**!



### psudoFont Liga Mono 



If by any chance you are also looking for a programming font that matches the theme, I have one for you!



It's a loooong story but just like this color theme I ended up creating my own font. It's based on both **Menlo/Meslo** and **IBM Plex Mono/Lilex**, and it's called **[psudoFont Liga Mono](https://github.com/psudo-dev/psudofont-liga-mono)**.



It started as a _Frankenstein_ font but then it became its own font family with its own identity. It supports _ligatures_ and it's free to use! Give it a try!



## Nebula Oni Theme examples 



_
 (Syntax: Hourglass / Background: Grey) 
_



![Nebula Syntax - Hourglass - Typescript](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/refs/heads/main/doc/_readme/example_1.png)



_
 (Syntax: Pegasus / Background: Purple) 
_



![Nebula Syntax - Pegasus - Typescript](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/refs/heads/main/doc/_readme/example_2.png)



_
 (Syntax: Spirograph / Background: Dark Grey) 
_



![Nebula Syntax - Spirograph - Typescript](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/refs/heads/main/doc/_readme/example_3.png)



_
 (Syntax: Cerberus / Background: Glacial Blue) 
_



![Nebula Syntax - Cerberus - Typescript](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/refs/heads/main/doc/_readme/example_4.png)



_
 (Main Color: Bumblebee / Background: Grey) 
_



![Oni UI Menu](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/oni-ui/win_1.png)



_
 (Main Color: Peach / Background: Blue) 
_



![Oni UI Menu](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/oni-ui/win_2.png)



_
 (Main Color: Mint / Background: Purple) 
_



![Oni UI Menu](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/oni-ui/win_3.png)



[
⬆
](#table-of-contents)



## Nebula Oni Theme



This started as a simple Atom's [One Dark Syntax](https://github.com/atom/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](https://marketplace.visualstudio.com/publishers/psudo-dev)

- giving it a **star** on [Github](https://github.com/psudo-dev/nebula-oni-theme)



There are several ways to help and support it!



- And if you **really** liked this theme, would you consider [buying me a coffee](https://buymeacoff.ee/psudodev)?



## 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](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/oni-ui/menu.png)



[
⬆
](#table-of-contents)



## 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](https://github.com/psudo-dev/nebula-oni-theme/blob/main/doc/ONI-UI.md)



### Main Colors 



![Oni UI Main Colors](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/oni-ui/main_1.png)



### Background Colors 



![Oni UI Background Colors](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/oni-ui/bg_colors.png)



[
⬆
](#table-of-contents)



## 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](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/refs/heads/main/doc/_readme/example_hourglass_js.png)



#### Pegasus (JSON) 



\*_Color Schemes_ for _JSON_ are split into pairs (_Hourglass/Spirograph_ and _Pegasus/Cerberus_)



![Nebula Syntax - Pegasus](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/refs/heads/main/doc/_readme/example_pegasus_json.png)



#### Spirograph (Markdown) 



\*_Markdown_ is the same for all _Color Schemes_



![Nebula Syntax - Spirograph](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/refs/heads/main/doc/_readme/example_spirograph_md.png)



#### Cerberus (HTML) 



![Nebula Syntax - Cerberus](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/refs/heads/main/doc/_readme/example_cerberus_html.png)



[
⬆
](#table-of-contents)



## Syntax Brightness



![VSCode's Menu](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/dimmed/_syntax_brightness_menu.png)



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](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/dimmed/js_pegasus_darkgrey_normal.png)



**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](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/dimmed/js_pegasus_grey_normal.png)



![Dark Grey Background - Dimmed Syntax Brightness](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/dimmed/js_pegasus_darkgrey_dimmed.png)



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



![Low-Contrast](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/dimmed/js_pegasus_grey_dimmed.png)



## 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](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/oni-ui/highlight_ultra_violet.gif)



#### Clear 



![Ultra  Violet Highlight](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/oni-ui/highlight_clear.gif)



[
⬆
](#table-of-contents)



### VSCode Native Bracket Pair Colorization 



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



![Side Bar](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/oni-ui/bracket_enabled.png)



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](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/oni-ui/_bracket_spirograph.png)



_
 ( Pegasus / **Cerberus** ) 
_



![Side Bar](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/oni-ui/_bracket_cerberus.png)



[
⬆
](#table-of-contents)



### 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](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/oni-ui/focus_border.gif)



[
⬆
](#table-of-contents)



### 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](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/syntax/comments.png)



[
⬆
](#table-of-contents)



### 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](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/oni-ui/sidebar.gif)



### Command Palette 



_
 (Main Color: Sakura / Background: Glacial Blue) 
_



![Side Bar](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/oni-ui/command_palette.gif)



[
⬆
](#table-of-contents)



### 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](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/oni-ui/info.png)



[
⬆
](#table-of-contents)



### 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](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/oni-ui/tabs.gif)



[
⬆
](#table-of-contents)



### 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](https://github.com/psudo-dev/nebula-oni-theme/blob/main/doc/CUSTOMIZATION.md).



![Terminal](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/oni-ui/terminal.png)



[
⬆
](#table-of-contents)



## 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](https://github.com/psudo-dev/nebula-oni-theme/blob/main/doc/EXTENSIONS.md)**.



### Better Comments 



![Better Comments Customization](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/extra/extensions-better_comments.png)



![Better Comments Customization](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/extra/extensions-better_comments_2.png)



### Bracket Pair Colorizer and Indent Rainbow 



_
 ( **Hourglass** / Spirograph ) 
_



![Bracket Pair Colorizer Customization](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/extra/extensions-bracket_indent_hourglass.png)



_
 ( **Pegasus** / Cerberus ) 
_



![Bracket Pair Colorizer Customization](https://raw.githubusercontent.com/psudo-dev/nebula-oni-theme/main/doc/extra/extensions-bracket_indent_pegasus.png)



[
⬆
](#table-of-contents)



## VSCode Customization



If you want more information on how to customize your **Oni UI** and **Nebula Syntax**, I made this [quick guide](https://github.com/psudo-dev/nebula-oni-theme/blob/main/doc/CUSTOMIZATION.md) with the basics to customize the workbench and the syntax.



[
⬆
](#table-of-contents)



## More Info 



- [Oni UI](https://github.com/psudo-dev/nebula-oni-theme/blob/main/doc/ONI-UI.md)

- [Nebula Syntax](https://github.com/psudo-dev/nebula-oni-theme/blob/main/doc/SYNTAX.md)

- [Extensions](https://github.com/psudo-dev/nebula-oni-theme/blob/main/doc/EXTENSIONS.md)

- [VSCode Customization](https://github.com/psudo-dev/nebula-oni-theme/blob/main/doc/CUSTOMIZATION.md)



## Release History



- [more information](https://github.com/psudo-dev/nebula-oni-theme/releases/)



## Issues and Suggestions



- [more information](https://github.com/psudo-dev/nebula-oni-theme/issues/new/choose)



## References and Links



- [ZSH Terminal Customization](https://medium.com/@shivam1/make-your-terminal-beautiful-and-fast-with-zsh-shell-and-powerlevel10k-6484461c6efb)

- [VSCode Workbench Customization](https://code.visualstudio.com/api/references/theme-color)

- [Syntax Highlight Guide](https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide)

- [Semantic Highlight Guide](https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide#semantic-token-classification)



[
⬆
](#table-of-contents)



## 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:



- **sharing** this theme with friends and colleagues

- **rating** it on Visual Studio Code [Market Place](https://marketplace.visualstudio.com/publishers/psudo-dev) and Open VSX [Market Place](https://open-vsx.org/extension/psudo-dev/nebula-oni-theme)

- giving it a **star** on [Github](https://github.com/psudo-dev/nebula-oni-theme)



And if you **really** liked this theme, would you consider [buying me a coffee](https://buymeacoff.ee/psudodev)?



Thanks,



[ [psudo-dev](https://github.com/psudo-dev/) ]



## License



- [Apache 2.0](https://github.com/psudo-dev/nebula-oni-theme/blob/main/LICENSE.md)