Inside Theme — Appearance

Color Palette

Inside gives you fine-grained control over every color in the UI. All color fields accept any valid CSS color value: hex, rgb(), hsl(), etc.

appearance:
  accent_color: '#2a2b33'      # Interactive elements, links, highlights
  foreground_color: '#363636'  # Body text color
  border_color: '#e0e0e0'      # Borders and dividers
  background: '#f5f7fa'        # Page background
  sidebar_background: '#2a2b33' # Sidebar background (when opened)
  card_background: '#ffffff'    # Card/component background

All background fields support layered image + color syntax for subtle texture patterns:

# Pattern image on top of a solid color
appearance:
  background: '//www.toptal.com/designers/subtlepatterns/patterns/confectionary.png #f5f7fa'

# Or using CSS url() syntax
appearance:
  background: 'url(//www.toptal.com/designers/subtlepatterns/patterns/confectionary.png) #f5f7fa'

Content Width

Limit the maximum width of your main content area:

1 2	appearance: content_width: 640 # pixels, default is unconstrained

Fonts

Inside ships a carefully chosen font stack by default, but you can replace any or all of it.

appearance:
  font:
    # Google Fonts URL (loads font CSS)
    url: '//fonts.googleapis.com/css?family=Baloo+Bhaijaan|Inconsolata|Josefin+Sans|Montserrat'

    base: "'Josefin Sans', 'PingFang SC'"      # Body text
    logo: "'Baloo Bhaijaan', 'PingFang SC'"     # Site name in sidebar
    menu: "'Baloo Bhaijaan'"                     # Navigation menu items
    label: "'Montserrat'"                        # Counts, labels, TOC indices, badges
    heading: "'Josefin Sans'"                   # h1–h6 headings
    code: 'Inconsolata, monospace'              # Inline code and code blocks
    print: "'Josefin Sans'"                     # Print stylesheet font

Font settings cascade as fallbacks: if heading is unset, it falls back to base. If base is unset, it falls back to the browser default.

Syntax Highlighting

Inside uses the base16 color architecture. A base16 theme is an array of exactly 16 hex colors representing:

Index	Role
0–3	Background shades (lightest → darkest)
4–7	Foreground/muted text shades
8–15	Accent colors (used for syntax: strings, numbers, keywords, etc.)

The default theme is a customized Atelier Dune Light:

appearance:
  highlight:
    - '#f8f8f8'    # 0  background
    - '#e8e8e8'    # 1
    - '#d8d8d8'    # 2
    - '#b8b8b8'    # 3
    - '#585858'    # 4  comments / muted
    - '#383838'    # 5
    - '#282828'    # 6
    - '#181818'    # 7
    - '#ab4642'    # 8  red (strings, errors)
    - '#dc9656'    # 9  orange (numbers)
    - '#f7ca88'    # 10 yellow (titles, constants)
    - '#a1b56c'    # 11 green (keywords, types)
    - '#86c1b9'    # 12 cyan (functions, operators)
    - '#7cafc2'    # 13 blue (classes, namespaces)
    - '#ba8baf'    # 14 magenta (regex, special)
    - '#a16946'    # 15 brown (tags, attributes)

Preset Themes

Here are some ready-to-use base16 themes. To use one, copy the highlight array into your _config.inside.yml:

Tomorrow Night (dark):

highlight:
  - '#1d1f21' - '#282a2e' - '#373b41' - '#969896'
  - '#b4b7b4' - '#c5c8c6' - '#e0e0e0' - '#ffffff'
  - '#cc6666' - '#de935f' - '#f0c674' - '#b5bd68'
  - '#8abeb7' - '#81a2be' - '#b294bb' - '#a3685a'

Harmonic16 Light:

highlight:
  - '#f7f9fb' - '#e5ebf1' - '#cbd6e2' - '#aabcce'
  - '#627e99' - '#405c79' - '#223b54' - '#0b1c2c'
  - '#bf8b56' - '#bfbf56' - '#8bbf56' - '#56bf8b'
  - '#568bbf' - '#8b56bf' - '#bf568b' - '#bf5656'

Find more base16 themes at chriskempson/base16.

Dark Mode

Inside has a built-in dark mode. When enabled, all colors switch to the darkmode: palette. Users can toggle it via a button in the UI.

appearance:
  darkmode:
    accent_color: '#539bf5'
    foreground_color: '#adbac7'
    border_color: '#373e47'
    background: '#22272e'
    sidebar_background: '#22272e'
    card_background: '#2d333b'
    highlight:
      - '#2d333b' - '#444c56' - '#3e4451' - '#545862'
      - '#565c64' - '#abb2bf' - '#b6bdca' - '#c8ccd4'
      - '#e06c75' - '#d19a66' - '#e5c07b' - '#98c379'
      - '#56b6c2' - '#61afef' - '#c678dd' - '#be5046'

Dark mode is disabled by default. To enable it, set appearance.darkmode to any non-empty value (at minimum, accent_color). The rest of the dark palette has sensible defaults.

Next Steps

Sidebar → — Configure your profile, menu, and social links
Content Configuration → — TOC, pagination, rewards, and copyright

Link:
https://blog.oniuo.com/theme-inside/docs/appearance/

Buy me a cup of milk 🥛.

支