Color

#1

Background

#2

Background

#3

Background

#4

Background

#5

Background

#6

Background


The color library unifies and standardizes your app's colors, allowing you to change the colors used throughout your app from one central place. In addition, the colors of the color library are dynamic and adjust automatically based on the template:dark_mode variable of your app (learn how dark_mode works).

The color library also holds many handy functions for converting and modifying colors of various color languages (HEX, RGB, RGBA, and HSL).

Use Colors

In SunSed Alpha, there are primary, accent, border, and a series of background colors at your disposal in addition to blue, red, yellow, orange, and green colors that allow you to standardize even the most rarely used colors in your app.

color:primary()
#=> "#297de2"

color:accent()
#=> "#d8c513"

color:border()
#=> "#dedede"

color:background_1()
#=> "#FFFFFF"

color:blue()
#=> "#297de2"

The color:primary(), as its name suggests, is your app's primary color which your end-users subconsciously identify as the color that represents your app and, ultimately, your brand. color:primary() is the color that is by default used in SunSed buttons, links, and many other elements.

The color:accent(), is the color that has to stand out from your color:primary() and yet at the same time work well with it to create a pleasing and exciting contrast throughout your app's user interface. A great example of color:accent() is for the background color of tags.

There are 5 different shades of background colors for you to work with to create convincing layers of backgrounds in your UI. color:background_1 is the lightest color available, while color:background_5 is the darkest. When template:dark_mode is TRUE then, color:background_1 becomes the darkest shade and the color:background_5 the lightest.

When you set template:dark_mode to TRUE, then all the dynamic colors will return their dark_mode version.

template:dark_mode = FALSE
color:primary()
#=> "#297de2"

template:dark_mode = TRUE
color:primary()
#=> "#307df7"

However, if you provide the dynamic colors a background_color, they will return the version of themselves that is most legible on the provided background color.

color:primary()
#=> "#297de2"

color:primary("000")
#=> "#307df7"

container:medium("Hello There", attributes: [
    "style" => "background-color: #000; color: " . color:blue(background_color: "#000")   
    ])

Change Colors

You can easily change any of SunSed's dynamic colors to make your app's color theme stand out and feel unique.

color:primary_set(light_mode: "0022FF", dark_mode: "0000FF")
Copyright © SunSed LLC 2013-2021 All rights reserved.