Global Theme

System Summary

The Global Theme is a Theme resource that can be applied to Control nodes and any nodes that inherit from them. It automatically alters constants, styles, and other settings for control nodes, though its the functionality of each node that can be changed is limited.

If the Global Theme is applied to a node, it also gets applied to all of that node's children, making it very efficient to group all of the UI nodes in a scene under a single parent Control node, to which the Global Theme can be applied. The Global Theme typically only applies to specific nodes, although it does apply a default font and font size to all nodes. Because of how the Theme system works in Godot, the Global Theme by default only applies to UI elements that have their own, already-defined node type. For individual elements that need to follow a repeated design, a Type Variation can be applied to the Global Theme in the Inspector. Or, for even more granular changes, every individual node that applies the Global Theme can have any and all aspects overwritten by using the Theme Overrides panel in the Inspector.

---

Connected Systems

Connecting Systems:

• None

Subsystems:

Type Variations

• Tool Button
• [Tile Button]
• Text List Button

---

Related Controls

The Global Theme encompasses all of the UI elements in the game, so its controls are all of the inputs used to interact with the UI.

---

Bugs

• None

---

Feature List / Breakdown of Features

Button Styles

• Base button:
  • Affects the font, colors, and StyleBox for normal, hovered, pressed, focused, and disabled states for all buttons in the game.
• Toggle button
  • Inherits from the base button. Adds the on/off toggle icons for toggle buttons in their normal and pressed states.
• Check box
  • Inherits from the base button. Adds the checked/unchecked icons for check box buttons in their normal and pressed states.
• Option button
  • Inherits from the base button. Adds a double chevron icon to the button. Uses the options menu styles to include a drop-down for the button's pressed state. Also adds StyleBoxes for hover and pressed states.
• Menu button
  • Inherits from the base button. Uses the popup menu styles to include a drop-down menu for the button's pressed state.
• Color pick button
  • Inherits from the base button. Adds a graphic to display the currently selected color.

Input Styles

• Horizontal slider
  • Changes the StyleBox for horizontal sliders and adds icons for the normal and pressed states of the slider grabber.
• Vertical slider
  • Changes the StyleBox for vertical sliders and adds icons for the normal and pressed states of the slider grabber.
• Line edit
  • Affects the font and color of line edit fields. Also changes the StyleBox for normal, focused, and read-only states.
• Text edit
  • Inherits from line edit.
• Spin box
  • Inherits from line edit. Also adds icons and changes the StyleBox for normal, hovered, pressed, focused, and disabled states for the up and down buttons.

Misc. Styles

• Label
  • Affects the font size and color of labels.
• Rich text label
  • Affects the font size and color of rich text labels.
• Base pop-up menu
  • Affects the margins, font size and color, and StyleBox for normal and hovered states for all pop-up menus. Adds icons for selected/unselected radio buttons. Also adds styling for menu separators.
• Tooltip label
  • Affects the font size, font color, and StyleBox for tooltips.
• Tab bar/tab container
  • Affects the font size, font color, and StyleBoxes for tabs in their focus, hover, selected, and unselected states. Adds a StyleBox for the tab panel. Also adds icons for increment and decrement arrows.
• Horizontal scrollbar
  • Affects the StyleBoxes and margins for horizontal scrollbars.
• Vertical scrollbar
  • Affects the StyleBoxes and margins for vertical scrollbars.

---

Future Work / Risks

Future Work:

1. Add Type Variation for warning pop-ups
2. Add Type Variation for dialog menus
3. Include file explorer windows in Theme

Risks:

• None

---

Miscellaneous Notes

• The Global Theme is located in the Resources folder of the project directory
• Themes can be edited in the Theme Editor, which pops up after double clicking any Theme resource
• Use the Inspector to apply Themes and Theme Types
• Themes can be overidden in the Inspector, but it is best practice to avoid this, as it would make future changes more difficult