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

dynamic color options #10

Merged
merged 1 commit into from
Oct 8, 2018
Merged

Conversation

simbesh
Copy link
Contributor

@simbesh simbesh commented Sep 5, 2018

So this is more of a feature request, my coding is quite limited and this is my first ever PR so sorry if its not correct.
basicly this fuctionality adds the ability to set hex color option in ui-lovelace like this :
color: "#1affa3"
I assumed this would also work for setting "var(--primary-color)" but it does not (only works for direct hex value) and that is the limit of my ability.

the reason for this request is so that button colors can bet set to theme variables and thus become dynamic with theme change.
Thanks.

@simbesh simbesh changed the title Add files via upload dynamic color options Sep 5, 2018
@@ -25,7 +25,7 @@ class ButtonCard extends LitElement {


getFontColorBasedOnBackgroundColor(backgroundColor) {
const parsedBackgroundColor = backgroundColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
const parsedBackgroundColor = backgroundColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i) ? backgroundColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i) : this.hexToRgb(backgroundColor.substring(1));
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd do

const parsedRgbColor= backgroundColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
const parsedBackgroundColor = parsedRgbColor ? parsedRgbColor : this.hexToRgb(backgroundColor.substring(1));

That way you avoid going through the regex twice. It's just a simple regex but if you have 20 buttons, it adds up.

@kuuji
Copy link
Collaborator

kuuji commented Sep 5, 2018

That's awesome! Thanks a lot @simo878

Let me test that tonight, I made one suggestion but it's really not a big deal.

I assumed this would also work for setting "var(--primary-color)" but it does not (only works for direct hex value) and that is the limit of my ability.

Yeah I haven't scratched my head too hard about the css var yet. These are only evaluated by CSS / your browser. It looks like it will involve some wacky things to make that work.

@kuuji kuuji changed the base branch from master to develop October 8, 2018 15:33
@kuuji kuuji merged commit 9edc2fe into custom-cards:develop Oct 8, 2018
@kuuji kuuji mentioned this pull request Oct 16, 2018
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

Successfully merging this pull request may close these issues.

None yet

2 participants