Skio Colors

Updated 4 months ago by Shaw Gravitt

Skio gives you the option to customize the colors of the customer portal to match your site's branding. To change the colors of the customer portal you can click “Colors” in the Skio dashboard menu or go here: https://dashboard.skio.com/colors.

Along with the brand colors you intend to use so the customer portal matches the rest of your site, we recommend testing the contrast of your background and foreground colors to maximize accessibility. You can do this by using a tool such as the a11y color contrast validator.

Color option fields will accept Hex, RGB, RGBA, and named colors options (a list of named options can be found here).

Below is a walkthrough of each section to help guide you through the customization.

Note: be sure to click the green "Save" button in the top right corner to see your chanes reflected in the customer protal.

Text

This is all text throughout the customer portal that is not a button or header.

Color: This changes the text color.
Weight: This is the thickness or boldness of the text throughout the customer portal. This defaults to normal or 400. Weight values can be 100 - 700 lightest to heaviest (or boldest). For more information on CSS font-weight go here.

Header text is all the large and prominent text throughout the customer portal. Header text shows new pages and sections.

Color: This changes the text color.
Weight: This is the thickness or boldness of the text throughout the customer portal. This defaults to normal or 400. Weight values can be 100 - 700 lightest to heaviest (or boldest). For more information on CSS font-weight go here.
Uppercase: Yes or No options. This will make every letter in the header uppercase.

Button

This affects all buttons throughout the customer portal and the account login page.

Text color: This changes the text color for all buttons in the customer portal and the account login page.
Color: This is the background color for all buttons in the customer portal and the account login page.
Border color: Optional field to add an extra or different border to all buttons.

Manage Subscription Button

These settings are for the list of links in the “Manage Subscription” section of the customer portal. By default, these are outlined buttons with transparent backgrounds.

Text color: This changes the text color for all links in the “Manage Subscription” section of the Customer Portal.
Color: This is the background color for all links in the “Manage Subscription” section of the Customer Portal.
Border color: Optional field to add an extra or different border for all links in the “Manage Subscription” section of the Customer Portal.

Confirm Button

The confirm button shows in a small section that appears after clicking on any of the buttons in “Manage Subscription” section and various other areas when performing a saving action. It defaults to a green background with white text.

Text color when confirming a non-dangerous action: This changes the text color for all confirmation buttons.
Color when confirming a non-dangerous action: This is the background color for all confirmation buttons.
Border color when confirming a non-dangerous action (optional): Optional field to add an extra or different border to all confirmation buttons.

Danger Button

The Danger Button is the button to confirm the cancellation of a subscription.

Text color when confirming a dangerous action (cancel): This changes the text color for all cancel buttons.
Color when confirming a dangerous action (cancel): This is the background color for all cancel buttons.
Border color when confirming a dangerous action (cancel, optional): Optional field to add an extra or different border to all cancel buttons.

Subscription card

The Subscription card is the outlined portion in the customer portal that has all the information for a single subscription. For example, Price, Frequency, next order date, products in the subscription, the “Manage Subscription” links, upsells, and group discounts.

Background color: The background of the card itself (area within the border). Note: this is different from the background color of the entire site.
Border color: A field to change the border color of all borders within the Subscription Card section.
Product link border color on hover: You have the option of changing the color of the border that surrounds the individual products in the Subscription Card section when a user moves their cursor over the product. This highlights to the user that this field is selectable by the customer.

Input fields

The input fields are anywhere where a customer can enter text or numbers.

Background color: The background of the field itself (area where text is entered).
Border color: The color of the border surrounding the input field.
Border color on focus: The border color of the input field when this customer is using or “focused” on the field. This is helpful for knowing what field is selected while navigating the site.
Background color when disabled: This is the color for a field that the customer can not select or change. Defaults to gray. This often shows if the customer needs to complete an action before moving to the next step or this option is not available based on your other settings.
Background color of copy input field: This is a field that resembles a text field but when clicked, it copies the text within the field. For example, the field for sharing the customer’s group discount option with someone else.
Border color on error: The border color of a field when incorrect or invalid information has been entered.
Text color: The color of the text inside the field.

Group discount progress tracker

If you do not have group discounts setup up in the Skio dashboard, this section will not show in the customer portal.

Text color: The color of the text inside the circles describing the discounts per person who joins.
Color: The color of the circle of the unlocked available discount option(s).
Color when not unlocked: The color of the circle of the locked unavailable discount options.

Misc

Load spinner color: The color of the small circular spinner that shows as pages and processes load.
Date picker background color: The background of the module that shows when a customer is changing their delivery date.