YesGraph iOS SDK is fully customizable which includes the entire look and feel of the contact book and sharing screens.

This document describes how to style the YesGraph SDK’s share screen to best fit your app style guidelines.

The appearance of the integrated YesGraph UI is defined by a proxy Theme object named YSGTheme.

Adding Custom Styles

To set your own properties, you have to create your own YSGTheme instance. Modify the default properties on your YSGTheme instance, then set the instance into the YesGraph SDK using our Convenience API.

let theme = YSGTheme()
theme.mainColor = UIColor.blueColor()

YesGraph.shared().theme = theme
YSGTheme *theme = [YSGTheme new];
theme.mainColor = [UIColor blueColor];

[YesGraph shared].theme = theme;

By using the Convenience API for sharing, the theme will be automatically applied to entire SDK.

  • See our Example application of how we styled YesGraph Share Sheet and Contact Book with specific colors.

YSGTheme

YSGTheme class represents a styling proxy object and is the main point of interaction between your view and the styling of the app. There are several properties you can influence in order to adapt the YesGraph SDK to your aesthetic needs.

Main Color:

The main color of the SDK. Think of it as the app’s tint, with a little extra.

Default: #0078BD, Ocean Boat Blue

var mainColor: UIColor
@property (nonatomic, strong) UIColor *mainColor;

Affects:

  • Font color of the navigation buttons
  • Background color of the contacts button
  • Referral banner border color

Twitter Color:

Background color of the Twitter button.

Default: #00ADEEM, Twitter Official Color

var twitterColor: UIColor
@property (nonatomic, strong) UIColor *twitterColor;

Facebook Color:

Background color of the Facebook button.

Default: #45619E, Facebook Official Color

var facebookColor: UIColor
@property (nonatomic, strong) UIColor *facebookColor;

Text Color:

The text color for text that isn’t accented.

Default: #212121, Dark Grey

var textColor: UIColor
@property (nonatomic, strong) UIColor *textColor;

Affects:

  • Font color of the share text
  • Font color of share services button titles

Base Color:

The background color for the view.

Default: #F5F5F5, Wild Sand

var baseColor: UIColor
@property (nonatomic, strong) UIColor *baseColor;

Referral Banner Color:

The background color for the referral banner.

Default: #F5F5F5, Wild Sand

var referralBannerColor: UIColor
@property (nonatomic, strong) UIColor *referralBannerColor;

Referral Text Color:

The font color of the referral link.

Default: #212121, Dark Grey

var referralTextColor: UIColor
@property (nonatomic, strong) UIColor *referralTextColor;

Referral Button Color:

The font color of the copy button text.

Default: #0078BD, Ocean Boat Blue

var referralButtonColor: UIColor
@property (nonatomic, strong) UIColor *referralButtonColor;

Font Family:

The font family for the text on the screen with the exception of the copy button text.

Default: System Font

var fontFamily: NSString
@property (nonatomic, strong) NSString *fontFamily;

Button Font Family:

The font family for the the copy button text.

Default: Bold System Font

var buttonFontFamily: NSString
@property (nonatomic, strong) NSString *buttonFontFamily;

Share Text Font Size:

The size of the font on the sharing label.

Default: 60.f

var shareLabel: CGFloat
@property (nonatomic) CGFloat *shareLabelFontSize;

Share Text Alignment:

The alignment of the share text.

Default: NSTextAlignmentCenter

var shareLabelTextAlignment: NSTextAlignment
@property (nonatomic) NSTextAlignment *shareLabelTextAlignment;

Share Service Button Shape:

The shape of the individual buttons (twitter, facebook, contacts).

Default: YSGShareSheetServiceCellShapeCircle

var shareButtonShape: YSGShareSheetServiceCellShape
@property (nonatomic) YSGShareSheetServiceCellShape *shareButtonShape;

Options:

  • YSGShareSheetServiceCellShapeCircle
  • YSGShareSheetServiceCellShapeSquare
  • YSGShareSheetServiceCellShapeRoundedSquare

Share Service Button Fade Factor:

The 2-component amount of fade/unfade change that happens when the user click on the share service button.

