Theme variables

A theme is a stylesheet that sets custom properties on :root. Nowhere in Tintero is there a list of which names are allowed, so this page answers the question from two directions and lets you pick.

157

the app declares

Every property in the app stylesheet. The full list, most of which no theme ever touches.

12

the core palette

Set by 28 of the 29 built-in themes. Treat these as required.

47

some theme sets

Everything the built-in themes touch between them, including the rgba pairs they write by hand.

The core palette

The 12 variables that 28 of the 29 built-in themes all set. Nothing marks them as required in the source, but a theme that skips one inherits whatever the last theme left behind, so treat this as the floor.

The rgba siblings

Tintero builds its see-through surfaces by writing rgba(var(--dark-bg-rgba), 0.6), which means these 11 variables hold three bare numbers rather than a colour: 18, 18, 18, not #121212. They are not in variables.scss, so the only list of them is the one the built-in themes agree on.

--accent-color-hover-rgba --accent-color-rgba --border-color-rgba --button-hover-rgba --dark-bg-rgba --dark-menu-rgba --dark-quaternary-rgba --dark-secondary-rgba --dark-tertiary-rgba --text-primary-rgba --text-secondary-rgba

285 of the 308 values the built-in themes give these are written that way, by hand. The rest belong to the themes that borrow their colours from the operating system, where the value is a keyword like Canvas instead of a number.

What is cleared between themes

These 15 get wiped from :root on every theme switch and then put back from the person's own settings. They are the only ones where leaving a variable out really does mean "leave it to them" rather than "keep whatever the last theme said".

--editor-font --interface-font --tab-font --base-font-size --heading-font-size --editor-zoom --dialog-title-font --dialog-radius --dialog-padding --ui-scale-menus --ui-scale-sidebar --ui-scale-tabs --ui-scale-toolbar --ui-scale-docsidebar --ui-scale-tooltips

The editor zoom is a personal setting, kept between 50–200%. Your theme can suggest a starting value, but their slider wins from then on.

Every variable

All 157 custom properties the app declares, with the value it falls back to when nothing sets them. The number on the right is how many of the 29 built-in themes bother with each, which is the best hint you will get about whether you should too.

Base palette

--accent-color #c98a48 28/29

--accent-color-hover #e1a66b 28/29

--border-color #2d2d2d 28/29

--button-hover #1e1e1e 28/29

--dark-bg #121212 28/29

--dark-menu #1e1e1e 28/29

--dark-quaternary #2d2d2d 28/29

--dark-secondary #181818 28/29

--dark-tertiary #222222 28/29

--text-primary #e6d7c2 28/29

--text-secondary #a98e6b 28/29

--text-tertiary #a19591 28/29

--text-on-danger #ffffff none

--text-on-scene-type #ffffff none

Sidebar

--sidebar-container-background var(--dark-bg) derived 25/29

--sidebar-file-section-container-background var(--dark-secondary) derived 25/29

--sidebar-section-header-background linear-gradient(135deg, var(--dark-secondary), var(--dark-tertiary)) derived 25/29

--default-gradient linear-gradient(135deg, var(--dark-secondary) 0%, var(--dark-tertiary) 100%) derived 2/29

--sidebar-background linear-gradient(180deg, var(--sidebar-background-first-color) 0%, var(--sidebar-background-second-color) 100%) derived none

--sidebar-background-first-color var(--dark-tertiary) derived none

--sidebar-background-second-color var(--dark-quaternary) derived none

--sidebar-button-color var(--accent-color) derived none

--sidebar-button-padding 12px none

--sidebar-button-size 14px none

Dialogs

--dialog-padding 12px 6/29

--dialog-radius 16px 6/29

Interface scale

--ui-scale-docsidebar 1 6/29

--ui-scale-menus 1 6/29

--ui-scale-sidebar 1 6/29

--ui-scale-tabs 1 6/29

--ui-scale-toolbar 1 6/29

--ui-scale-tooltips 1 6/29

Typography

--dialog-title-font 'Lora', serif 6/29

