Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support ability to change color palette in the UI #51

Open
briancwald opened this issue Mar 14, 2018 · 8 comments
Open

Support ability to change color palette in the UI #51

briancwald opened this issue Mar 14, 2018 · 8 comments

Comments

@briancwald
Copy link
Owner

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
Copy link

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
Copy link

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
Copy link

This is my last version of the sub-theme.

material_admin_override.zip

@bart1485
Copy link

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
Copy link
Owner Author

briancwald commented Mar 20, 2018

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
Copy link
Owner Author

@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
Copy link

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
Copy link

brooke-heaton commented Sep 26, 2018

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 }}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants