Insomnia logo
  • Documentation
  • Download
  • Upgrade
    • Introduction to Insomnia
    • Install Insomnia
    • Send Your First Request
    • Import and Export Data
    • Environment Variables
    • Insomnia Workspaces
    • Insomnia Accounts
    • Forgotten Passwords
    • Change Password
    • Insomnia Teams
    • Insomnia Subscriptions
    • Insomnia Subscription Management
    • 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
    • Sign into Insomnia Cloud
    • Sync Collections with Insomnia Cloud
    • Teams
    • End to End Data Encryption
    • Sync with Git
    • Key Security Features
    • Security Standards
    • Signup and Authentication
    • Analytics Collected
    • Authentication
    • Client Certificates
    • Generate Code Snippet
    • Cookie Management
    • Encoding
    • GraphQL Queries
    • Run in Insomnia Button
    • Key Maps
    • HTTP(S) Proxy
    • Insomnia Configuration File
    • Introduction to Plugins
    • Context Object Reference
    • Template Tags
    • Hooks and Actions
    • Custom Themes
    • FAQ
    • Application Data
    • SSL Validation
    • Password Recovery
    • Introduction to Inso CLI
    • Install Inso CLI
    • CLI Command Reference
      • inso generate config
      • inso run test
      • inso lint spec
      • inso export spec
      • inso script
      • OpenAPI Spec Reference
    • Configuration
    • Inso CLI on Docker
    • Continuous Integration
    • Publish API to Dev Portal
    • Kong Declarative Config (for decK)
    • Kong for Kubernetes

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