Theming Elements -- Polycasts #17
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about theming Polymer 1.0 elements with custom CSS properties.
Recommended by 2 people across 2 different months, 2015 to 2016.
What it is
A 13-minute episode of Google's Polycasts series in which Rob Dodson shows how to use CSS custom properties to style and theme Polymer 1.0 elements. It walks through a demo element and links to the cross-scope styling docs and the demo source code.
What people said
Recommends Neil John Ramal · 2015-10 · Stack Overflow · on “strategies for styling a reusable Polymer element”
Custom CSS Properties [LINK] is the suggested way of theming Polymer Elements. Here's a video [LINK] from the polymer summit and another video [this video] of Rob Dodson talking about theming your elements using custom css properties.
Recommends MrK · 2015-11 · Stack Overflow · on “Polymer 1.0 custom styling”
Have you seen the Polycasts? They're a great place to start and there is one for Theming Elements that covers this: [this video]
Cites Sylar · 2015-08 · Stack Overflow · on “Custom CSS3 Variable Not Working in Polymer 1.0 Starter Kit”
-My css3 vars are not showing. Here is the setup (scripts are removed and assumed all is well): <dom-module id="my-app"> <style> .tester { color: var(--my-app-tester-color); } </style> <template> <div class="tester">abc</div> </template> </dom-module> // app-theme.html: <style is="custom-style"> my-app { --my-app-tester-color: red; } </style> I am following Rob's Polycast [this video] tutorial but nothing works.
Cites a1626 · 2016-06 · Stack Overflow · on “How to change --primary-color variable in polymer if one is loading components through PolyGit”
Use this in your custom element :host{ --primary-color:blue; } Or you if you are doing it in HTML then use custom-style and update the value in :root to apply it everywhere, or inside element to apply it on a particular element Apply it to all the elements <style is="custom-style"> :root{ --primary-color:blue; } Apply it to single element <style is="custom-style"> paper-card{ --primary-color:blue; } Alternately if you are designing an app i'll recommend to create app-theme.html which will be your central repository for your application theme and import the app-theme using link tag. Please read polymer's documentation [LINK] for more details on styling or check out this polycast [this video]