PHPackages                             toastnz/colourpalettes - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. toastnz/colourpalettes

ActiveSilverstripe-vendormodule[Utility & Helpers](/categories/utility)

toastnz/colourpalettes
======================

Silverstripe colour palettes module

6.0.6(5d ago)02.9k↑57.1%BSD-3-ClausePHPPHP >=8.3

Since Jan 5Pushed 2d ago2 watchersCompare

[ Source](https://github.com/toastnz/colourpalettes)[ Packagist](https://packagist.org/packages/toastnz/colourpalettes)[ RSS](/packages/toastnz-colourpalettes/feed)WikiDiscussions main Synced 3d ago

READMEChangelog (10)Dependencies (12)Versions (36)Used By (0)

ColourPalette Module
====================

[](#colourpalette-module)

This module allows you to manage and use colour palettes in your SilverStripe project.

### Installation

[](#installation)

To install the module, use Composer:

```
composer require toastnz/colourpalettes
```

### Adding and editing colours

[](#adding-and-editing-colours)

Colours can be managed in the CMS site config under 'Customisation' -> 'Colour Palettes'. Here you can add, edit and delete colours.

### Colour palettes configuration

[](#colour-palettes-configuration)

You can define default colours as well as colour groups in a yml config file. Default colours need to be hex codes without the #, contract colours are more customisable, and can be set to other variables, therefore a # is required if you want to use a hex code.

```
---
Name: colours
After: colourpalettes
---

Toast\ColourPalettes\Models\Colour:
  colour_groups:
    - Products
    - Buttons
  default_colours:
    - primary: null
    - secondary: null
    - white: 'ffffff'
    - black: '000000'
    - off-white: null
    - off-black: null
  contrast_colours:
    - on-dark: '#ffffff'
    - on-light: '#000000'
```

Adding colour groups will add a listbox to each colour added in the site config, allowing you to assign a colour to a single group or multiple groups.

Colours with a value will be locked and cannot be deleted or edited in the CMS. Groups are optional, but can be used to separate colours into various colour palette fields.

Contrast colours are the colours used when generating the css variables, on-dark will be used if the colour is set to dark, and on-light will be used if the colour is set to light. Makes senses right?

### Adding Colour Palette Field to a Class

[](#adding-colour-palette-field-to-a-class)

To add a colour palette field to a class, you can use the following code as an example:

```
use Toast\ColourPalettes\Models\ColourPalette;
use Toast\ColourPalettes\Fields\ColourPaletteField;

class YourClass extends DataObject
{
    private static $has_one = [
        'PrimaryColour' => Colour::class,
        'SecondaryColour' => Colour::class,
    ];

    public function updateCMSFields(FieldList $fields)
    {
        $fields->removeByName([
            'PrimaryColourID',
            'SecondaryColourID',
        ]);

        // Add the colour palette field to the class
        $fields->addFieldToTab('Root.Main', ColourPaletteField::create('PrimaryColour', 'Primary Colour'));

        // Optionally add a groups as an array to the field as the 3rd parameter
        $fields->addFieldToTab('Root.Main', ColourPaletteField::create('SecondaryColour', 'Secondary Colour', ['Products']));
    }
}
```

### Template usage

[](#template-usage)

To use the colours in your templates, you can use the following code as an example:

```

    :root {
        {$PrimaryColour.RootVars}
        {$SecondaryColour.RootVars}
    }

```

```

    lorem ipsum

        .my-element {
            {$PrimaryColour.CSSVars}
            {$SecondaryColour.CSSVars}
        }

```

### Using the colours in your CSS

[](#using-the-colours-in-your-css)

The colours will automatically generate their own CSS variables based on the name you give them on the class. For example, if you have a colour field called 'PrimaryColour', the following CSS variables will be generated:

```
/* $PrimaryColour.RootVars */
:root {
    --primary-colour: #000000;
    --primary-colour-contrast: #ffffff;
}

/* PrimaryColour.CSSVars */
.my-element {
    --_primary-colour: #000000;
    --_primary-colour-contrast: #ffffff;
}
```

### Helper functions

[](#helper-functions)

Sometimes you just want to know if the colour is light or dark:

```

    Primary colour is light

    Primary colour is dark

```

###  Health Score

52

—

FairBetter than 96% of packages

Maintenance99

Actively maintained with recent releases

Popularity21

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity65

Established project with proven stability

 Bus Factor1

Top contributor holds 80.8% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~17 days

Recently: every ~31 days

Total

33

Last Release

5d ago

Major Versions

1.1.8 → 6.0.12025-11-02

PHP version history (2 changes)1.0PHP >=8.1

6.0PHP >=8.3

### Community

Maintainers

![](https://www.gravatar.com/avatar/9cc41858b7e0e95f7c9ff396fc2d454339424c425d8f78aeb526434da6f61543?d=identicon)[priscilla-toastnz](/maintainers/priscilla-toastnz)

---

Top Contributors

[![emmanuel-toast](https://avatars.githubusercontent.com/u/44280336?v=4)](https://github.com/emmanuel-toast "emmanuel-toast (21 commits)")[![priscillay-toast](https://avatars.githubusercontent.com/u/92568971?v=4)](https://github.com/priscillay-toast "priscillay-toast (4 commits)")[![pyap22](https://avatars.githubusercontent.com/u/20524832?v=4)](https://github.com/pyap22 "pyap22 (1 commits)")

---

Tags

silverstripemodularcolours

### Embed Badge

![Health badge](/badges/toastnz-colourpalettes/health.svg)

```
[![Health](https://phpackages.com/badges/toastnz-colourpalettes/health.svg)](https://phpackages.com/packages/toastnz-colourpalettes)
```

###  Alternatives

[helsingborg-stad/municipio

A bootstrap theme for creating municipality sites.

4028.5k10](/packages/helsingborg-stad-municipio)[silverstripe/userforms

UserForms enables CMS users to create dynamic forms via a drag and drop interface and without getting involved in any PHP code

1371.1M85](/packages/silverstripe-userforms)[mediawiki/maps

Adds various mapping features to MediaWiki

84152.3k3](/packages/mediawiki-maps)[symbiote/silverstripe-advancedworkflow

Adds configurable workflow support to the CMS, with a GUI for creating custom workflow definitions.

46302.4k9](/packages/symbiote-silverstripe-advancedworkflow)[civicrm/civicrm-drupal-8

Open source constituent relationship management for non-profits, NGOs and advocacy organizations.

19251.4k3](/packages/civicrm-civicrm-drupal-8)[axllent/silverstripe-cms-tweaks

Several CMS usability improvements

1726.4k1](/packages/axllent-silverstripe-cms-tweaks)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)