PHPackages                             sevengroupfrance/sulu-color-picker-bundle - 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. sevengroupfrance/sulu-color-picker-bundle

ActiveLibrary

sevengroupfrance/sulu-color-picker-bundle
=========================================

V1.0.1(4y ago)02.8k↓50%MITJavaScript

Since Dec 9Pushed 4y ago1 watchersCompare

[ Source](https://github.com/sevenGroupFrance/sulu-color-picker-bundle)[ Packagist](https://packagist.org/packages/sevengroupfrance/sulu-color-picker-bundle)[ RSS](/packages/sevengroupfrance-sulu-color-picker-bundle/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (3)DependenciesVersions (10)Used By (0)

sevengroupfrance/sulu-color-picker-bundle
=========================================

[](#sevengroupfrancesulu-color-picker-bundle)

Inspired by [this pull request](https://github.com/sulu/sulu-demo/pull/66).

What is this bundle's goal?
---------------------------

[](#what-is-this-bundles-goal)

Importing a custom fonctionality into [sulu](https://github.com/sulu/sulu), in this example, a custom content type. This bundle will make a color picker with a few colors only. This is handy if you don't want to select a color via the normal color picker sulu has.

[![How the color picker looks in sulu's admin](img/cp-1.png)](img/cp-1.png)

Installation
------------

[](#installation)

1. Download the [package](https://packagist.org/packages/sevengroupfrance/sulu-color-picker-bundle) in your project with the following command line:
    `composer require sevengroupfrance/sulu-color-picker-bundle`.
2. In `config/bundles.php` add the following code:
    `SevenGroupFrance\SuluColorPickerBundle\ColorPickerCustomBundle::class => ['all' => true]`.
3. In `assets/admin/package.json`, add the following line in the "dependencies" object:
    `"sulu-color-picker-bundle": "file:node_modules/@sulu/vendor/sevengroupfrance/sulu-color-picker-bundle/src/Resources/js"`.
4. In `assets/admin`, `npm install` to initialize the bundle's symlink directory.
5. In `assets/admin/index.js`, add this line:
    `import 'sulu-color-picker-bundle'`.
6. In `assets/admin`, `npm run watch` or `npm run build`

dotenv configuration
--------------------

[](#dotenv-configuration)

This bundle uses the .env constants as well as the npm package [dotenv](https://www.npmjs.com/package/dotenv). Install the package in your `assets/admin/node_modules` directory. Once this is done, add those lines in your `assets/admin/webpack.config.js` file:
At the start of your file:

```
require('dotenv').config({ path: './../../.env' });
const webpack = require('webpack');

```

In the module.export object:

```
config.plugins.push(new webpack.DefinePlugin({
    "process.env": JSON.stringify(process.env)
}))

```

This will add a new parameters to SULU's webpack.config.js' plugins object and enable your env variables in your js files.

colors configuration
--------------------

[](#colors-configuration)

This part is quite simple. Open your .env file in your root directory, and add the constant `COLOR_PICKER_COLORS`.

Then, give it a string for its value, with the colors you want:
`COLOR_PICKER_COLORS="#F18C1C #3C3C3B #FFFFFF"`

The colors can be hexadecimals, rgb or color name (pretty much everything that works on CSS) and have to be separated by a single space gap.
Finally, once you've saved your .env file, do a new `npm run watch` or `npm run build` in your `assets/admin` directory to initialize the colors you've saved.

Use in your template files
--------------------------

[](#use-in-your-template-files)

Once installed, to use this new content type, you'll have to create a new property with the type `color_picker_custom`.

```

        Page's title - 80 characters max

```

###  Health Score

28

—

LowBetter than 54% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity19

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity55

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% 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 ~6 days

Recently: every ~12 days

Total

9

Last Release

1567d ago

Major Versions

v0.0.7 → v1.0.02021-12-21

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/95850916?v=4)[sevengroupfrance](/maintainers/sevengroupfrance)[@sevenGroupFrance](https://github.com/sevenGroupFrance)

---

Top Contributors

[![tommysonsylverstone](https://avatars.githubusercontent.com/u/47473393?v=4)](https://github.com/tommysonsylverstone "tommysonsylverstone (59 commits)")

---

Tags

sulu-bundle

### Embed Badge

![Health badge](/badges/sevengroupfrance-sulu-color-picker-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/sevengroupfrance-sulu-color-picker-bundle/health.svg)](https://phpackages.com/packages/sevengroupfrance-sulu-color-picker-bundle)
```

PHPackages © 2026

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