Tutorial
DSP
KUIML
How-to
Scripts
KUIMLLetiMixText WidgetThemes
June 24, 2024

Themes

TextWidget has built-in themes ("light", "dark", "dark_green", "dark_blue") for fast changing the style of the widget. You can further customize a selected theme using theme_restyle or style (higher priority) attributes. Fully custom user themes are also supported.

  1. <TW_LOG text="Some text" theme="dark" width="300" />

Let's try the "light" theme with customized colors. 

  1. <TW_LOG text="Some text" theme="light" width="300" style="border.color: #DD0000; resizer { color: #DD0000; active_color: #FF0000; } " />

Creating your own themes

You can add your own theme creating a VARIABLE with id "TW_THEMES" before including TextWidget library.

  1. <!-- create custom themes -->
  2. <VARIABLE id="TW_THEMES" value="{ your_theme_1 { }, your_theme_2 { } }" / >
  3. <!-- include textwidget -->
  4. <INCLUDE_ONCE file="/path/to/tw.inc" />

Here's an example of a "pinky" and "pinky_contrast" themes (the second one inherits another).

  1. <VARIABLE id="TW_THEMES" value="
  2. {
  3. pinky {
  4. text_color: #02040F;
  5. bg_color: #E5DADA;
  6. text_active_color: #FFFFFF;
  7. border: {
  8. color: #E59500;
  9. radius: 5;
  10. }
  11. scrollbars: {
  12. color: #84003277;
  13. active_color: #840032DD;
  14. bg_color: #00000011;
  15. disabled_bg_color: #00000010;
  16. }
  17. selection: {
  18. bg_color: #bad3fcAA;
  19. inactive_bg_color: #d9d9d9AA;
  20. }
  21. resizer: {
  22. color: #84003277;
  23. active_color: #840032DD;
  24. line_width_ratio: 1;
  25. }
  26. line_stripe: {
  27. color: #FFFFFFAA;
  28. active_color: #840032;
  29. }
  30. line_num: {
  31. color: #00000055;
  32. bg_color: #DDDDDD66;
  33. active_color: #FFFFFF;
  34. active_bg_color: #840032;
  35. border_color: #002642;
  36. border_width: 0.5;
  37. h_align: right;
  38. h_pad: 6;
  39. font_face: $DEFAULT_MONOSPACE_FONT$;
  40. font_size: 11;
  41. }
  43. /* optional changes when widget has focus */
  44. focus {
  45. text_color: #000000;
  46. border: {
  47. color: #840032;
  48. }
  49. }
  51. /* startup values for bbcode tags with same names */
  52. indent: 0;
  53. indent_right: 0;
  54. first_line_indent: 0;
  55. line_height_ratio: 1.1;
  56. margin_top: 0;
  57. margin_bottom: 0;
  58. group_margin_top: 0;
  59. group_margin_bottom: 0;
  60. },
  62. /* another theme that inherits previous */
  64. pinky_contrast{
  65. parent: pinky; /* inherit parent theme */
  66. text_color: #000000;
  67. bg_color: #FFFFFF;
  68. }
  69. }
  70. " />

Let's add a widget and take a look:

  1. <TW_LOG string_id="my_data" theme="pinky" line_numbers="true" line_stripes="true" width="400" resize="both" />

Notes on theming

1. You can use either curly brackets or dots, for example

  1. border: {
  2. color: #E59500;
  3. radius: 5;
  4. }

is the same:

  1. border.color: #E59500;
  2. border.radius: 5;

2. If theme has some parameters missing, it uses "parent" theme (if defined), and finally the built-in "default" theme. (Only single level "parenting" is supported for the moment).

  1. <!-- a user theme defined in $TW_THEMES$ (see above) -->
  2. pinky_contrast{
  3. parent: pinky;
  4. ...
  5. }

3. The "focus" prefix can make widget change some parameters when having focus (for editable and/or selectable widgets).

  1. <TW_LOG ... style="focus { text_color: #000000; border.color: #840032; }" />

4. If you a defining a new element based on TextWidget, you can use "theme_restyle" instead of "style". It will allow you to use "style" later for particular element customization. The "theme_restyle" works the same way as "style", just has lower priority.

  1. <DEFINE>
  2. <TW_RED_LOG base_type="TW_LOG" theme_restyle="border.color: #DD0000;" />
  3. </DEFINE>

5. Themes currently have only the settings that don't affect the layout and can easily change at runtime (for example border_width and corner_resizer_size are not in the theme because they affect how the KUIML-layout is computed, so they are attributes of the widget). Some attributes like font_size and font_face are also currently part of widget attributes due to legacy reasons.

6. The colors in the theme can have "opacity" values as last two chars in hex color: #00000033

7. Theme also has startup values for some bbcode parameters like "margin-top", "first-line-indent". So even if you have bbcode="false" you can still use some features to modify the text formatting. 

List of available theme attributes (from the "default" theme)

  1. text_color: ;
  2. text_active_color: ;
  3. bg_color: ;
  4. text_hover_color: #DD0000;
  5. border: {
  6. color: #CCCCCCFF;
  7. radius: 5;
  8. stroke_width: ; /* can be in % of border_width */
  9. }
  10. scrollbars: {
  11. color: #00000033;
  12. active_color: #00000066;
  13. bg_color: #00000011;
  14. disabled_bg_color: #00000010;
  15. }
  16. selection: {
  17. bg_color: #bad3fcAA;
  18. inactive_bg_color: #d9d9d9AA;
  19. }
  20. resizer: {
  21. color: #00000055;
  22. active_color: #00000099;
  23. line_width_ratio: 1;
  24. }
  25. line_stripe: {
  26. color: #77889925;
  27. active_color: #FF993300;
  28. }
  29. line_num: {
  30. color: #00000055;
  31. bg_color: #DDDDDD66;
  32. active_color: #00000099;
  33. active_bg_color: #3399FF22;
  34. border_color: #AAAAAAFF;
  35. border_width: 0.5;
  36. h_align: right;
  37. h_pad: 6;
  38. font_face: $DEFAULT_MONOSPACE_FONT$;
  39. font_size: 11;
  40. }
  41. cursor.width_ratio: 1;
  42. indent: 0;
  43. indent_right: 0;
  44. first_line_indent: 0;
  45. line_height_ratio: 1.1;
  46. margin_top: 0;
  47. margin_bottom: 0;
  48. group_margin_top: 0;
  49. group_margin_bottom: 0;