Support ability to change color palette in the UI

[briancwald]

The color palette is easy to update via scss by simply changing the $primary, $secondary, and $accent variables in color_schema.scss

however, this means you would need to sub theme - which is a lot of extra effort for an admin theme. I would like to explore options to change these colors in the UI. The color module is dated and does not support modern CSS architecture like SCSS variables.

Any ideas on how to achieve this are welcome!

[bart1485]

I think if we want to create a sub-theme for this theme. We need to outsource the sass part of this theme. You incorparate your sass to your theme but another people need to recompile it. Then we need to have this ass a library.

We have a sub-theme like that :

• material_admin_library
  • base
    • ...
  • componenets
    • ...
  • section
    • ...
  • _color_schema.scss
  • _settings.scss
  • _material_admin.scss
• css
  • material_admin_override.css
• scss
  • material_admin_override.scss : contains import of your _material_admin.scss in library.
• gulpfile.js
• logo.svg
• material_admin_override.info.yml
• material_admin_override.libraries.yml
• material_admin_override.theme
• package.json
• INSTALL.md

If you have this that can works.

This is what I tried. This is my sub theme at this time:
material_admin_override.zip

[bart1485]

Just change into _color_schema.scss:

$primary: 'blue' !default;
$secondary: 'materialize-red' !default;
$accent: 'teal' !default;
$action: 'orange' !default;
$utility: 'grey' !default; // This most likely wont change.
// VARIOUS HELPERS
$black: color('shades', 'black') !default;
$white: color('shades', 'white') !default;
$success-color-base: 'grey' !default;
$error-color-base: 'red' !default;
$warning-color-base: 'yellow' !default;
$status-color-base: 'green' !default;

Then we can override sass variable.

[bart1485]

This is my last version of the sub-theme.

material_admin_override.zip

[bart1485]

I understand that you prefer to try to do a feature with css compilation.

But I think that if you do this, that's gonna be hard to use git or an other subversion with it.
Because for every instance we can have different css file.

Or we can try to use a specific library like this : http://leafo.net/scssphp/
and add css folder + override variable on gitignore.

When we install the theme, that process default version of override file. If we define new color on theme settings we process on more time the sass file.

I don't know what do you think about this idea ?

=> Sry for my english

[briancwald]

Hi,

I think the best route right now is to sub-theme - but set up the gulp file to reference all the parent theme scss files and the local sub themes version of the color-schema.scss file. It would be similar to what we did for zurb foundation: https://www.drupal.org/project/zurb_foundation

That said, I have looked at the scssphp before - I will look into that option again. One thing I was trying to avoid is forcing a composer install for using the theme - but I think if it was just optional for the colors it could be OK.

[briancwald]

@zolhorvath, I'd be curious if you have any opinion on how we could do this as part of the theme? or maybe as part of material_admin_support?

[bart1485]

Poc !
Just to relaunch this subject 👍 I actually use the subtheme offers before but I want this theme in other project. Thx for your reply.

[brooke-heaton]

I created a color palette widget for a theme settings that passes in the selected colors as variables so that users can change primary/secondary colors on a site. I did this to avoid using the color module. This might provide a solution here. In my implementation the color palate options were static - but they could easily be made dynamic for the user. In our theme, used by various schools in the Fairfax County School District, the site editors can change the Primary and Secondary colors. These in turn generate a hex code assigned to a variable that is passed to the theme as a twig var {{ color_dark }} or {{color_light }}