Making Custom Themes

'''This guide was made before CSS could be edited directly inside the theme menu. This remains as an educational resource, but you can do all the edits directly into NAI now, outside of using custom fonts.'''

= Custom Themes =

This page contains community-researched content aiming to provide a relatively easy to use Theme template, as well as a database of IDs for more indepth modification.

This is an expert guide. There will be quite a bit of hand-holding, because CSS is a satanic spawn of devastation.

All these sites will be useful for you as you work on themes:
 * W3Schools' CSS tutorials
 * Color-Hex

Utilities that may be useful:
 * VSCode - Set with JSON syntax highlight for the main theme content, and CSS for Global block.

Things to keep in mind:


 * Ensure that all blocks are properly delineated with the quotes and commas. Don't forget the semicolons between CSS commands as well. Check that pairs of curly braces are present and properly placed.
 * KEEP A BACKUP OF YOUR LATEST 'WORKING' VERSION.

= Template Walkthrough =

Before you start, save the raw template at the bottom of this page and give it a good read.

Template Explanation
Okay, you've got the file? Open it in notepad or a JSON editor of your choice, but you're still probably confused. Let's go down the template, part by part.

The template begins with a. Leave it alone.

Name field
Simply replace "NAME HERE" with the name of your font. Keep the quotes as is.

You'll notice that all major elements use the following structure:

"elementname", colon, opening quote, content, closing quote, comma.

Keep this in mind for later, because if syntax breaks, it's probably because a comma is dangling or missing, or a quote isn't opened/closed properly.

Font Block
First of all, we have four font categories.

Simply replace the all-caps text with the name of font of your choosing. '''Don't touch the backslashed quotes. Those are required for fonts that have spaces in their names.'''

Make sure you match the Default font and Headings font for the SelectedDefault and SelectedHeadings fields.

What about all the other fonts on the same line? It's simple: Those are fallback fonts. If the first one fails to load, it'll load the second, etc, until the end. You can edit those too. Remember that the entire font definition is contained within quotes, and concluded by a comma:

Adding Formatting to Fonts
You can add additional formatting to all font types by using CSS. In order to insert them, you must add a semicolon just before the final font's name of the font definition:

All the CSS code must be added after that semicolon. Every CSS element must be separated by a semicolon. At the end of all the CSS content, you must have the ending quote, and comma.

Font Notes

 * Not all fonts are available on all devices. To be sure it'll always work, only use fonts that are available in the font selector, or provide a "stock fonts" version of your theme that uses these.


 * You can use heading fonts for the text font, and vice versa. Just because they're not in the same drop down doesn't mean they can't be used.


 * Make sure you pick fonts that are legible. Your theme should be comfortable to use.


 * You'll notice something that reads "Leave Untouched" It's better you leave these as is, as Themes break when fonts are changed after they're set up. Specifically, the header font, as it reapplies all default styling elements for some reason.

⬆ Return to Page Top

Colors Block
The colors block specifies all the default Background Colors (bg0-bg3), as well as all the font colors.

All of these except one are specified in Hex.

Text Highlight is defined in RGBA format. This is identical to HEX except the numbers go from 0 to 255 and are separated by commas. The Alpha (transparency) channel, however, is an index, and goes from 1.0 to 0.0.

I suggest using Hexadecimal because it takes a lot less space, and also, ColorHex exists. Use it. It's amazing.

A Hex color can have either six or eight digits. The digits in Hexadecimal are 0123456789ABCDEF. The maximum value of FF is thus 256 in decimal.

Hex is read in pairs, hence the RR GG BB AA nomenclature. They take values of 00 to FF. RR for red, GG for Green, BB for Blue.

Now, what is AA? This specifies the level of transparency. FF is fully opaque and 00 is completely transparent and thus invisible.

There are things to keep in mind before setting these:


 * BG colors can take transparency by adding another pair of digits at the end. Just like the Red, Green and Blue channel, this one goes from 00 to FF.


 * If your BGs colors are transparent, you will need to edit several elements in the Global block because they will be difficult to read! It's better to make the bg colors solid, THEN give transparency to specific items.


 * Text colors must mesh well with your BG colors or they will be illegible. Always remember the rules of DARK ON BRIGHT or BRIGHT ON DARK.


 * Never use pitch black for backgrounds. Very uncomfortable for the user's eyes, and looks terrible on most monitors.


 * Make your font colors discernible from each other, not shades of each other. What I suggest is make pairs of colors: One for User/prompt and one for AI/Edited. Choose one color for each. Then, select two of the component colors. Raise one and decrease the other to complete the pair.

