[Silk UI Web] Silk UI Colors and Themes

[Silk UI Web] Silk UI Colors and Themes

  
Forge Component
(71)
Published on 4 Oct (2 weeks ago) by OutSystems R&D
71 votes
Published on 4 Oct (2 weeks ago) by OutSystems R&D

I'm trying to understand the relationship (if any) between the Silk UI widgets and the theme.  Let's say I'm using the theme customizer to set my primary color, secondary color, etc.  When I look at the Silk widgets - say Tile Number - it requires that I set a color.  It pulls the options from the Colors entity, which doesn't seem to know anything about my theme.

I'd like my UI widgets to automatically take on the colors of my theme.  Is this possible?

Thanks!

hi,

those colors of the static are classes under the hood.

you should be able to override them in your own theme.

Hi Scott,

You need to edit your Theme and copy/paste the generated CSS. 

Then all classes used in your application will be redefined. Exceptions are for some Theme specific classes, that need to be redefined and customized by you.

Regards,


Does this mean that in my theme I should redefine the class of, for example, "DarkPlum" to be whatever I want.  Green maybe?

Obviously I'd pick the class name for the color that most closely resembles the one I want, but that still seems... odd.  So, Silk UI widgets do not automatically work with themes, and instead you adjust your theme to make use of the color class names available?  Is that right?

Thanks for the answers!

     Scott

Hi Scott,

You can either redefine the class or adapt the existing ones in your Theme. The second option reduces the amount of CSS code, but of course depends on each case.

Regards!

Hi Marco,

I don't see classes in the generated theme for each of the Silk UI Widgets.  I see some, like Wizard and Accordion, but nothing for widgets such as:

  • Tile Icon
  • Badge
  • Breadcrumbs
  • Tooltips
  • Cards
  • etc.

Maybe I'm hung up on the Data widgets themselves - they seem to be the ones requiring a Color as a property.  

Solution

Hello Scott,

Widget classes are not in your Theme, but you can create a class, apply the style, and provide the class to each.

Furthermore, you can find more information about CSS customization for web here and for mobile here.

Cheers!

Solution

Hey Scott,


If you have troubles trying to customize yout theme, you can try to use the Automated Web Theme Configurator:

https://www.outsystems.com/forge/component/3155/automated-web-theme-configurator/


Just click on the "Try Now" button and in the end copy / paste the CSS for your theme.


Cheers.

Alexandre Santos wrote:

Hey Scott,


If you have troubles trying to customize yout theme, you can try to use the Automated Web Theme Configurator:

https://www.outsystems.com/forge/component/3155/automated-web-theme-configurator/


Just click on the "Try Now" button and in the end copy / paste the CSS for your theme.


Cheers.

Thanks - I'll try it out. :)

    Scott