SillyTavern UI Themes: The 2026 Reality Check

Installing a new theme in SillyTavern is straightforward and requires no coding. First, navigate to the 'Settings' gear icon in the upper-left of the SillyTavern interface. In the settings panel, select the 'User Settings' tab (the person icon), then scroll to the 'Theme' section. Here you can choose from a dropdown of pre-installed themes like 'Dark', 'Light', 'Midnight', or 'High Contrast'. To install a custom theme, download a `.json` or `.css` file from a community repository (e.g., GitHub or the SillyTavern Discord). Place the file in the `themes/` subfolder inside your SillyTavern installation directory (typically `SillyTavern/public/themes/`). The new theme will appear in the dropdown after a refresh. Some advanced themes require placing the file in `themes/user/` and then selecting it under 'User Theme'. Always restart the client or reload the page for the changes to take effect.

The largest collection of SillyTavern themes is on the official SillyTavern Discord server, specifically in the `#themes` channel, where users share previews and download links. GitHub repositories also host dozens of themes; search for 'SillyTavern-themes' or browse repositories tagged with 'sillytavern'. Websites like GitHub Gist allow creators to share single-file themes. As of 2024, there are over 200 community themes available, ranging from minimalistic one-color designs to elaborate custom layouts inspired by anime, cyberpunk, or vintage terminals. A few popular repositories include 'SillyTavern-Extras' and 'SillyTavern-Community-Themes'. When downloading, verify the file structure: most themes are single `.json` or `.css` files under 50 KB. Always scan files for malicious code, though SillyTavern themes are plain text and generally safe. Some creators also offer themed character card packs that include matching UI colors.

Creating your own SillyTavern theme requires basic knowledge of CSS and JSON. The theme system uses two files: a `theme.json` for metadata (name, author, description) and a `style.css` for all visual overrides. The `theme.json` structure is simple: `{"name": "MyTheme", "author": "YourName", "description": "A dark purple theme"}`. The CSS file targets SillyTavern's DOM elements using class names like `.chat`, `.message`, `.input_area`, and `:root` variables. Start by examining the default theme's CSS (found in `public/themes/dark.css`). Override variables like `--primary-color`, `--background-color`, `--text-color`, and `--font-family`. For example, `--primary-color: #6a0dad;` turns the accent purple. More advanced themes can modify margins, border-radius, and animation. Use browser developer tools (F12) to inspect elements and find their class names. SillyTavern's theme loader applies CSS dynamically, so all changes are client-side and don't affect other users. Test your theme locally by refreshing the page after each CSS edit.

Themes may break after SillyTavern updates because class names or structure can change. Common symptoms include missing icons, misaligned text, or entire sections not rendering. First, check the SillyTavern changelog for CSS-related changes. If a theme was created for version 1.10 but you're on 1.12, inspect the browser console (F12 > Console) for CSS errors like 'Unknown property' or 'Invalid selector'. Many theme creators update their files within a week of a new release. To fix a broken theme, open the `style.css` and search for outdated class names (e.g., `.message_text` might have become `.chat_message_text`). Use the browser's element inspector to find the new class name and replace it. Alternatively, temporarily switch to a default theme (Dark, Light) to confirm the issue is theme-specific. For persistent problems, post in the Discord `#themes` channel with your SillyTavern version and theme name. As a last resort, delete the theme file and re-download a newer version from the creator.

Most SillyTavern themes are lightweight and have negligible performance impact. However, themes that include large background images, complex gradients, or extensive CSS animations can cause lag, especially on lower-end devices or when handling long chat histories. A single 500 KB background image can increase page load time by 200–500 ms. Animated elements (e.g., breathing glow effects on messages) may reduce frame rates to 30 fps during scrolling. To test performance, open the browser's Performance tab (F12 > Performance) and record a few seconds of interaction. Look for 'Recalculate Style' events taking more than 50 ms. If a theme slows SillyTavern, remove image assets from the CSS or replace them with solid colors. Use `background-color` instead of `background-image` for the main container. The default themes are optimized for fast rendering. Stick to simple CSS selectors (avoid deep nesting like `.chat .message .text span`) to minimize style recalculations.

SillyTavern includes a built-in 'High Contrast' theme for users with visual impairments, but custom themes often overlook accessibility. Poor contrast ratios (below 4.5:1 for normal text per WCAG 2.1 AA) make reading difficult. Use online tools like WebAIM's Contrast Checker to verify your theme's text–background combinations. Light text on a white background or dark text on a black background fails. The `--text-color` and `--background-color` CSS variables should maintain at least a 4.5:1 ratio. Additionally, avoid using color alone to convey information (e.g., red for errors) — add icons or text. SillyTavern's default font size is 14px, but some themes shrink it to 12px, which is too small for many users. Respect user font-size preferences by using `rem` units instead of `px`. Theme creators should test with screen readers (e.g., NVDA) to ensure focus indicators are visible. The community theme 'Accessible Light' is a good reference for inclusive design.