degov/color_schema

Empowers site administrators to edit themes color schema via an user interface.

Maintainers

Details

bitbucket.org/publicplan/color_schema

Homepage

Source

Installs: 22 447

Dependents: 0

Suggesters: 0

Security: 0

Type:drupal-module

2.0.0 2020-06-25 14:56 UTC

Requires

GPL-3.0-or-later 5feb960887a4a356e50289ee5f11169acb9c98fe

This package is auto-updated.

Last update: 2024-04-25 23:36:54 UTC

README

  • Introduction
  • Requirements
  • Installation
  • Configuration
  • Maintainers

INTRODUCTION

The Color Schema UI module extends Drupal by functionality for changing your sites color schema via a CSS selectors related color picker. So you are able to define a handful of base color zones (e.g. site background color, footer background color, content font color etc.) and let specific user roles define them easily. You will get a color picker, so non-developer users can change the colors of your site. Colors will be compiled into a SCSS (for defining the color variables) and CSS file in your site's files folder.

Place a color_schema_ui.scss file into your active theme for inital color settings. If there is none, there is a default SCSS file in the module.

REQUIREMENTS

This module requires no Drupal modules outside of Drupal core. Libraries on which this module is based:

  • scssphp: SCSS compiler written in PHP
  • vanilla-picker: A simple, easy to use vanilla JS (no dependencies) color picker with alpha selection.
  • invert-color: Generates inverted (opposite) version of the given color. (<1KB)

See all JavaScript library dependencies in color_schema_ui/js/package.json. All PHP library dependencies are contained in color_schema_ui/composer.json.

INSTALLATION

If you have made any JavaScript code changes, you must re-compile the JavaScript code.

  1. Switch to the folder cd color_schema/js
  2. Make sure NPM and NVM are installed
  3. Run nvm use
  4. Run npm install
  5. Run npm run build (compiles the assets for a production environment)

To run dev more you can run run

npm run build-dev

Which will start a webpack and compile the assets with sourcemaps.

UPGRADING

Assuming you have a enabled color_schema_ui module running.

  • Update code of color_schema_ui module and your theme
  • Run the drush command drush color_schema_ui:migrate this will
    • Look for your previous docroot/sites/default/files/color_schema_ui.scss
    • Extract color variables from this file
    • Look for a template at nrw_base_theme/source/sass/color_schema_ui.scss
    • Rebuild docroot/sites/default/files/color_schema_ui.(s)css with the extracted colors and the new template

EXPORT COLORS

To export colors use drush color_schema_ui:exportColors.

This will read colors from docroot/sites/default/files/color_schema_ui.scss and display them in console. e.g: 

$ drush color_schema_ui:exportColors
(
    [site-background-color] => rgba(109,215,50,1)
    [peripheral-color-primary] => #233755
    [font-contrast-color-primary] => rgb(234,239,246)
    [peripheral-color-secondary] => #3C506E
    [font-contrast-color-secondary] => rgba(193,21,229,1)
    [header-background-color] => rgb(234, 239, 246)
    [content-background-color] => rgba(139,246,207,1)
    [paragraphs-header-background-color] => rgba(91,130,184,1)
    [font-content-color] => #233755
    [font-header-color] => rgba(220,221,192,1)
    [font-footer-color] => rgba(28,176,91,1)
)

If something went wrong you can re-enable the module and use these color values in the UI restore your color schema.

CONFIGURATION

1. Navigate to Administration > Extend and enable the module.
2. Navigate to Administration > Configuration > System > Color Schema UI to edit the possible colors. After the
   colors are configured, mind the SCSS definitions to propagate color picker settings to the theme.
3. Visit any node and pick your color by the local task tab menu item. Color Schema UI is visible on nodes only.

If you want to use brighter Primary/Secondary colors you can add the following at the configuration page (admin/color-schema-ui/settings) to enable non-white contrast colors: 

font_contrast_color_primary: 'Primary contrast'
peripheral_color_secondary: Peripheral color secondary

Known Issues

# Does not work with some release of quickedit < 8.7.10
drush pm-uninstall quickedit -y
drush en -y color_schema_ui

MAINTAINERS

Supporting organization: