Custom Themes
Learn how to take advantage of the advanced theming capabilities.
Parts of this document assume you already have a solid understanding of basic Web Development technologies such as JavaScript, React, HTML & CSS.
Using the built-in theme editor
From the Portal Directory screen, you'll notice the edit theme button in the context menu. Clicking on this will show a new screen listing existing custom themes and our theme presets, along with all the palette, font and shape settings.
Advanced theming
Under the hood, we are leveraging Material-UI's fantastic theming system, meaning you can upload any existing MUI Theme, or create a new one with one of the many community theme editors available.
Here are some useful sites:
mui-theme-creator: A tool to help design and customize themes for the Material UI component library.
Material palette generator: The Material palette generator can be used to generate a palette for any color you input.
Raw Theme Editor
Available to you in the top right of the edit theme dialog, is an option to toggle the raw code editor for your theme. This will present you with the theme's JSON, where you can modify your theme to a much greater extent. We've had success replicating entire website themes, so we can't wait to see what our users will create!
Remember, using the raw theme editor requires a good understanding of JSON and the Material UI theme structure. However, it provides unparalleled flexibility in theme customisation, allowing you to tweak colours, typography, spacing, and other design elements to perfectly match your company's branding.
Last updated
Was this helpful?