Themes#

Inkstone renders documentation with Blade views and package CSS/JavaScript assets.

The default theme is responsive, supports dark mode, includes client-side search, adds copy controls, and renders sticky sidebar navigation.

Built-In Theme Structure#

Theme assets are split into two parts:

resources/css/inkstone.css
resources/css/themes/default.css
resources/css/themes/light.css
resources/css/themes/dark.css
resources/css/themes/ember.css
resources/css/themes/forest.css
resources/js/inkstone.js
resources/views/themes/default/page.blade.php
resources/views/themes/default/partials/navigation-item.blade.php

inkstone.css contains base layout, component, and interaction styles.

themes/<theme>.css contains color, font, shadow, and variable values.

Available Theme Variants#

Inkstone ships these CSS theme variants:

Set the active variant:

'theme' => [
    'name' => 'forest',
    'layout' => 'default',
],

theme.name chooses the CSS variable file. theme.layout chooses the Blade layout. The included variants all use the default layout unless you publish or provide another layout.

For example, this uses the Ember colors with the default documentation layout:

'theme' => [
    'name' => 'ember',
    'layout' => 'default',
],

Dark Mode#

The default theme supports:

• system mode
• light mode
• dark mode
• local storage persistence
• sun, moon, and system icons

Configure the default mode:

'theme' => [
    'default_mode' => 'system',
],

Valid values are system, light, and dark.

Syntax Highlighting#

Inkstone uses Phiki for build-time syntax highlighting. This ensures zero runtime overhead and fast page loads.

Configure the syntax highlighter:

use Phiki\Theme\Theme;

'theme' => [
    'syntax_highlighting' => [
        'enabled' => true,
        'theme' => [
            'light' => Theme::GithubLight,
            'dark' => Theme::GithubDark,
        ],
        'show_line_numbers' => true,
        'copy_button' => true,
    ],
],

The light and dark themes are used automatically based on the current theme mode.

Publishing Views#

Inside Laravel, publish theme views:

php artisan vendor:publish --tag=inkstone-theme

Published views are written to:

resources/views/vendor/inkstone/themes/default

Laravel will load published views before package views.

To add a custom layout, create a matching layout directory and set theme.layout:

resources/views/vendor/inkstone/themes/modern/page.blade.php

'theme' => [
    'name' => 'default',
    'layout' => 'modern',
],

Publishing Assets#

Publish theme source assets:

php artisan vendor:publish --tag=inkstone-assets

Published assets are written to:

resources/inkstone/css
resources/inkstone/js

Branding#

Set explicit logo and favicon URLs:

'site' => [
    'favicon' => '/favicon.svg',
    'logo' => '/assets/logo.svg',
],

Or place files in the source docs directory and let Inkstone discover them:

docs/favicon.svg
docs/logo.svg

logo accepts a string or an array with separate light and dark variants:

'logo' => [
    'light' => '/assets/logo-light.svg',
    'dark' => '/assets/logo-dark.svg',
],

When an array is provided, the theme automatically switches between the two variants based on the current color mode.

The generator copies discovered files into the static output and updates the rendered theme config for that build.

Credits Footer#

The default theme renders a small credits footer below the page content:

'site' => [
    'footer' => [
        'enabled' => true,
        'text' => 'Built with Inkstone',
        'url' => 'https://mykemeynell.github.io/inkstone',
        'repository' => [
            'url' => env('INKSTONE_GITHUB_REPOSITORY', 'https://github.com/mykemeynell/inkstone'),
            'label' => 'Repository',
        ],
    ],
],

Set enabled to false to hide the footer, or change text and url to point to your own project. The repository link can be removed by omitting or clearing repository.url. Customise the link text with repository.label.

CSS Custom Properties#

Each theme defines color, font, and shadow values as CSS custom properties on :root (light mode) and .dark (dark mode). These can be overridden in custom themes or per-page styles.

Typography#

Colors#

Shadows#

Keyboard Shortcuts#

Syntax Highlighting (Dark Mode)#

These properties control Phiki syntax highlighting in dark mode:

Demo Code Blocks#

Theme JavaScript#

The default JavaScript handles:

• mobile sidebar toggling
• collapsible navigation sections with localStorage persistence
• theme mode switching with animation
• code copy buttons (subtle appearance)
• heading link copy buttons
• active table-of-contents tracking
• configurable search trigger (input box or icon button)
• global search keyboard shortcut (⌘K / Ctrl+K)
• search ranking and highlighting
• back-to-top behavior