Themes - Jirashi/Textacular GitHub Wiki

🎨 Themes

Wiki page explaining how to use, make and upload themes.

Table of Contents:

🎨 Using themes

Applying a theme

To apply a theme to your editor, hover of the View dropdown and press Theme.
There should be two lists, one is light themes and one is dark themes. When you hover over a theme the colors will appear.

There are many themes to choose from and more to come, but if you are unsatisfied with the variety you can make your own.

🖌️ Creating themes

All themes MUST be in JSON format.

Theme format

A theme is built up of three components:

  1. The theme name
  2. The theme colors (6)
  3. The theme type (light/dark)

Example:
Theme name -> "default-light": [ Theme colors -> ["#a5a7a2", "#ffffff", "#f7f9fa", "#f3f3f3", "#373b3d", "#369ada"], Theme type -> "light"],

The colors (0-5) are used as so: 0: Highlight 1: Lightest color/Darkest color 2: Medium color 3: Darkest color/Lightest color 4: Text color 5: Main color

When creating a theme for upload, make sure it is wrapped in {} brackets.

You can style the theme's name by naming it something like <span style='color: red;'>my-theme</span> this will show up as red text because when the theme loads the span will be included.

📂 Uploading themes

Uploading a theme

To upload a theme simply navigate to View > Theme and click on the upload theme button. Once you have submitted a valid theme the menu should close, if else an error will be sent in the console.

Your theme should look something like this when uploading:

{"default-light": [["#a5a7a2", "#ffffff", "#f7f9fa", "#f3f3f3", "#373b3d", "#369ada"], "light"]}

Uploading multiple themes

You can upload multiple themes by wrapping them all in brackets:

{
"default-light": [["#a5a7a2", "#ffffff", "#f7f9fa", "#f3f3f3", "#373b3d", "#369ada"], "light"],
"default-dark": [["#414141", "#1a1a1a", "#161616", "#121212", "#eaeaea", "#007acc"], "dark"]
}

⚙️ Configuring theme file

Locating the theme file

The theme file is located in the "Config" folder, it is titled theme.json.

Reading and editing the theme file

The theme file is filled with CSS rules which are built up of 2 components.

  1. The target elements
  2. The style dictionary

Example:
Target element/s -> "body":{ Style type -> "background-color": Theme color -> 1},

You can see which number to use for the color here

Only put things that need colors here, anything else should go in the css folder.

Borders work a little differently, e.x. "border: 0 1px 1px 1px solid":3

⚠️ **GitHub.com Fallback** ⚠️