Insomnia logo
  • Documentation
  • Get Started for Free
    • Introduction to Insomnia
    • Install Insomnia
    • Send Your First Request
    • Import and Export Data
    • Environment Variables
    • Global Environments
    • Insomnia Accounts
    • Forgotten Passphrase
    • Managing E2EE (End-to-End Encryption)
    • Organizations
    • Enable Enterprise membership
    • Configuring EE SSO
    • Integrating Insomnia Enterprise with Okta SAML 2.0
    • Integrating Insomnia Enterprise with Okta OpenID Connect
    • Integrating Insomnia Enterprise with Microsoft Azure/Entra ID SAML 2.0
    • Insomnia Whitelisting Guide for Enterprise Users
    • Transfer enterprise organizations and license
    • Configuring SCIM
    • Multiple Owners
    • Manage Domains
    • Invite Controls
    • Storage Controls
    • Session Report
    • Insomnia Subscriptions
    • Insomnia Subscription Management
    • Scratch Pad Tutorial
    • Requests
    • Responses
    • Request Collections
    • Request Timeouts
    • Chaining Requests
    • Post CSV Data
    • SOAP Requests
    • gRPC
    • WebSocket Support
    • Get Started with Documents
    • Design Documents
    • Linting
    • GraphQL for OpenAPI
    • Migrate from Designer
    • Unit Testing
    • Stress Testing
    • Insomnia Storage Options Guide
    • Sync with Insomnia Cloud
    • Sync with Git
    • Key Security Features
    • Security Standards
    • Signup and Authentication
    • Analytics Collected
    • End to End Data Encryption
    • Software Bill of Materials
    • Verifying Build Provenance for Signed Insomnia Binaries
    • Authentication
    • Client Certificates
    • Collection Runner
    • Generate Code Snippet
    • Cookie Management
    • Encoding
    • GraphQL Queries
    • Run in Insomnia Button
    • Key Maps
    • Proxy
    • Folder-level settings
    • Introduction to Plugins
    • Context Object Reference
    • Template Tags
    • Hooks and Actions
    • Custom Themes
    • AI Runner
    • FAQ
    • Application Data
    • SSL Validation
    • Password Recovery
    • Introduction to Inso CLI
    • Install Inso CLI
    • CLI Command Reference
      • inso run test
      • inso run collection
      • inso lint spec
      • inso export spec
      • inso script
      • Using Custom Linting with Inso CLI
    • Configuration
    • Inso CLI on Docker
    • Software Bill of Materials
    • Verifying Signatures for Signed Inso CLI Images
    • Verifying Inso CLI Build Provenance
      • Verifying Build Provenance for Signed Inso CLI Images
      • Verifying Build Provenance for Signed Inso CLI Binaries
    • Continuous Integration
    • Insomnia Pre-request Script Overview
    • Insomnia After-Response Script Overview
    • Secret Environment Variables
    • External Vault Integration (Enterprise feature)
    • Insomnia API Mocking Overview
    • Enterprise Login Report

Custom Themes

Make a custom Insomnia theme by creating an Insomnia plugin.

Note: To get started with some live examples, see our built-in insomnia-plugin-themes module.

How to Build a Custom Theme

  1. Create a new project for your theme. If you plan to make this theme available via NPM, start your project name with insomnia-plugin-. The following example is called insomnia-plugin-dark-colorblind-theme.

  2. Following plugin instructions, write your plugin package.json. In your entry file, export your theme(s).

  3. Start with a baseline template. Each section of the configuration has background, foreground, and highlight properties, with modifiable color properties.

See the code comments for more information about which color property names correspond with which UI elements.

Note: The code comments below are not comprehensive and styles may apply elsewhere.

