TheBestTutorials.css Color Themes
Created Theme
Theme In Use:
☰ Movies
Frozen
The response to the animations was ridiculous.
Star Wars
People were exited for the new Star Wars movie.
The Avengers
A huge success for Marvel and Disney.
Generated CSS:
Cinque Terre
The Cinque Terre (five lands) is a portion of the Italian Riviera. The coastline with five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore is a UNESCO World Heritage Site.
Monterosso
Monterosso al Mare is located at the center of a small natural gulf, protected by a small artificial reef, in the Riviera of La Spezia. It is the northernmost village of the Cinque Terre.
Vernazza
Vernazza is another of the five towns in the Cinque Terre region. Vernazza is the fourth town heading north. It has no car traffic, and is one of the truest "fishing villages" on the Italian Riviera.
Color Themes
With TheBestTutorials.css, it is easy to customize your applications with your own color themes.
Example
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://tutorials/lib/subhodaya.css">
<link rel="stylesheet" href="/lib/subhodaya-theme-indigo.css">
Predefined Themes
In HTML applications, you can limit the use of colors by choosing different hues from predefined colors:
| TheBestTutorials-red | Try it |
| TheBestTutorials-pink | Try it |
| TheBestTutorials-purple | Try it |
| TheBestTutorials-deep-purple | Try it |
| TheBestTutorials-indigo | Try it |
| TheBestTutorials-blue | Try it |
| TheBestTutorials-light-blue | Try it |
| TheBestTutorials-cyan | Try it |
| TheBestTutorials-teal | Try it |
| TheBestTutorials-green | Try it |
| TheBestTutorials-light-green | Try it |
| TheBestTutorials-lime | Try it |
| TheBestTutorials-khaki | Try it |
| TheBestTutorials-yellow | Try it |
| TheBestTutorials-amber | Try it |
| TheBestTutorials-orange | Try it |
| TheBestTutorials-deep-orange | Try it |
| TheBestTutorials-blue-grey | Try it |
| TheBestTutorials-brown | Try it |
| TheBestTutorials-grey | Try it |
| TheBestTutorials-dark-grey | Try it |
| TheBestTutorials-black | Try it |
| TheBestTutorials-subhodaya | Try it |
Movies 2017
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Movies 2017
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Private Themes
With subhodaya.css, it is easy to customize an applications with a private color theme.
You can link to a private theme in a <link> tag, or you can put the private theme in a <style> tag:
Example
.subhodaya-theme {
color:#fff !important;background-color:#3f51b5 !important}
.subhodaya-theme-light {
color:#000 !important;background-color:#e8eaf6 !important}
.subhodaya-theme-dark {
color:#fff !important;background-color:#1a237e !important}
.subhodaya-theme-l5 {
color:#000 !important;background-color:#e8eaf6 !important}
.subhodaya-theme-l4 {
color:#000 !important;background-color:#c5cae9 !important}
.subhodaya-theme-l3 {
color:#000 !important;background-color:#9fa8da !important}
.subhodaya-theme-l2 {
color:#fff !important;background-color:#7986cb !important}
.subhodaya-theme-l1 {
color:#fff !important;background-color:#5c6bc0 !important}
.subhodaya-theme-d1 {
color:#fff !important;background-color:#3949ab !important}
.subhodaya-theme-d2 {
color:#fff !important;background-color:#303f9f !important}
.subhodaya-theme-d3 {
color:#fff !important;background-color:#283593 !important}
.subhodaya-theme-d4 {
color:#fff !important;background-color:#1a237e !important}
.subhodaya-theme-action {
color:#fff !important;background-color:#311b92 !important}
.subhodaya-text-theme {
color:#1a237e !important}
</style>
Adding Gradients
One reader sent us this suggestion: You might want to consider adding a gradient for each theme.
I used the l2 and l1 colors from the blue theme to create this gradient:
Example
color: #000 !important;
background:-webkit-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.subhodaya-theme-gradient {
color: #000 !important;
background:-moz-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.subhodaya-theme-gradient {
color: #000 !important;
background:-o-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.subhodaya-theme-gradient {
color: #000 !important;
background:-ms-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.subhodaya-theme-gradient {
color: #000 !important;
background: linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
Color Themes
Here are some downloadable color themes inspired by Google's Material Design:
