Open In App

Tachyons Theming Skins

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href=
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1 class="light-yellow">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
</body>
 
</html>


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.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href=
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1 class="green bg-light-yellow">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
</body>
 
</html>


Output:

 

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



Last Updated : 30 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads