Proposal: CSS Custom Properties to make styling more accessible

This solution greatly improves clarity and allows beginners to make basic aesthetic changes without having to search for selectors, go into dev tools, etc. I’ve read the manifesto in the docs, and I think this would be helpful for generating early positive feedback for new users getting their feet wet with programming.

Example: These is currently how we set the colors:

/* main_old.css */
body {
  color: #aaa;
}
.dimmed {
  color: #666;
}
.normal {
  color: #999;
}
.bright {
  color: #fff;
}

With custom properties, we would set the defaults in main.css

/* main.css */
:root {
    --grid-gap: 2rem;
    --color-text-body: #aaa;
    --color-text-bright: #fff;
    --color-text-normal: #999;
    --color-text-dimmed: #666;
}
body {
 color: var(--color-text-body);
} 
.dimmed {
  color: var(--color-text-dimmed);
}
.normal {
  color: var(--color-text-normal);
}
.bright {
  color: var(--color-text-bright);
}

and if a beginner wanted to make adjustments, they could use custom.css.sample (similar to how the sample config is used):

/* custom.css */
:root {
    --grid-gap: 2rem;
    --color-text-body: blue;
    --color-text-bright: #fff;
    --color-text-normal: #999;
    --color-text-dimmed: #666;
}

If it were up to me, I would actually just include a custom.css by default with some comments on how it works, but that’s your call. The custom variable for blue text in custom.css. overrides the defaults (#aaa) set in main.css like so:

So you can see here that all a beginner would need to do was change --color-text-body: to start personalizing their MM. I plan to include add variables for text sizes and fonts to make it easier to tinker with all the stuff you might want to change. I’m already planning on doing some of this for my own benefit but I thought it might be helpful to the community if I shared the work.

Cheers!

[rejas]

Yep yep, will save layout changes for later. Not super comfortable with building a startup sequence so I’ll let somebody take that one on. Thanks all 🙂

I think you can ignore that startup sequence idea anyway, right @MichMich ?

[rejas]

I like this idea, especially since I had that planned too (https://github.com/MichMich/MagicMirror/compare/master...rejas:custom_properties) But didnt follow it through with not enough time these days, so I’d be happy to see someone else code it 😉

Anyway, I am in favor of this. Like you wrote, it is easier for beginner to change the looks of MM. Plus it would be nice if Module developers would pick it up for their styles too.