--editor-font 'EB Garamond', serif 6/29

--editor-zoom 120% 6/29

--interface-font 'Inter Variable', sans-serif 6/29

--tab-font 'Inter Variable', sans-serif 6/29

--base-font-size 14px 3/29

--heading-font-size 18px 3/29

--label-font-size 13px 2/29

--small-font-size 12px 2/29

--font-help 'Source Sans Variable', sans-serif none

Buttons

--button-font-size 14px 2/29

--button-primary-background linear-gradient(135deg, var(--button-primary-first-color), var(--button-primary-second-color)) derived 2/29

--button-delete-first-color #e74c3c none

--button-delete-hover-second-color #a93226 none

--button-delete-second-color #c0392b none

--button-primary-first-color var(--accent-color) derived none

--button-primary-second-color var(--accent-color-hover) derived none

--button-primary-text var(--dark-bg) derived none

--button-secondary-first-color var(--dark-tertiary) derived none

--button-secondary-second-color var(--dark-quaternary) derived none

--button-secondary-text blue none

AI chat

--chat-code-bar-bg color-mix(in srgb, var(--text-primary) 6%, transparent) derived none

--chat-code-bg var(--dark-bg) derived none

--chat-code-border var(--border-color) derived none

--chat-inline-code-bg color-mix(in srgb, var(--text-primary) 10%, transparent) derived none

--chat-table-header-bg color-mix(in srgb, var(--text-primary) 6%, transparent) derived none

Badges

--badge-danger-bg #f8d7da none

--badge-danger-text #721c24 none

--badge-default-bg #e2e3e5 none

--badge-default-text #383d41 none

--badge-success-bg #d4edda none

--badge-success-text #155724 none

--badge-warning-bg #fff3cd none

--badge-warning-text #856404 none

Connection LED

--led-connected-color #4ade80 none

--led-disconnected-color #ef4444 none

Diff and history

--diff-added-color #6f9e6a none

--diff-conflict-warning var(--warning-color) derived none

--diff-mine #4FB3AF none

--diff-removed-color #b8604f none

--diff-theirs var(--accent-color) derived none

--snapshot-auto-color #5a86b0 none

--snapshot-warn-color #d9a441 none

File tree

--tree-icon-emoji-size 14px none

--tree-icon-project-size 16px none

--tree-icon-size 18px none

--tree-node-approved #8BC34A none

--tree-node-doc #4DD0E1 none

--tree-node-draft #FFD54F none

--tree-node-error #F06292 none

--tree-node-file #DEB887 none

--tree-node-file-name 12px none

--tree-node-finished #81C784 none

--tree-node-first-version var(--text-primary) derived none

--tree-node-folder-name 13px none

--tree-node-review #FFB74D none

Legacy aliases

--color-accent #FF6B6B none

--color-bg #373E40 none

--color-editor-background silver none

--color-editor-color black none

--color-editor-subbar-background #2f2f2f none

--color-editor-subbar-color grey none

--color-editor-toolbar-background #2f2f2f none

--color-editor-toolbar-buttons-background silver none

--color-primary #5C6AC4 none

--color-sidebar-background #2f2f2f none

--color-sidebar-buttons-background #2f2f2f none

--color-surface #2C2C2E none

--color-text #E5E5E5 none

--color-text-muted #A0A0A0 none

--color-toolbar-background #2f2f2f none

--color-toolbar-submenu-background #2f2f2f none

--mat-datepicker-calendar-date-outline-color var(--border-color) derived none

--mat-datepicker-calendar-date-text-color var(--text-primary) derived none

--os-accent-color #{color.adjust(#0078d7, $alpha: -0.7)} none

Menus

--menu-bar-background linear-gradient(180deg, var(--menu-bar-background-first-color) 0%, var(--menu-bar-background-second-color) 100%) derived none

--menu-bar-background-first-color var(--dark-quaternary) derived none

--menu-bar-background-second-color var(--dark-menu) derived none

--submenu-item-checked var(--accent-color) derived none

--submenu-item-checked-hover var(--accent-color-hover) derived none

--submenu-item-text var(--text-primary) derived none

--submenu-item-text-icons var(--accent-color-hover) derived none

--submenu-item-text-shortcut var(--text-secondary) derived none

Other

--card-bg var(--dark-secondary) derived none

--link-external-color #60a5fa none

--metric-grid-color color-mix(in srgb, var(--text-secondary) 22%, transparent) derived none

--metric-series-1 #3987e5 none

--metric-series-2 #d95926 none

--metric-series-3 #199e70 none

--scene-type-dream #7c3aed none

--scene-type-epilogue #374151 none

--scene-type-flashback #dc2626 none

--scene-type-interlude #0891b2 none

--scene-type-main-continuity #2563eb none

--scene-type-memory #d97706 none

--scene-type-montage #be123c none

--scene-type-prologue #4b5563 none

--scene-type-vision #059669 none

--warning-color #d9a441 none

--win-caption-active-bg color-mix(in srgb, var(--text-primary) 4%, transparent) derived none

--win-caption-btn-width 46px none

--win-caption-close-active-bg color-mix(in srgb, #c42b1c 90%, transparent) none

--win-caption-close-bg #c42b1c none

--win-caption-hover-bg color-mix(in srgb, var(--text-primary) 6%, transparent) derived none

--window-control-rest-bg color-mix(in srgb, var(--text-primary) 12%, transparent) derived none

--window-frame-border rgba(0, 0, 0, 0.6) none

--window-frame-highlight rgba(255, 255, 255, 0.07) none

--worldbuilding-color #a97fb0 none

Safe areas

--extra-margin-bottom 0px none

--extra-margin-left 0px none

--extra-margin-right 0px none

--extra-margin-top 0px none

--safe-area-bottom calc(env(safe-area-inset-bottom, 0px) + var(--extra-margin-bottom, 0px)) derived none

--safe-area-left calc(env(safe-area-inset-left, 0px) + var(--extra-margin-left, 0px)) derived none

--safe-area-right calc(env(safe-area-inset-right, 0px) + var(--extra-margin-right, 0px)) derived none

--safe-area-top calc(env(safe-area-inset-top, 0px) + var(--extra-margin-top, 0px)) derived none

Status colours

--error-color #dc3545 none

--info-color #5a86b0 none

--success-color #4caf50 none

--user-preset-color #6f9e6a none

Sync status

--sync-status-cloud-ahead #4DD0E1 none

--sync-status-conflict #F06292 none

--sync-status-local-ahead #E0A93D none

--sync-status-neutral var(--text-tertiary) derived none

--sync-status-synced #81C784 none

The built-in themes

The evidence behind the counts above. Each ships as a JSON file of variable assignments, which is why this page can state what a theme is expected to declare without anyone deciding it.

Theme	Category	Variables set
OLED Black	advanced	41
Catppuccin Mocha	advanced	39
Manuscript	advanced	39
Rosé Pine	advanced	39
Solarized Dark	advanced	39
Solarized Light	advanced	39
High Visibility Sepia	uncategorised	33
High Visibility Sepia Dark	uncategorised	33
Artic frost	uncategorised	26
Default dark theme	uncategorised	26
Default light theme	uncategorised	26
Desert sunset	uncategorised	26
Ember Nights	uncategorised	26
Forest serenity	uncategorised	26
Forest Writer	uncategorised	26
Midnight Forest	uncategorised	26
Midnight nebula	uncategorised	26
Monochrome	uncategorised	26
Monochrome Dark	uncategorised	26
Monochrome Sepia	uncategorised	26
Monochrome Sepia Dark	uncategorised	26
Monochrome Soft	uncategorised	26
Mystic Purple	uncategorised	26
Retro arcade	uncategorised	26
Vampyr Theme	uncategorised	26
GNOME Adwaita	uncategorised	23
macOS	uncategorised	23
Windows 11	uncategorised	23
Native OS Colors	uncategorised	1

A theme file of your own is capped at 500 KB. See Making a theme for the file layout, and Publishing a theme for how it reaches other people.