How to edit NovelAI Themes

NovelAI has 18 pre-made themes to choose from. It also allows you to import and create user made themes.

You don't even have to be logged in to customize your experience in case you're only testing NovelAI. If you ever mess up your UI beyond manual repair (via custom css) Alt + Shift + P can be used to reset your theme to the default theme.

= What can I customize? = Check the article on released user themes here. Just about anything goes from just switching up colors to playing with transparent menus and background images / gifs as well as changing up some UI behavior with device-specific rules.

=Where to start=

Where to find the Theme Menu
Open NovelAI and click the cog (⚙) icon at the top of the left hand menu bar. Select the Theme Menu and there you are, the safe theme playground. =Vanilla Options= All options you mess with in the theme menu will only show you a preview of what your changes will look like once applied. To see how they really affect your UI you have to hit the Save Theme button.

If you want to use a theme you downloaded somewhere you can click on import and select the .naitheme file you want.

To save a theme you customized (or simply make backups of existing themes in case they get removed / edited) you can apply and save the Theme, then hit the export button.

Default Themes
The simplest and most used option is picking presets from a non-expandable list of premade themes. At the time of writing there are 18 themes to pick from. 2 of those, Novel Season and Merry & Write, have special animated SVG backgrounds. All other themes use plain monochrome backgrounds. Simply click a Theme and you'll get the preview of the edits applied to the pop-up menu. Once you click Save Theme button the change is applied and takes effect.

= Theme Editor = The theme editor area is where the real fun begins. The options there are split into 4 categories: Text Color, Font Choice, Background Color and Custom CSS.

Text Color
Text colors can be manipulated by changing the options for Header, Paragraph and the different kinds of story-text in the visualizer box on the left, just above the font selection. While the options for story text do exactly as advertised, the options for Header and Paragraph both do more than their name may suggest.

Header does indeed change the color of the headers for your stories in the story list. But it also functions as the color for highlighting active and positive actions (e.g. new story button, the favourite 🤍, download story to file). Paragraph behaves the same way, though it affects all generic texts, headers and non-story items you can think of. It also provides the default color for the story title above the conversation window.

Text Fonts
The option Header Font changes the font used to anything you can consider a title or heading in the UI. This does not include bold-text options, such as Remote Storage.

The option Paragraph Font changes everything that isn't affected by Header Font, story text included.

Background Color
There are five options:

Warning/Error is used for Delete-buttons, Logout and the Change Log 's "New!" flavour text.

Foreground affects default button colors, borders for the distinction between the conversation part of the UI and the sidebars as well as a line for the title of pop-up menus.

Background is the default background for the conversation, active but not focused Tabs in the right hand menu. It is also used as the color that fades in from the right for AI Model and Module choice.

Dark Background is used for the sidebars, base buttons, the primary input boxes (story input, lorebook content, etc.) and the background of the conversation window when it is focused.

Input Background is used for slider backgrounds, inactive on-off sliders, search bars, inactive tabs and secondary text inputs.

To fully see what option affects what and where, just load up a default theme and change one option to a clashing color such as toxic green.

Custom CSS
The most useful and "experimental" area. You can literally use any valid CSS you can think of (or copy and adapt from someplace) and spice up your theme.

What is CSS?
CSS is an abbreviation for Cascading Style Sheet. In essence, CSS turns boring and functional HTML + JavaScript websites into the well-styled, colorful (and potentially animated) canvases we know them as today. It affects basically everything that is related to visuals, including interactive behavior when you mouse over elements, click them or click away from them. This article won't teach you CSS basics as there are plenty of guides online. Some generally usable snippets can still be found down below, though.

How to test new CSS
While it is possible to add custom CSS in the UI, save it and check the effects of it there are much more productive ways to go about this. It's generally advised to keep a separate copy of your custom CSS handy for posterity and back up purposes. Also be aware that the Custom CSS window in NovelAI's UI automatically formats and prunes your code. Comments will be removed, for example. For changes to take effect you have to click out of the editor before you click on the save button. If you don't there's a chance you lose your edits because the save event fires before the change in the CSS text is noticed.

Disclaimer: At the time of writing NAI has changed the order custom CSS is loaded in, so a bunch of custom parts you add may require the use of the !important tag. This also means certain older themes no longer work by virtue of not having that tag.

Approach 1: Browser / Debug tools
If you're using a chromium based browser (basically anything that isn't Firefox or one of its derivatives), it's easier to use approach 2.

Firefox has a Style Editor (Shift+F7) that lets you add a blank and new CSS sheet and auto-adds it to the site, meaning you can just write whatever you want and it'll apply your new rules on the fly so you can see what it is you're actually doing without delay. Once satisfied with the effects of your new CSS you can save it to a file (for posterity) and apply it to a theme properly.

