Spectre colors is one of the most useful utilities, there are two types of things where we can use colors. Like we can set colors for the text and we can set color for the background.
Colors are used to style your component, sometimes we need to color the text or sometimes we need to color the background.
Spectre Colors class:
- text-colors: This is not the actual class name which will be used “colors” text should be replace with color name like primary, secondary etc. This is used to color the text.
- bg-colors: This is not the actual class name which will be used “colors” text should be replace with color name like primary, secondary etc. This is used to color the background.
Syntax:
// For text color <element class="text-colorname">...</element> // For background color <element class="bg-colorname">...</element>
Below example illustrate the Spectre Colors:
Example:
HTML
<!DOCTYPE html><html>
<head>
<title>SPECTRE Colors Class</title>
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<strong>SPECTRE Colors Class</strong>
<br><br>
<p class="text-primary bg-error">
Primary Text Color | Error Background Color
</p>
<p class="text-secondary bg-warning">
Secondary Text Color | Warning Background Color
</p>
<p class="text-dark bg-success">
Dark Text Color | Success Background Color
</p>
<p class="text-gray bg-light">
Gray Text Color | Light Background Color
</p>
<p class="text-light bg-gray">
Light Color Text | Gray Background Color
</p>
<p class="text-success bg-dark">
Success Text Color | Dark Background Color
</p>
<p class="text-warning bg-secondary">
Warning Text Color | Secondary Background Color
</p>
<p class="text-error bg-primary">
Error Text Color | Primary background Color
</p>
</center>
</body>
</html>
|
Output:
Spectre Colors
Reference: https://picturepan2.github.io/spectre/utilities/colors.html