Default:

YSGShareButtonFadeFactors{0.8, 1.0}
(YSGShareButtonFadeFactors)
{
    .AlphaFadeFactor = 0.8f,
    .AlphaUnfadeFactor = 1.f
};

You can set these via the property as a component like above, or the method with CGFloats.

var shareButtonFadeFactors: YSGShareButtonFadeFactors

func setShareButtonFadeFactorsWithFadeAlpha(fadedAlpha: CGFloat, andUnfadeAlpha: CGFloat)
@property (nonatomic) YSGShareButtonFadeFactors *shareButtonFadeFactors;

- (void)setShareButtonFadeFactorsWithFadeAlpha:(CGFloat)fadedAlpha andUnfadeAlpha:(CGFloat)unfadedAlpha;

Share Address Book Theme:

The theme for the list of contacts that comes up after the user click on the Contacts Share Service. More on this below.

var shareButtonShape: YSGShareSheetServiceCellShape
@property (nonatomic) YSGShareSheetServiceCellShape *shareButtonShape;

YSGShareAddressBookTheme

To set your own properties, you have to create your own YSGShareAddressBookTheme object instance. Modify the default properties on your YSGShareAddressBookTheme instance then set the instance as the YSGTheme property shareAddressBookTheme.

let addressBookTheme = YSGShareAddressBookTheme.init()

addressBookTheme.cellBackground = UIColor.orangeColor()
self.theme.shareAddressBookTheme = addressBookTheme
YSGShareAddressBookTheme *addressBookTheme = [YSGShareAddressBookTheme new];

addressBookTheme.cellBackground = [UIColor orangeColor];
self.theme.shareAddressBookTheme = addressBookTheme;

View Background Color:

Background color of the address book view.

Default: #F5F5F5, Wild Sand

var viewBackground: UIColor
@property (nullable, nonatomic, strong) UIColor *viewBackground;

Cell Background Color:

Background color of the address book cells.

Default: System

var cellBackground: UIColor
@property (nullable, nonatomic, strong) UIColor *cellBackground;

Selected Cell Background Color:

Background color of the address book cells when selected.

Default: System

var cellSelectedBackground: UIColor
@property (nullable, nonatomic, strong) UIColor *cellSelectedBackground;

Section Background Color:

Background color of the address book section headers.

Default: System

var sectionBackground: UIColor
@property (nullable, nonatomic, strong) UIColor *sectionBackground;

Cell Label Font Size:

Size of the cell label font.

Default: 17

var cellFontSize: CGFloat
@property (nonatomic) CGFloat cellFontSize;

Cell Detail Font Size:

Size of the cell detail label font.

Default: 12

var cellDetailFontSize: CGFloat
@property (nonatomic) CGFloat cellDetailFontSize;

Section Font Size:

Size of the section label font.

Default: 17

var sectionFontSize: CGFloat
@property (nonatomic) CGFloat sectionFontSize;

Examples

Default

St. Patty’s Flare

…if for example you want to have a little St. Patrick flare to your app!

// theme
let theme = YSGTheme()

theme.mainColor = UIColor.orangeColor()
theme.baseColor = UIColor(red: 0/256.0, green: 133/256.0, blue: 63/256.0, alpha: 1.0)
theme.textColor = UIColor.whiteColor()
theme.fontFamily = "Georgia"
theme.buttonFontFamily = "Georgia-Bold"
theme.shareButtonShape = .RoundedSquare
theme.facebookColor = UIColor.orangeColor()
theme.twitterColor = UIColor.orangeColor()
theme.referralButtonColor = UIColor.orangeColor()

// address book theme
let addressBookTheme = YSGShareAddressBookTheme.init()

addressBookTheme.cellSelectedBackground = UIColor.orangeColor().colorWithAlphaComponent(0.5)
addressBookTheme.sectionBackground = UIColor(red: 0/256.0, green: 133/256.0, blue: 63/256.0, alpha: 0.5)

theme.shareAddressBookTheme = addressBookTheme
YesGraph.shared().theme = theme
// theme
YSGTheme *theme = [YSGTheme new];
 
