NovelAI theme for SillyTavern

_SillyTavern NovelAI Lookalike Theme.md

NAI lookalike theme

Install

1. Click Download ZIP
2. Extract ZIP
3. In SillyTavern, click the Import Theme button and select NAI.json from the extracted ZIP

SillyTavern will alert you that the theme contains @import statements. These are used to import the fonts (Source Sans 3, Eczar). If you don't want the fonts you can delete the @import statement at the top of the CSS.

Preview

Lots of panels

Checkbox clusterfuck

Changelog

2024-08-06

• Apply styling to slider inputs
• Hide unstyled up/down buttons on numeric inputs (delete input[type='number'] and input::-webkit-outer-spin-button if you want them back)

2024-06-30 (rev 3)

• Tweak link element styles so they don't affect the message popup menu.

2024-06-30 (rev 2)

• Make "Add to Favorites" toggle when editing a character more clearly show when the character is already a favorite

2024-06-30

• Initial upload

Mail

If something is fucked or you have a suggestion: [email protected]

NAI.json

{
    "name": "NAI",
    "blur_strength": 30,
    "main_text_color": "rgba(245, 245, 245, 1)",
    "italics_text_color": "rgba(209, 209, 214, 1)",
    "underline_text_color": "rgba(0, 102, 204, 1)",
    "quote_text_color": "rgba(245, 243, 194, 1)",
    "blur_tint_color": "rgba(19, 21, 44, 1)",
    "chat_tint_color": "rgba(25, 27, 49, 1)",
    "user_mes_blur_tint_color": "rgba(25, 27, 49, 0)",
    "bot_mes_blur_tint_color": "rgba(202, 205, 239, 0)",
    "shadow_color": "rgba(0, 0, 0, 0.3)",
    "shadow_width": 1,
    "border_color": "rgba(31, 33, 55, 1)",
    "font_scale": 1,
    "fast_ui_mode": true,
    "waifuMode": false,
    "avatar_style": 1,
    "chat_display": 1,
    "noShadows": true,
    "chat_width": 46,
    "timer_enabled": true,
    "timestamps_enabled": true,
    "timestamp_model_icon": true,
    "mesIDDisplay_enabled": true,
    "hideChatAvatars_enabled": false,
    "message_token_count_enabled": true,
    "expand_message_actions": true,
    "enableZenSliders": false,
    "enableLabMode": false,
    "hotswap_enabled": true,
    "custom_css": "/**  NAI-lookalike theme \n\nhttps://gist.github.com/khanonnie/d572c9e88cd7150f0850b61ce30a0d2c\n\nLast updated 2024-08-04 **/\n\n@import url(\"https://fonts.bunny.net/css?family=eczar:400,600,800|source-sans-3:400,400i,600,600i,800,800i\");\n\n:root {\n  --nai-color-border: #22253f;\n  --nai-color-border-dark: var(--SmartThemeBorderColor);\n  --nai-color-accent: #f5f3c2;\n  --nai-color-control-text: #ffffff;\n  --nai-color-control-background: #0e0f21;\n  --nai-color-control-accent: #8c8d98;\n  --nai-color-control-placeholder: #ffffff77;\n  --nai-color-button: #191b31;\n  --nai-color-button-hover: #282b44;\n  --nai-color-delete: #ff7878;\n  --nai-color-success: #7eff90;\n  --nai-color-error: #ff483f;\n  --nai-color-info: #73dfff;\n  --nai-color-warning: #ffc906;\n}\n\nhtml {\n  font-size: 18px;\n}\n\nbody {\n  font-family: \"Source Sans 3\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n    \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\",\n    \"Helvetica Neue\", sans-serif;\n  line-height: 1.5;\n  font-optical-sizing: auto;\n  font-weight: 400;\n  font-style: normal;\n}\n\n/* Remove box shadow on top bar, fix positioning */\n#top-bar {\n  box-shadow: unset;\n  height: calc(var(--bottomFormBlockSize) + 1px);\n  border-bottom: 1px solid var(--nai-color-border);\n}\n\n/* Panel borders */\n#send_form,\n.fillLeft,\n.drawer-content,\n#right-nav-panel,\nbody.waifuMode #chat,\nbody.waifuMode #top-bar {\n  border-radius: 3px;\n  outline: 1px solid var(--nai-color-border);\n}\n\n/* Headers */\nh1,\nh2,\nh3,\nh4,\nh3 > span,\nh4 > span,\nh5,\nh6 {\n  font-family: \"Eczar\", sans-serif;\n  font-weight: 600;\n  font-style: normal;\n  color: var(--nai-color-accent);\n}\n\n/* Collapsible drawer headers */\n.inline-drawer-header b,\nstrong {\n  font-family: \"Eczar\", sans-serif;\n  font-weight: 600;\n  font-style: normal;\n  color: var(--nai-color-accent);\n}\n\n/* Kill ugly gradients on menu subheaders */\n#extensions_settings .inline-drawer-toggle.inline-drawer-header,\n#extensions_settings2 .inline-drawer-toggle.inline-drawer-header,\n#user-settings-block h4,\n.standoutHeader {\n  background-image: none;\n  margin-bottom: 0;\n  border-radius: 0;\n  border: none;\n  font-size: 1.2em;\n  padding: 0.15em 0;\n}\n\n/* Fix one-off manually styled subheader */\n#advanced-ai-config-block h4 {\n  font-family: \"Eczar\", sans-serif;\n}\n\n/* Links */\na:not(.prompt-manager-inspect-action,.menu_button,.interactable) {\n  color: var(--nai-color-accent);\n  opacity: 0.7;\n  text-decoration: underline;\n}\na:hover,\na:focus {\n  opacity: 1;\n}\n\n/* Text inputs */\n.text_pole,\ntextarea,\n.neo-range-input,\n#send_textarea,\nselect,\n.ui-autocomplete {\n  font-family: \"Source Sans 3\", sans-serif;\n  font-optical-sizing: auto;\n  font-weight: 400;\n  font-style: normal;\n  background-color: var(--nai-color-control-background);\n  padding: 6px 0px 6px 6px;\n  border: 1px solid var(--nai-color-border);\n  border-radius: 3px;\n}\n.text_pole::placeholder,\ntextarea::placeholder,\n.neo-range-input::placeholder,\n#send_textarea::placeholder {\n  opacity: 1;\n  color: var(--nai-color-control-placeholder) !important;\n}\n/* Fix odd issue with focused Send Message input */\n#send_form:has(#send_textarea:focus-visible) {\n  border: 1px solid var(--nai-color-border);\n  outline: 1px solid var(--nai-color-border);\n}\nselect:focus-visible, input:focus-visible, textarea:focus-visible {\n  outline: none;\n}\n\n/* Dropdowns */\nselect option {\n  color: unset !important;\n  background-color: unset !important;\n}\n\n/* Autofill dropdowns */\n.ui-autocomplete {\n  background-color: var(--nai-color-border) !important;\n}\n.ui-autocomplete > li:hover {\n  background-color: var(--nai-color-button) !important;\n  color: inherit !important;\n}\n\n/* Checkboxes */\nlabel:has(input[type=\"checkbox\"]),\nlabel.checkbox_label {\n  align-items: center !important;\n  padding-bottom: 2px;\n}\n.checkbox_label small {\n  vertical-align: baseline;\n}\ninput[type=\"checkbox\"] {\n  border-radius: 0px;\n  background-color: var(--nai-color-control-background);\n  border: 0;\n  outline: 1px solid var(--nai-color-border);\n}\ninput[type=\"checkbox\"]:hover {\n  outline: 1px solid var(--nai-color-control-accent);\n}\ninput[type=\"checkbox\"]:checked {\n  background-color: var(--nai-color-accent);\n  outline: none;\n  filter: none;\n  content: \"\";\n}\ninput[type=\"checkbox\"]:checked::before {\n  transform: none;\n}\ninput[type=\"checkbox\"]::before {\n  mask-image: url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOCA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAzTDMgNUw3IDEiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=\");\n  mask-repeat: no-repeat;\n  background-color: black;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 4px;\n  left: 3px;\n  /* kill base declarations */\n  transform-origin: unset;\n  box-shadow: unset;\n  clip-path: unset;\n  transition: unset;\n}\n\n/* Sliders */\ninput[type=\"range\"], .neo-range-slider {\n  background: #0e0f21 !important;\n  border: 1px solid rgb(34, 37, 63);\n  height: 8px !important;\n  border-radius: 3px !important;\n  margin: 4px 0 -1px 0 !important;\n}\ninput[type=\"range\"]:hover, .neo-range-slider:hover {\n  filter: unset;\n}\ninput[type=\"range\"]:focus, .neo-range-slider:focus {\n  outline: none;\n}\ninput[type=\"range\"]::-moz-range-thumb, input[type=\"range\"]::-webkit-slider-thumb {\n  background: var(--nai-color-border);\n  cursor: pointer;\n  height: 22px;\n  width: 10px;\n  border-radius: 3px;\n  appearance: none;\n}\ninput[type=\"range\"]:focus::-moz-range-thumb, input[type=\"range\"]:focus::-moz-range-thumb {\n  background: var(--nai-color-accent);\n}\ninput[type='number'] {\n    -moz-appearance:textfield;\n}\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n}\n\n/* Buttons */\n.menu_button,\n#bulk_tag_popup_reset,\n#bulk_tag_popup_remove_mutual,\n#dialogue_popup_ok,\n.tag.actionable {\n  border: 1px solid var(--nai-color-border);\n  background-color: var(--nai-color-button);\n  font-weight: 600 !important;\n  transition: background 0.08s ease-in-out, color 0.08s ease-in-out;\n  color: var(--nai-color-control-text) !important;\n  padding: 8px;\n  font-size: 1em;\n  filter: none !important;\n}\n.menu_button:hover,\n#bulk_tag_popup_reset:hover,\n#bulk_tag_popup_remove_mutual:hover,\n#dialogue_popup_ok:hover {\n  background-color: var(--nai-color-button-hover);\n}\n/* Remove button shadow */\n.menu_button.menu_button_default {\n  box-shadow: none;\n}\n/* Fix button opacity on small buttons */\nsmall:has(> .menu_button),\ndiv.menu_button > small {\n  opacity: 1;\n}\n/* Message operation buttons */\n.mes_buttons div.mes_button {\n  filter: none;\n  transition: opacity 0.08s ease-in-out;\n}\n/* Fix edit controls */\n.mes_edit_buttons {\n  filter: inherit;\n  transition: inherit;\n  padding-bottom: inherit;\n}\n.mes_edit_buttons .menu_button {\n  background-color: var(--nai-color-button);\n  opacity: 1;\n}\n.mes_edit_buttons .menu_button:hover {\n  background-color: var(--nai-color-button-hover);\n}\n/* Confirm buttons */\n#bulk_tag_popup_reset,\n#bulk_tag_popup_remove_mutual,\n#dialogue_popup_ok,\n.mes_edit_done.menu_button,\n.menu_button.popup-button-ok {\n  background-color: inherit;\n  color: var(--nai-color-accent) !important;\n  border: 1px solid var(--nai-color-accent);\n}\n#bulk_tag_popup_reset:hover,\n#bulk_tag_popup_remove_mutual:hover,\n#dialogue_popup_ok:hover,\n.mes_edit_done.menu_button:hover,\n.menu_button.popup-button-ok:hover {\n  background-color: var(--nai-color-accent);\n  color: var(--nai-color-button) !important;\n}\n/* Character tag filter buttons */\n.tag.actionable {\n  border-radius: 3px;\n  max-height: 2em;\n  max-width: 2em;\n  padding: 5px;\n  background-color: var(--nai-color-button) !important;\n}\n.tag.actionable:hover {\n  background-color: var(--nai-color-button-hover) !important;\n}\n/* Character management buttons */\n#delete_button {\n  border: 1px solid var(--nai-color-delete);\n  color: var(--nai-color-delete) !important;\n  background-color: var(--nai-color-button) !important;\n}\n#delete_button:hover {\n  border: 1px solid var(--nai-color-delete);\n  color: var(--nai-color-button) !important;\n  background-color: var(--nai-color-delete) !important;\n}\n#favorite_button.fav_on {\n  border: 1px solid var(--nai-color-accent);\n  color: var(--nai-color-accent);\n}\n\n/* Character tags */\n.tag {\n  border: 1px solid var(--nai-color-accent);\n  border-radius: 3px;\n  padding-top: 0;\n  padding-bottom: 0;\n  line-height: 1.33;\n}\n\n/* Dividers */\nhr {\n  background-image: unset;\n  border-top: 2px solid var(--nai-color-border-dark);\n  opacity: 1;\n}\n\n/* Fix message headers when editing */\n.mes_block > .ch_name:first-child {\n  align-items: end;\n}\n\n/* Fix message borders */\nbody.bubblechat .mes {\n  margin-bottom: 0px;\n  border: 2px solid var(--nai-color-border-dark);\n  border-radius: 0px;\n}\n\n/* Fix background image swatches */\n.bg_example {\n  border-radius: 3px;\n  box-shadow: unset;\n  border: 2px solid var(--nai-color-border-dark);\n}\n\n/* Fix popups */\n#options,\n#extensionsMenu,\n.popup .popper-modal {\n  border-radius: 3px;\n  box-shadow: unset;\n  border: 2px solid var(--nai-color-border-dark);\n}\n.options-content,\n.list-group {\n  border: unset;\n  border-radius: unset;\n}\n#dialogue_popup_controls {\n  min-width: 60%;\n  justify-content: space-between;\n}\n#dialogue_popup_controls > div {\n  flex: 1 1 0;\n}\n\n/* Fix avatars */\n.avatar img {\n  border-radius: 3px;\n  box-shadow: unset;\n  border: 2px solid var(--nai-color-border-dark);\n}\n\n/* Fix bulk chara select UI */\n#rm_print_characters_block.group_overlay_mode_select .character_select {\n  border-radius: 4px;\n  transition: all 0.08s ease-in-out, color 0.08s ease-in-out;\n  user-select: none;\n}\n#rm_print_characters_block.group_overlay_mode_select\n  .character_select.character_selected {\n  color: var(--nai-color-button);\n}\n\n/* Favorites */\n.character_select.is_fav .avatar,\n.group_select.is_fav .avatar,\n.group_member.is_fav .avatar,\n.avatar.is_fav {\n  outline: 2px solid var(--nai-color-accent);\n}\n.character_select.is_fav .ch_name,\n.group_select.is_fav .ch_name,\n.group_member.is_fav .ch_name {\n  color: var(--nai-color-accent);\n}\n\n/* Fix toast */\nbody #toast-container {\n  top: unset;\n  right: 2em;\n  bottom: 2em;\n  width: unset;\n}\n#toast-container > div {\n  box-shadow: none !important;\n  border-radius: 1px;\n  border-width: 1px;\n  border-style: solid;\n}\n.toast-success {\n  border-color: var(--nai-color-success);\n}\n.toast-error {\n  border-color: var(--nai-color-error);\n}\n.toast-info {\n  border-color: var(--nai-color-info);\n}\n.toast-warning {\n  border-color: var(--nai-color-warning);\n}\n\n/** Dim ghost messages */\n.mes[is_system=\"true\"] {\n  opacity: 0.75;\n}\n",
    "bogus_folders": false,
    "zoomed_avatar_magnification": false,
    "reduced_motion": false,
    "compact_input_area": false
}