Isomer Guide (Legacy sites)
UpdatesOfficial WebsiteGithub Repository
  • Introduction
  • Accounts & Setup
    • Github Account Setup
      • Set up 2FA
    • Site Access
  • Get started
    • Your first edit
    • Create a new page
    • Create a new collection
    • Format your content
      • HTML cheatsheet
      • Markdown cheatsheet
    • Page config
  • Configurations
    • Config.yml file
      • Site color
    • Homepage
      • Basics
      • Hero Banner
      • Infobar
      • Infopic
      • Resources
      • Sample configuration
    • Pages
      • Configuration
      • Second and Third Level Navigation Pages
    • Navigation Bar
      • Configuration
    • Resources
      • Setup
      • Posts
      • Resources with v2 migration
    • Contact Us
      • Configuration
    • Footer
  • Features
    • Analytics and tracking
      • WOGAA
      • Google Analytics
      • Facebook Pixel
      • LinkedIn Insights
    • IsomerSSL
    • Content Recommender
  • Publish your changes
    • Overview
    • Creating a pull request
    • Approve a pull request
    • Merge a pull request
    • Site Launch
      • How to make records changes on ITSM?
  • Frequently Asked Questions (FAQ)
    • General
    • Security
    • Pull requests
    • Digital KPI
    • Migration v1 to v2
  • Updates
Powered by GitBook
On this page
  • How to change your site colors
  • IsomerCMS users

Was this helpful?

  1. Configurations
  2. Config.yml file

Site color

PreviousConfig.yml fileNextHomepage

Last updated 4 years ago

Was this helpful?

Each Isomer website has two main colors, a primary color and a secondary color.

The primary color is displayed in the following elements:

  • the notifications banner in the homepage

  • the hero banner button in the homepage

  • font colors for headers

  • underlined and highlighted text colors

The secondary color is displayed in the following elements:

  • the key highlights buttons in the homepage

  • the page banner in the inner website pages (all except the homepage)

Note: If you are picking a new primary or secondary color for your Isomer website, please ensure that the color fulfills the minimum color contrast ratio of 4.5 for accessibility.

How to change your site colors

Sample configuration:

// Website brand colors
$primary: #6031b6;
$secondary: #4372d6;
$secondary-hover: darken(#4372d6, 20%);

To change the resource room colors, edit the $media-color-... values in the same file (misc/custom.scss):

// Resources page colors
$media-color-one: #49759a;
$media-color-two: #744d9f;
$media-color-three: #00838f;
$media-color-four: #00838f;
$media-color-five: #00838f;

IsomerCMS users

If you're using IsomerCMS, your color configuration will be determined on config.yml file.

Please ensure your color palette provides sufficient contrast using the . If you have any questions regarding this, please reach out to us via Slack or email us at

The color is set in misc/custom.scss. You will find these 3 values in the file: $primary, $secondary, and $secondary-hover. Adjust the for these 3 values accordingly. Note that the semicolon (;) is required at the end of each line.

color contrast checker
support@isomer.gov.sg
hex codes