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/