Themes & custom CSS

Built-in themes

Inkspace has two independent theme settings, both in Settings → Reading:

Setting	Options
App theme	Default — the original cozy look · Dark — deeper, based on the reader palette · Sepia — warm paper tones · Light — clean and bright
Reader theme	Dark, sepia or light paper for story pages

Custom CSS themes

Under Custom CSS theme, drag and drop or upload .css files. Inkspace saves them to your account, and you choose:

• one file to Apply to app theme, and
• one file to Apply to reader theme.

You can keep up to 12 custom CSS files, each up to 200 KB. Custom themes only affect your own account.

Example: Polar Night

Most colors are CSS variables, so a theme is mostly a list of overrides. Save this as polar-night.css, change the colors, and upload it:

:root,
.app-theme-default,
.app-theme-dark,
.app-theme-sepia,
.app-theme-light {
  --background: #2e3440;
  --foreground: #d8dee9;
  --card: #3b4252;
  --card-foreground: #e5e9f0;
  --popover: #3b4252;
  --popover-foreground: #e5e9f0;
  --primary: #88c0d0;
  --primary-foreground: #2e3440;
  --secondary: #434c5e;
  --secondary-foreground: #e5e9f0;
  --muted: #3b4252;
  --muted-foreground: #aeb6c3;
  --accent: #4c566a;
  --accent-foreground: #eceff4;
  --border: #4c566a;
  --input: #4c566a;
  --ring: #88c0d0;
}

/* Remove the built-in paper backgrounds. */
html,
body,
body.app-theme-default,
body.app-theme-dark,
body.app-theme-sepia,
body.app-theme-light,
body.reader-theme-dark,
body.reader-theme-sepia,
body.reader-theme-light {
  background-image: none !important;
  background-color: #2e3440 !important;
}

.reader-theme-dark,
.reader-theme-sepia,
.reader-theme-light {
  --reader-background: #2e3440;
  --reader-background-image: none;
  --reader-foreground: #d8dee9;
}

.reader-background-layer {
  background: none !important;
  opacity: 0 !important;
}

The full example, including reader navigation colors, is available in the app under Settings → Reading → Custom CSS theme → Example .css file.

Useful variables

Variable	Affects
--background, --foreground	Page background and main text
--card, --popover	Cards, menus and dialogs
--primary	Buttons, links and highlights
--muted, --muted-foreground	Subtle backgrounds and secondary text
--border, --input, --ring	Borders, form fields and focus rings
--reader-background	Story page background
--reader-foreground	Story text
--reader-background-image	Paper texture on story pages