module.exports.themes = [{
  name:        'dark-colorblind', // theme name in kebab-case
  displayName: 'Dark Colorblind', // formatted theme name
  theme: {
    // Background, foreground, and highlight values nested directly in the theme 
    // object will serve as the default overwrites for all properties you add.
    background: {
      default:    '#21262D',  // primary background color
      success:    '#1F6FEB',  // POST request, 200 OK, parameter names
      notice:     '#E8F086',  // PATCH request
      warning:    '#A691AE',  // PUT request
      danger:     '#FF4242',  // DELETE request
      surprise:   '#FFC20A',  // accent (Dashboard link, GET request, 
                              // SEND button, branch button, add plugin button)
      info:       '#58A6FF'   // OPTIONS AND HEAD request
    },
    foreground: {
      default:     '#fff',    // primary font color
      success:     '#fff',    // secondary font color for success background
      notice:      '#000',    // secondary font color for notice background
      warning:     '#fff',    // secondary font color for warning background
      danger:      '#fff',    // secondary font color for danger background
      surprise:    '#000',    // secondary font color for surprise background
      info:        '#000'     // secondary font color for info background
    },
    highlight: {
      default: '#D3D3D3'      // sidebar highlight color
    },
    // The styles object targets sub-components of the Insomnia application.
    styles: {
      appHeader: {
        foreground: {
          surprise:   '#000'  // header branch button font color
        }
      },
      paneHeader: {
        foreground: {
          surprise:   '#000', // pane accent font color
          info:       '#000'  // pane response font color
        }
      },
      editor: {
        foreground: {
          default:    '#000', // primary editor font color
          surprise:   '#000', // editor accent font color
          info:       '#000'  // editor response font color
        }
      },
      dialog: {
        background: {
          default:    '#2E4052' // modal primary background color
        },
        foreground: {
          default:    '#fff'    // modal primary font color
        }
      }
    }
  }
}]

Styles Parameters

The following style properties are available. Each of these can hold their own background, foreground, and highlight properties.

  • appHeader
  • dialog
  • dialogFooter
  • dialogHeader
  • dropdown
  • editor
  • link
  • overlay
  • pane
  • paneHeader
  • sidebar
  • sidebarHeader
  • sidebarList
  • tooltip
  • transparentOverlay

Custom CSS

In addition to baseline edits and sub-components, you can add custom CSS using the rawCss property.

Note: Generally, opt to use predefined properties to customize your theme rather than using custom CSS. This ensures that your theme will not break in the future as we make changes to Insomnia.

module.exports.themes = [{
  name: 'my-dark-theme',
  displayName: 'My Dark Theme',
  theme: {
      rawCss: `
      .tooltip, .dropdown__menu {
        opacity: 0.95;
      }
    `,
  },
}];

Theme Plugin Schema

The following defines the theme plugin schema. If a property is not set, it will use the Insomnia default.

interface ThemeBlock {
  background?: {
    default?: string,
    success?: string,
    notice?: string,
    warning?: string,
    danger?: string,
    surprise?: string,
    info?: string,
  },
  foreground?: {
    default?: string,
    success?: string,
    notice?: string,
    warning?: string,
    danger?: string,
    surprise?: string,
    info?: string,
  },
  highlight?: {
    default: string,
    xxs?: string,
    xs?: string,
    sm?: string,
    md?: string,
    lg?: string,
    xl?: string,
  },
};

interface ThemeInner extends ThemeBlock {
  rawCss?: string,
  styles: ?{
    dialog?: ThemeBlock,
    dialogFooter?: ThemeBlock,
    dialogHeader?: ThemeBlock,
    dropdown?: ThemeBlock,
    editor?: ThemeBlock,
    link?: ThemeBlock,
    overlay?: ThemeBlock,
    pane?: ThemeBlock,
    paneHeader?: ThemeBlock,
    sidebar?: ThemeBlock,
    sidebarHeader?: ThemeBlock,
    sidebarList?: ThemeBlock,
    tooltip?: ThemeBlock,
    transparentOverlay?: ThemeBlock,
  },
};
Edit this page
Report an issue
    COMPANY
  • Insomnia
  • Blog
  • Changelog
  • Pricing
  • Careers
    PRODUCTS
  • Insomnia
  • Inso (CLI)
    RESOURCES
  • Sign In
  • Documentation
  • Support
    LEGAL
  • Privacy Policy
  • Terms & Conditions
© Kong Inc. 2021