Skip to content
2023 API Summit Hackathon: Experiment with AI for APIs (August 28 - September 27) Learn More →
Kong Logo | Kong Docs Logo
search
  • We're Hiring!
  • Docs
    • Kong Gateway
      Lightweight, fast, and flexible cloud-native API gateway
      Kong Konnect
      Single platform for SaaS end-to-end connectivity
      Kong Mesh
      Enterprise service mesh based on Kuma and Envoy
      decK
      Helps manage Kong’s configuration in a declarative fashion
      Kong Ingress Controller
      Works inside a Kubernetes cluster and configures Kong to proxy traffic
      Kong Gateway Operator
      Manage your Kong deployments on Kubernetes using YAML Manifests
      Insomnia
      Collaborative API development platform
      Kuma
      Open-source distributed control plane with a bundled Envoy Proxy integration
  • API Specs
  • Plugin Hub
    • Explore the Plugin Hub
      View all plugins View all plugins View all plugins arrow image
    • Functionality View all View all arrow image
      View all plugins
      Authentication's icon
      Authentication
      Protect your services with an authentication layer
      Security's icon
      Security
      Protect your services with additional security layer
      Traffic Control's icon
      Traffic Control
      Manage, throttle and restrict inbound and outbound API traffic
      Serverless's icon
      Serverless
      Invoke serverless functions in combination with other plugins
      Analytics & Monitoring's icon
      Analytics & Monitoring
      Visualize, inspect and monitor APIs and microservices traffic
      Transformations's icon
      Transformations
      Transform request and responses on the fly on Kong
      Logging's icon
      Logging
      Log request and response data using the best transport for your infrastructure
  • Support
  • Community
  • Kong Academy
Get a Demo Start Free Trial
Kong Gateway
3.4.x (latest)
  • Home icon
  • Kong Gateway
  • Kong Enterprise
  • Dev Portal
  • Themes Files
github-edit-pageEdit this page
report-issueReport an issue
  • Kong Gateway
  • Kong Konnect
  • Kong Mesh
  • Plugin Hub
  • decK
  • Kong Ingress Controller
  • Kong Gateway Operator
  • Insomnia
  • Kuma

  • Docs contribution guidelines
  • 3.4.x (latest)
  • 3.3.x
  • 3.2.x
  • 3.1.x
  • 3.0.x
  • 2.8.x
  • 2.7.x
  • 2.6.x
  • Archive (pre-2.6)
enterprise-switcher-icon Switch to OSS
On this pageOn this page
  • Theme files
    • Themes directory structure
  • Theme assets
    • Path
    • Description
  • Theme layouts
    • Path
    • Description
  • Theme partials
    • Path
    • Description
  • Theme configuration file
    • Path
    • Description

Themes Files

Theme files

Themes directory structure

Theme files allow you to determine the look and feel of the Dev Portal using HTML, CSS, and JavaScript. The theme directory contains different instances of portal themes. The theme that is used during rendering is determined by configuring the theme.name in the portal.conf.yaml file. For example, if you set theme.name to best-theme, the Dev Portal loads theme files in themes/best-theme/**.

A theme file is composed of the following directories:

  • assets/: Contains static assets that layouts and partials reference during rendering. Includes CSS, JS, font, and image files.
  • layouts/: Contains HTML page templates that content references via the layout attribute in headmatter
  • partials/: Contains HTML partials that are referenced by layouts.
  • theme.conf.yaml: Sets the color and font defaults that are available to templates as CSS variables. It also determines which options are available on the Kong Manager appearance page.

Theme assets

Path

  • format: theme/*/assets/**/*

Description

The asset directory contains CSS, JavaScript, fonts, and images for your templates to reference.

To access asset files from your templates, keep in mind that Kong Gateway assumes a path from the root of your selected theme.

Asset Path HREF Element
themes/light-theme/assets/images/image1.jpeg <img src="assets/images/image1">
themes/light-theme/assets/js/my-script.js <script src="assets/js/my-script.js"></script>
themes/light-theme/assets/styles/my-styles.css <link href="assets/styles/normalize.min.css" rel="stylesheet" />

Note: Image files uploaded to the theme/*/assets/ directory should either be a svg text string or base64 encoded. base64 images are decoded when served.

Theme layouts

Path

  • format: theme/*/layouts/**/*
  • file extensions: .html

Description

Layouts act as the HTML skeleton of the page you want to render. Each file in the layouts directory must have an html file type. They can exist as vanilla html or reference partials and parent layouts via the portals templating syntax. Layouts also have access to the headmatter and body attributes set in content.

This example shows what a typical layout can look like:

<div class="homepage">
  {(partials/header.html)}       <- syntax for calling a partial within a template
  <div class="page">
    <div class="row">
      <h1>{{page.title}}</h1>    <- 'title' retrieved from page headmatter
    </div>
    <div class="row">
      <p>{{page.body}}</p>       <- 'body' retrieved from page body
    </div>
  </div>
  {(partials/footer.html)}
</div>

To learn more about the templating syntax used in this example, see the template guide.

Theme partials

Path

  • format: theme/*/partials/**/*
  • file extensions: .html

Description

Partials are very similar to layouts: they share the same syntax, can call other partials within themselves, and have access to the same data/helpers during rendering. Partials are differentiated from layouts in that layouts call on partials to build the page, but partials cannot call on layouts.

This example shows the header.html partial referenced from previous example:

<header>
  <div class="row">
    <div class="column">
      <img src="{{page.logo}}">      <- can access the same page data the parent layout
    </div>
    <div class="column">
      {(partials/header_nav.html)}   <- partials can call other partials
    </div>
  </div>
</header>

Theme configuration file

Path

  • format: theme/*/theme.conf.yaml
  • file extensions: .yaml

Description

The theme configuration file determines color, font, and image values that a theme makes available to templates and CSS during rendering. It is required in the root of every theme. There can only be one theme configuration file. It must be named theme.conf.yaml and it must be a direct child of the themes root directory.

Thank you for your feedback.
Was this page useful?
Too much on your plate? close cta icon
More features, less infrastructure with Kong Konnect. 1M requests per month for free.
Try it for Free
  • Kong
    THE CLOUD CONNECTIVITY COMPANY

    Kong powers reliable digital connections across APIs, hybrid and multi-cloud environments.

    • Company
    • Customers
    • Events
    • Investors
    • Careers Hiring!
    • Partners
    • Press
    • Contact
  • Products
    • Kong Konnect
    • Kong Gateway
    • Kong Mesh
    • Get Started
    • Pricing
  • Resources
    • eBooks
    • Webinars
    • Briefs
    • Blog
    • API Gateway
    • Microservices
  • Open Source
    • Install Kong Gateway
    • Kong Community
    • Kubernetes Ingress
    • Kuma
    • Insomnia
  • Solutions
    • Decentralize
    • Secure & Govern
    • Create a Dev Platform
    • API Gateway
    • Kubernetes
    • Service Mesh
Star
  • Terms•Privacy
© Kong Inc. 2023