🎨Customize the docs
Light/dark toggle on the docs
To show a light/dark mode toggle on your published docs (e.g. docs.onraven.com):
In GitBook, open your space and go to Publish → Customization (or Customize).
Open the Modes section.
Set Show mode toggle to On. Save.
The toggle will appear at the bottom of every published page (footer area), on both desktop and mobile. Readers can use it to switch between light and dark mode.
If you don’t see the toggle: You’re likely in the GitBook editor instead of the published site. Open the public docs URL (e.g. docs.onraven.com) and check the bottom of the page. If it’s still missing, confirm Show mode toggle is On in Customization → Modes and do a hard refresh (Ctrl+F5 or Cmd+Shift+R).
Customizing your OnRaven docs (GitBook)
Use this guide to get a minimalist, comfortable look that matches the OnRaven app (same colors and typography) for your published docs. All of these settings are applied in GitBook’s Customization panel, not in this repo.
Official docs: Site customization · Icons, colors, and themes
OnRaven app colors (use these in GitBook)
These values come from the app's design system (apps/webapp/src/theme.ts) so the docs feel consistent with the product.
Primary color
#3B82F6
Electric Blue (primary accent)
Tint color (optional)
#2563EB or #60A5FA
Primary hover / blue 400
Dark background (reference)
#0B1120
Midnight Void
Light background (reference)
#F8FAFC
Cloud Mist
Font: The app uses Inter for UI and body text. If your GitBook plan supports custom fonts, choose Inter for a perfect match.
Where to customize
Open your GitBook space (the one synced to this repo).
Go to Publish (or your site) → Customization (or Customize).
Use the options below. Changes apply to the published site; the GitBook editor UI stays unchanged.
Recommended settings for minimalist, comfortable reading
Theme
Theme: Clean or Muted
Clean — Modern, minimal styling, translucency. Best default for “minimalist.”
Muted — Softer contrast, more pronounced background; good if you want a calmer feel.
Avoid Bold/Gradient unless you want a stronger brand look (Premium/Ultimate).
Colors (OnRaven brand)
Primary color —
#3B82F6(Electric Blue). This affects links, current page, and key UI in the docs and matches the app.Tint color —
#2563EB(darker blue, app primary-hover) or#60A5FA(lighter blue) for a softer text/icon tint. Use GitBook’s suggestions based on primary if you prefer.Semantic colors (hint blocks) — Keep defaults or soften so info/warning/success blocks don’t clash with the blue.
Icon style (minimalist icons)
Site styles → Icons
Choose a lighter weight / more minimal style (e.g. “Light” or “Thin” if available). GitBook offers several icon weights; pick the one that looks clean and consistent.
This affects how page icons look in the sidebar and in the published site.
Note: Icon style is available on Premium and Ultimate plans. On other plans, the default icon set still applies.
Fonts (Premium / Ultimate) — match the app
Font family — Inter (the same font as the OnRaven app:
theme.fontFamily.sansinapps/webapp/src/theme.ts). Keeps docs and product visually consistent.Custom fonts (Ultimate) — If you upload your own font, use Inter (or match the app's font stack) so the docs align with the product.
Layout and links
Corner style — Rounded for a softer, more approachable look.
Link style — Accent (underline only) keeps the layout clean; Default (full highlight) is fine if you prefer.
Modes (light / dark)
Show mode toggle — On, so readers can switch between light and dark.
Default mode — Light for general comfort, or Dark if your audience prefers it.
Sidebar
Background style — Use the option that fits your theme (e.g. subtle or flat). Avoid heavy contrast so the sidebar doesn’t overpower the content.
List style — Pick a style that makes the current page and hierarchy clear without looking busy.
Page icons (sidebar)
Page icons are set per page in GitBook: click the icon picker next to the page title in the editor (or in the page settings).
For a minimalist look, use a small set of simple icons (e.g. one style, light weight) and use them consistently (e.g. same icon type for “Getting started” pages, another for “Reference”).
GitBook’s picker includes many icons and emojis; stick to one family so the sidebar feels cohesive.
Quick checklist
What you can’t change (GitBook limits)
You can’t change the layout of elements (only hide some on specific pages).
You can’t inject custom CSS/HTML/JS.
The “Powered by GitBook” link cannot be removed.
For more detail and screenshots, see Site customization and Icons, colors, and themes.
Last updated
Was this helpful?