1

I am using Twitter Digits embedded widget and would like to theme it dynamically depending on the theme that the user selects for the main portal. The only way that you can theme it according to their documentation at https://docs.fabric.io/web/digits/embeddable.html is as follows (which is pretty much hardcoded):

Digits.embed({
 container: '.my-digits-container',
  theme: {
    accent: '315B7F',       /* Buttons & Links */
    background: '002747',   /* Transparent by defaul */
    label: 'FFF',           /* Titles and text */
    border: '324F67'        /* Input fields borders */
  }
})

Can anyone tell me whether there is any other way to update these hex values depending on some classes set in the CSS (in order to have different colors depending on the theme selected)?

I was thinking maybe for example i have this class in the CSS and I want to extract that value and apply it to the accent in twitter code snippet:

.accent { color: #FF0000; }

However im looking for anything simpler or neater.
Kindly note that the embeddable widget creates an iframe, and therefore it does not inherit the styling. I am using AngularJS throughout the app.

user1809790
  • 1,349
  • 5
  • 24
  • 53

1 Answers1

0

Assuming theme is rendered when the page loads, you could get the colors using this answer and store colors in variables. Then use those variables in the Digits.Embed().

PS: Set Variables with initial values.

Community
  • 1
  • 1
Imab Asghar
  • 316
  • 1
  • 7