Git Product home page Git Product logo

nebula-oni-theme's Introduction

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

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

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

nebula-oni-theme's People

Contributors

iaurg avatar psudo-dev avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.