Squeegee Portal
  • Introduction
  • Getting started
  • Integrating the Widgets
  • Common Issues
  • Available Components
    • Component Previewer
    • Today's Appointment
    • Upcoming Appointments
    • Appointment History
    • Financial History
    • My Ratings
    • Chat
    • Automatic Payments
    • All Quotes
    • Book Appointment
    • Welcome Card
    • Address Search
    • Profile
    • Edit Profile Button
    • Stripe Pre-pay
    • Quote Flow
    • Sign-in
    • Sign-out
  • Appearance
    • Themes
    • Custom Themes
  • Utils
    • refreshPortal
  • Migrating Old Layouts
Powered by GitBook
On this page
  • Using the built-in theme editor
  • Advanced theming

Was this helpful?

  1. Appearance

Custom Themes

Learn how to take advantage of the advanced theming capabilities.

PreviousThemesNextrefreshPortal

Last updated 1 year ago

Was this helpful?

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

Here are some useful sites:

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.

Under the hood, we are leveraging '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.

: A tool to help design and customize themes for the Material UI component library.

: The Material palette generator can be used to generate a palette for any color you input.

Material-UI
mui-theme-creator
Material palette generator
The theme editor dialog.
The raw theme editor