Get Updates By E-mail 

Article Written By:
Johann Dowa

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.


  •  
  •  
  •  
  •  
  •  

Submit A Resource

Have you created a useful tutorial, library or tool for iOS development that you would like to get in front of our 300,000+ monthly page views from iOS developers?

You can submit the url here.

The resources we feel will appeal to our readers the most will be posted on the front page.

Comments