Theme

NovelAI comes with 19 default theme options, as well as an intuitive interface to customize the site to your liking! Use the Theme Editor to adjust background and text color, as well as change the fonts used for header and paragraph text.

When you change a color the background of the Theme Editor will also change to provide a preview of your changes. The Color Picker beside each element can be used to fine tune every color to your liking.

After making changes to your theme make sure to apply and save it. Themes are exported as a .naitheme file for easy sharing and importing on other devices and accounts. The novelai-content-sharing channel in the Anlatan Discord has a theme section with dozens of user themes.

The Custom CSS dropdown can be used to further customize your NovelAI theme. This is an advanced feature and be aware that future updates could break your custom code. As stated in the disclaimer, if this does happen you can use the shortcut Alt+Shift+P to reset to the default theme.

Below are some example pieces of code you can copy and paste to change HypeBot, add a Background Image, make the editor transparent, and disable borders and outlines.

Custom Hypebot

.comment-avatar-box {
    background-image: url(https://i.imgur.com/fPwZIbN.jpg);
}
.comment-avatar {
    background-image: url(https://i.imgur.com/hvb1a4i.png) !important;
    background-color: transparent !important;
}
.comment-arrow {
    opacity: 0.0 !important;
}

The .comment-avatar-box class changes the HypeBot background image, while the .comment-avatar class changes the default HypeBot avatar shown when idling. Animated .gifs are supported in all of HypeBot image links. The line about transparency is required to make the background image work. Swap the urls with the links to the images you wish to use.

The .comment-arrow class decides how you want the speech bubble arrow to appear, if you copy the line from here it will remove it.

.comment-avatar-speaking-active {
    background-image: url(https://i.imgur.com/FqSGMHE.gif) !important;
}

The .comment-avatar-speaking-active class changes the HypeBot image displayed while the response text is streamed, use this to create a talking frame or animation for your custom avatar!

.comment-avatar-thinking {
    background-image: url(https://i.imgur.com/CrCTvlu.png) !important;
}

The .comment-avatar-thinking class changes the HypeBot image displayed while it is 'thinking', the brief period before text begins streaming or when you click the avatar to retry.

.comment-avatar-idle {
    background-image: url(https://i.imgur.com/hvb1a4i.png) !important;
}

The .comment-avatar-idle class changes the HypeBot idle frame, which appears after text is done streaming. This image can usually be the same one you use for the .comment-avatar class.

.comment-name::after {
    content: 'Nai-chan' !important;
}

The .comment-name::after class changes the name of your HypeBot.

With all of the above combined, it should look something like this in the Custom CSS dropdown.

.comment-avatar-box {
    background-image: url(https://i.imgur.com/fPwZIbN.jpg);
}
.comment-avatar {
    background-image: url(https://i.imgur.com/hvb1a4i.png) !important;
    background-color: transparent !important;
}
.comment-arrow{
    opacity: 0.0 !important;
}
.comment-avatar-speaking-active {
    background-image: url(https://i.imgur.com/FqSGMHE.gif) !important;
}
.comment-avatar-thinking {
    background-image: url(https://i.imgur.com/CrCTvlu.png) !important;
}
.comment-avatar-idle{
    background-image: url(https://i.imgur.com/hvb1a4i.png) !important;
}
.comment-name::after {
    content: 'Nai-chan' !important;
}

Background Image

#app {
    background-image: url(https://i.imgur.com/2Xt07Ut.jpg);
    background-size: cover;
    background-position: center;
}

This code changes the editor background image to one of your liking.

Transparent Background

.menubar, .infobar, .conversation, .module-trainer {
    background-color: #0c0c1088 !important;
    backdrop-filter: blur(5px);
}

Using this code you can make the editor transparent and slightly blurry to show more of your background image. Change the value of backdrop-filter to make it more or less blurry.

Borders

* {
    border: none !important;
    outline: none !important;
}

This code removes the borders around the various boxes and sidebars. Keep the asterisk or it won't work!