Color Tables
⬆ Return to Page Top

Global Block
The Global block contains all CSS overrides. This is used to directly edit the style sheet of various parts of the interface. This section won't cover everything, you can learn CSS yourself.

What is important, is that the entire global block is basically the integrality of your CSS style sheet, contained in a single line, in a single quote.

Every element ID begins with a period. Every CSS override applied to it must be between curly braces, and every override separated by a semicolon. It is not necessary to separate them with commas, unless you want overrides to be applied to two elements at once.

Prose Mirror
You'll have noticed something called ProseMirror. This is basically what formats the text in the main text box.

The Padding parameters here will add a bit of space between the text box frame and the text itself. The order appears to be UP, RIGHT, DOWN, LEFT.

Now you have four identifiers. Each identifier is a type of text, same as the different colors used in highlighting. The names should be obvious enough.

If you only want the shadowing to affect certain types, remove all the ones you want unaffected.

The shadow's arguments are vertical and horizontal offsets, shadow blur distance, and the hex color off the shadow. The second set defines the secondary shadow that it will fade to.

You can add  between the curly braces as well to make that type of text underlined, and   to italicize the text.

If you wish to have different types of formatting, simply separate them like this:

Setting the page Background
The background of the site is defined under the  label. It works like any other ID, but doesn't take a period.

Setting a Color
By default the background is a color. It can be set in different formats. RGB(A), or Hexadecimal. use

Setting an Image
To set an image as background, use

You'll notice it is already present for the main site background. Replace "BACKGROUND DIRECT LINK HERE" with the direct link (i.e with the file extension) to your image.

If your background needs to be stretched to fit: add

If your background needs to EXACTLY fit to a full size window (not recommended for mobile!): add

If your background needs to be tiled: add

Blending Background Image & Color Blend
You can apply a background image and apply a color blend to it by using the following properties:

Fade-in Fade-out Effect
This is something we designed before this version of the guide, so it uses old IDs (and still does, there is no static ID for it), so we're keeping it for posterity. You can add it in the global block.

What it does is create a fade in from the very top of the main text box, and a fade out at the very bottom.

There's only two things that really need to be edited there: the percentages. The first one indicates how much distance the fade-in takes. The second indicates where the fade-out begins.

The lower the first value, the smaller the fade-in, the higher the first value, the bigger the fade-in.

The higher the second value, the smaller the fade-out, the lower the second value, the bigger the fade-out.

Editing the size and placement of the text box
If the text box is too small or too large for you, you can adjust it by adding the following to the Global block:

Edit the percentage to make it wider or thinner. You can also use  to edit how tall it is.

For the placement, you'll want to add a  property, this will create empty space around the text box. You can also make margins from specific directions by specifying it, like.

Remember that all sizes can be specified both in PX and in % of the page space.

Making the Text Box Transparent when Focused
You noticed that making  or   have a transparent background doesn't make the main text box transparent when it is selected. This is due to a dynamic class being used, and the override not being applied consistently.

To give the main text box a different color than BG0 when focused (and apply transparency), use the following:

Change RRGGBBAA to the color of your choosing.

Defining settings for Mobile Displays only
You can define overrides that are only performed on Mobile devices by encapsulating them in the following block:

⬆ Return to Page Top

Finishing your Theme
You did it? You filled everything? Great! Now you need to do a few things.

1. Check if all your blocks are properly opened and closed. Check pairs of quotes, pairs of curly braces, etc. Make sure the initial and final curly braces are present. Everything in the global field must be in a single line, in a single quote.

2. Make sure everything in the Global field is on a single line and that all the blocks are properly closed.

3. Import that new file from the theme menu, and CLICK SAVE CHANGES.

4. Profit!

If it didn't work, check how much did work. Usually something broke somewhere because of a missing semicolon, parenthesis, comma or curly brace.

⬆ Return to Page Top

List of all Element IDs
Keep in mind that all of these must be preceded by a period when edited in the global field, except #app and div. elements.

THIS IS FOR ARCHIVAL PURPOSE. USING THESE IS TECHNICALLY DEPRECATED. IF AN ID IS NOT PRESENT ABOVE, YOU CAN USE ONE OF THESE.