Theme configuration

How to configure custom theme for FreakUI

Follow this steps to configure FreakUI with your custom theme.

Creating custom theme

1
Create your custom theme
  • Create your custom theme struct
  • Conform it to FreakUITheme protocol
  • You will be prompted to add missing parameters for conformance
2
Declare theme configuration
Required ParametersOptional Parameters
spacingScalelightPrimaryGreen
radiusScaledarkPrimaryGreen
lightPrimaryAccentlightPrimaryRed
darkPrimaryAccentdarkPrimaryRed
lightPrimaryYellow
darkPrimaryYellow
3
Configure theme in your main app initializer
myApp.swift
 init() {
     ThemeManager.shared.configure(with: MyCompleteTheme())
 }

Theme examples

For example, this is minimal theme with only required Parameters (all the others are declared as nil):

MyCustomTheme.swift
struct MyMinimalTheme: FreakUITheme {
    // Define spacing and radius scales for your app
    var spacingScale: SpacingScale = .medium.     // Controls padding and margins
    var radiusScale: RadiusScale = .medium.       // Controls corner radiuses

    // Light mode colors
    var lightPrimaryAccent: String = "#8FBC8F"    // Main accent color
    var lightPrimaryGreen: String? = nil          // Positive states
    var lightPrimaryYellow: String? = nil         // Neutral states
    var lightPrimaryRed: String? = nil            // Negative states

    // Dark mode colors
    var darkPrimaryAccent: String = "#7FFF00"     // Main accent color
    var darkPrimaryGreen: String? = nil           // Positive states
    var darkPrimaryYellow: String? = nil          // Neutral states
    var darkPrimaryRed: String? = nil             // Negative states
}

And this is full theme with custom colors:

MyCustomTheme.swift
struct MyCompleteTheme: FreakUITheme {
    // Define spacing and radius scales for your app
    var spacingScale: SpacingScale = .medium      // Controls padding and margins
    var radiusScale: RadiusScale = .medium        // Controls corner radiuses

    // Light mode colors
    var lightPrimaryAccent: String = "#8FBC8F"    // Main accent color
    var lightPrimaryGreen: String? = "#32CD32"    // Positive states
    var lightPrimaryYellow: String? = "#DAA520"   // Neutral states
    var lightPrimaryRed: String? = "#8B0000"      // Negative states

    // Dark mode colors
    var darkPrimaryAccent: String = "#7FFF00"     // Main accent color
    var darkPrimaryGreen: String? = "#98FB98"     // Positive states
    var darkPrimaryYellow: String? = "#F0E68C"    // Neutral states
    var darkPrimaryRed: String? = "#B22222"       // Negative states
}

Default Theme

Default Values:

If you created your theme with only required parameters, .primaryGreen, .primaryYellow and .primaryRed colors will use default values from the FreakUI library.

Default Theme:

If you do not create any custom theme, and only import FreakUI and use it's components, all the colors will use the default values from the FreakUI library, and spacingScale and radiusScale values will be treated as .medium.

Next Steps

Now that you've set up FreakUI and configured your theme, please go ahead and give it a try in your app's interface! While we're working on comprehensive documentation for all components, modifiers, and extensions, you can explore the library overview described in our release article to get started.