Approach 2: Editors
VSCodium with a CSS formatter extension is recommended, though anything from Notepad to Word95 can be used. Just write out your custom CSS with (or without) the help of your editor's highlighting, auto-formatting and syntax checks. With this approach you won't immediately see the effects of your edits, but you won't be confused by potential errors. It's also infinitely more useful if you wish to mess with the theme files themselves.

Theme files and why you need to edit them
Customized themes can be downloaded as a file, which is just your run of the mill JSON file with a custom filename. The file exposes a few more options than the UI shows, so you can mess with things more intricately by manipulating the file itself. This way you can also use transparency for colors (which is blocked in the UI).

The name item is the name displayed in the theme menu. It doesn't show up anywhere else. Custom themes also are not saved in the theme list.

The sub-items of the fonts collection let you pick different fonts for different areas, as well as 2 special options that can change the font used when you focus an applicable input field.

The numbered colour subitems relate to their UI names as follows: Both textHeadingsOptions and textMainOptions have no real effect on the UI directly. They replace the quick-select colors in the UI for quick changing, if you're into that.

The items textDisabled and textPlaceholder aren't in the UI, but do as advertised. The former alters the appearance of disabled buttons (Undo / Redo / Retry / Send button while unusable) while the latter changes the text used for empty text fields.

Messing with the breakpoints is only recommended if you know what you're doing and want to change when the UI changes from Desktop mode to Mobile mode. The pixel-width placed in them is used for window width.

The value in transitions lets you mess with the speed and existence of fade-ins and fade-outs when you focus and unfocus stuff.

The global item at the very bottom is where custom CSS ends up, in a minified version (i.e. unformatted, all in one line).

NovelAI's Anatomy
What is NovelAI made of? Internet juice or HTML, CSS and JavaScript is what most of you might say. That's correct, on a basic level. For customization only CSS matters (for now) as that's the only part we can influence without adding third party utilities like Userscript.

NovelAI uses a dynamic framework called React™ to build the website from dynamically generated templates. That doesn't have to mean much to you but it's the reason you'll have to check any and all custom CSS you create when a UI update hits. Instead of having "fixed" names and items you can address and latch onto NovelAI's source code uses dynamically generated tags (like dQzznc), though a few core areas are named for their own convenience as well. To be certain of what tags you can / have to use, go through the HTML elements of NovelAI's site (including the popup-dialogues). At the time of writing, some notable named items can be found in the table below.

While generated tags could be named here, they wouldn't really have any real purpose as they change with every UI update NovelAI releases. For example, right now .dQzznc is the tag used for the currently visible tab in the right hand menu. It went by a different jumble of letters previously and will change again.

Hypebots
Custom avatar images for hypebots can be added by using custom CSS tags. Consider using base64 instead of an image link. base64 is local, whereas image links could die in the future.

Here's a very lazy template, all you have to do is change the NAME HERE line, and fill the url bits with image links or base64 strings:

Useful little snippets
The following section contains snippets of CSS with small descriptions of their purpose. They may or may not work as-is and might need to be updated if NovelAI changed its UI again. CSS mentioning generated tags will mention their location, so you can use your browser's dev-tools to check if the tag still exists or was changed.

Text shadow
This snippet lets your story's text pop just a bit more, giving the font you use more defined edges that may make it easier on your eyes.

Applying rules only to mobile
With this snippet around your rules any changes to the UI are only applied if the device or browser you view it on is less than 1200 pixels wide. 1200 is a conscious choice here because it is the same default value for naithemes to switch between mobile and desktop use. If you changed that breakpoint you'll have to do the same here. If you want to apply some rules the other way around (i.e. only on desktop mode), apply the rule as "min-width" with the value being the breakpoint for mobile +1, 1201 in this case.

Sideload a custom font (from Google Fonts servers)
NovelAI lets you use all CSS features. That includes side-loading fonts from Google Fonts or other, potentially self-hosted places. The following snippet imports a font and then applies it to everything via the use of * as an identifier. Google Fonts even gives you custom CSS snippets for whatever font(s) you want.

Add an image as a background
As the title says. Depending on where you add this you may have to mess with the main colors and fix a lot of transparency issues. Also keep in mind that you can't just link any image from any site. Imgur, DeviantArt and Gelbooru let you hotlink images, so you can use those. Also, any type of standard image file works for this. Video files, such as MP4s, even if mute, do not. They require actual HTML containers. Instead of a URL you can also just dump a base-64 encoded image, but that bloats the size of your theme file.

Widen the main area, aka. the conversation area
This customisation requires you to download and edit a .naitheme file. You have to change the UI breakpoints to accomodate the raised width potential.

The breakpoint list in the .naitheme should look as follows: With the following CSS in global: