Tachyons Theming Skins

In this article, we will learn how one can use the skin theme on the website using the Tachyons toolkit. Tachyons is a toolkit used to create a responsive website. Skins are used to set the color of text and the color of the background.

Syntax:

<element-name class="class-name">...</element-name>

Tachyons Theming Skins Classes Used:

Text Color Classes:

• black: This class is used to set the “black” color.
• near-black: This class is used to set the “near-black” color.
• dark-gray: This class is used to set the “dark-grey” color.
• mid-gray: This class is used to set the “mid-grey” color.
• gray: This class is used to set the “grey” color.
• silver: This class is used to set the “silver” color.
• light-silver: This class is used to set the “light-silver” color.
• moon-gray: This class is used to set the “moon-grey” color.
• light-gray: This class is used to set the “light-grey” color.
• near-white: This class is used to set the “near-white” color.
• white: This class is used to set the “white” color.
• transparent: This class is used to set the “transparent” color.
• dark-red: This class is used to set the “dark-red” color
• red: This class is used to set the “red” color on the hover.
• light-red: This class is used to set the “light-red” color.
• orange: This class is used to set the “orange” color.
• gold: This class is used to set the “gold” color.
• yellow: This class is used to set the “yellow” color.
• light-yellow: This class is used to set the “light-yellow” color.
• purple: This class is used to set the “purple” color.
• light-purple: This class is used to set the “light-purple”.
• dark-pink: This class is used to set the “dark-pink” color.
• hot-pink: This class is used to set the “hot-pink” color.
• pink: This class is used to set the “pink” color.
• light-pink: This class is used to set the “light-pink” color.
• dark-green: This class is used to set the “dark-green” color.
• green: This class is used to set the “green” color.
• light-green: This class is used to set the “light-green”.
• navy: This class is used to set the “navy” color.
• dark-blue: This class is used to set the “dark-blue” color.
• blue: This class is used to set the “blue” color.
• light-blue: This class is used to set the “light-blue” color.
• lightest-blue: This class is used to set the “lightest-blue” color.
• washed-blue: This class is used to set the “washed-green” color.
• washed-green: This class is used to set the “washed-green” color.
• washed-yellow: This class is used to set the “washed-yellow” color.
• washed-red: This class is used to set the “washed-red” color.

Background Color Classes:

• bg-black: This class is used to set the background to a “black” color.
• bg-near-black: This class is used to set the background to a “near-black” color.
• bg-dark-gray: This class is used to set the background to a “dark-grey” color.
• bg-mid-gray: This class is used to set the background to a “mid-grey” color.
• bg-gray: This class is used to set the background to a “grey” color.
• bg-silver: This class is used to set the background to a “silver” color.
• bg-light-silver: This class is used to set the background to a “light-silver” color.
• bg-moon-gray: This class is used to set the background to a “moon-grey” color.
• bg-light-gray: This class is used to set the background to a “light-grey” color.
• bg-near-white: This class is used to set the background to a “near-white” color.
• bg-white: This class is used to set the background to “white” color.
• bg-transparent: This class is used to set the background to a “transparent” color.
• bg-dark-red: This class is used to set the background to a “dark-red” color.
• bg-red: This class is used to set the background to a “red” color.
• bg-light-red: This class is used to set the background to a “light-red” color.
• bg-orange: This class is used to set the background to an “orange” color.
• bg-gold: This class is used to set the background to a “gold” color.
• bg-yellow: This class is used to set the background to a “yellow” color.
• bg-light-yellow: This class is used to set the background to a “light-yellow” color.
• bg-purple: This class is used to set the background to “purple” color.
• bg-light-purple: This class is used to set the background to a “light-purple” color.
• bg-dark-pink: This class is used to set the background to a “dark-pink” color.
• bg-hot-pink: This class is used to set the background to a “hot-pink” color.
• bg-pink: This class is used to set the background to a “pink” color.
• bg-light-pink: This class is used to set the background to a “light-pink” color.
• bg-dark-green: This class is used to set the background to a “dark-green” color.
• bg-green: This class is used to set the background to a “green” color.
• bg-light-green: This class is used to set the background to a “dark-green” color.
• bg-navy: This class is used to set the background to a “navy” color.
• bg-dark-blue: This class is used to set the background to a “dark-blue” color.
• bg-blue: This class is used to set the background to a “blue” color.
• bg-light-blue: This class is used to set the background to a “light-blue” color.
• bg-lightest-blue: This class is used to set the background to a “lightest-blue” color.
• bg-washed-blue: This class is used to set the background to a “washed-blue” color.
• bg-washed-green: This class is used to set the background to a “washed-green” color.
• bg-washed-yellow: This class is used to set the background to a “washed-yellow” color.
• bg-washed-red: This class is used to set the background to a “washed-red” color.

Note: There are more colors that you can use to change Tachyons Theming Skins. Check the reference link at the bottom.

Below are examples illustrating the Tachyons Theming Skins:

Example 1: In this example, the light-yellow class is used for the text.

Output:

Example 2: In this example, the green class is used for the text and the bg-light-yellow class is used for the background.

Output:

Reference: https://tachyons.io/docs/themes/skins/