theme.mainColor = [UIColor orangeColor];
theme.baseColor = [UIColor colorWithRed:0/256.f green:132/256.f blue:63/256.f alpha:1.0];
theme.textColor = [UIColor whiteColor];
theme.fontFamily = @"Georgia";
theme.buttonFontFamily = @"Georgia-Bold";
theme.shareButtonShape = YSGShareSheetServiceCellShapeRoundedSquare;
theme.facebookColor = [UIColor orangeColor];
theme.twitterColor = [UIColor orangeColor];
theme.referralButtonColor = [UIColor orangeColor];
    
// address book theme
YSGShareAddressBookTheme *addressBookTheme = [YSGShareAddressBookTheme new];

addressBookTheme.cellSelectedBackground = [[UIColor orangeColor] colorWithAlphaComponent:0.5];
addressBookTheme.sectionBackground = [UIColor colorWithRed:0/256.f green:132/256.f blue:63/256.f alpha:0.5];

theme.shareAddressBookTheme = addressBookTheme;
[YesGraph shared].theme = theme;

Rhapsody in Blue

… for a uniform blue color try this out!

// theme
let theme = YSGTheme()

theme.shareButtonShape = .Square;
theme.mainColor = UIColor(red: 0/256.0, green: 24/256.0, blue: 76/256.0, alpha: 1.0)
theme.shareLabelFontSize = 40.0
theme.fontFamily = "Avenir"
theme.buttonFontFamily = "Avenir-Heavy"
theme.referralBannerColor = theme.mainColor
theme.textColor = UIColor.whiteColor()
theme.referralTextColor = UIColor.whiteColor()
theme.referralButtonColor = UIColor.whiteColor()
theme.baseColor = UIColor(red: 131/256.0, green: 143/256.0, blue: 168/256.0, alpha: 1.0)

// address book theme
let addressBookTheme = YSGShareAddressBookTheme.init()

addressBookTheme.cellSelectedBackground = UIColor.whiteColor()
addressBookTheme.sectionBackground = UIColor(red: 0.51, green: 0.55, blue: 0.66, alpha: 1.0)
addressBookTheme.viewBackground = UIColor(red: 0.51, green: 0.55, blue: 0.66, alpha: 1.0)
addressBookTheme.cellFontSize = 16.0;
addressBookTheme.sectionFontSize = 20.0;
addressBookTheme.cellDetailFontSize = 14.0;
theme.shareAddressBookTheme = addressBookTheme

YesGraph.shared().theme = theme
// theme
YSGTheme *theme = [YSGTheme new];

theme.shareButtonShape = YSGShareSheetServiceCellShapeSquare;
theme.mainColor = [UIColor colorWithRed:0/256.f green:24/256.f blue:76/256.f alpha:1.0];
referralBannerColor = theme.mainColor
theme.shareLabelFontSize = 40.f;
(red: 0/256.0, green: 24/256.0, blue: 76/256.0, alpha: 1.0)
theme.textColor = [UIColor whiteColor];
theme.referralTextColor = [UIColor whiteColor];
theme.referralButtonColor = [UIColor whiteColor];
theme.baseColor = [UIColor colorWithRed:131/256.f green:143/256.f blue:168/256.f alpha:1.0];
theme.fontFamily = @"Avenir";
theme.buttonFont = [UIFont fontWithName:@"Avenir-Heavy" size:18];
    
// address book theme     
YSGShareAddressBookTheme *addressBookTheme = [YSGShareAddressBookTheme new];
  
addressBookTheme.cellSelectedBackground = [UIColor whiteColor];
addressBookTheme.sectionBackground = [UIColor colorWithRed:0.51 green:0.55 blue:0.66 alpha:1.0];
addressBookTheme.viewBackground = [UIColor colorWithRed:0.51 green:0.55 blue:0.66 alpha:1.0];
addressBookTheme.cellFontSize = 16.0;
addressBookTheme.sectionFontSize = 20.0;
addressBookTheme.cellDetailFontSize = 14.0;

theme.shareAddressBookTheme = addressBookTheme          
[YesGraph shared].theme = theme;