Categories
Featured iPhone Development Resources iOS Development Libraries Open Source iOS Libraries And Tools

Open Source Library Allowing You To Theme iOS User Interfaces With CSS And Change At Runtime

Some time ago I mentioned a handy library allowing you to theme your user interfaces within plist files called RNThemeManager.

Here’s an open source library called Motif submitted by Eric Horacek allowing you to theme user interfaces using a CSS style syntax, and easily change the look of your interface dynamically at runtime.

There are a number of examples included showing how to theme buttons, and change the look of your interface based on the user adjusting their brightness settings as inspired by the Tweetbot interface.

This code snippet shows an example of the styling syntax to theme buttons:

{
    "$RedColor": "#f93d38",
    "$BlueColor": "#50b5ed",
    "$FontName": "AvenirNext-Regular",
    ".ButtonText": {
        "fontName": "$FontName",
        "fontSize": 16
    },
    ".Button": {
        "borderWidth": 1,
        "cornerRadius": 5,
        "contentEdgeInsets": "{10, 20, 10, 20}",
        "tintColor": "$BlueColor",
        "borderColor": "$BlueColor",
        "titleText": ".ButtonText"
    },
    ".WarningButton": {
        "_superclass": ".Button",
        "tintColor": "$RedColor",
        "borderColor": "$RedColor"
    }
}

And this image shows the dynamic interface adjustments in action:

Motif

You can find Motif on Github here.

A nice library for easily theming an interface.