Add theme functionality and example themes

This commit is contained in:
Josef Utbult 2023-11-13 23:54:24 +01:00
parent 88f03612b0
commit aeb615a5e0
5 changed files with 182 additions and 20 deletions

78
css/skeleton.css vendored
View File

@ -10,6 +10,7 @@
/* Table of contents /* Table of contents
- Theme
- Grid - Grid
- Base Styles - Base Styles
- Typography - Typography
@ -25,6 +26,41 @@
- Media Queries - Media Queries
*/ */
/* Theme
*/
:root {
/* Standard Skeleton color theme. These can be overwritten if
another theme is applied */
/* Colors used for primary elements such as primary buttons and links */
--primary: #1EAEDB;
--primary-focus: #0FA0CE;
--primary-background: #33C3F0;
--primary-text: #FFF;
/* The color of non-primary elements such as standard buttons */
--muted: #555;
--muted-border: #bbb;
--muted-focus: #333;
--muted-border-focused: #888;
/* Text color on page for all elements */
--text: #222;
/* Page background color and highlights */
--background: #FFF;
--background-highlight: #E1E1E1;
/* Code blocks */
--code: #222;
--code-background: #F1F1F1;
--code-border: #E1E1E1;
/* Forms */
--form-background: #FFF;
--form-border: #D1D1D1;
}
/* Grid /* Grid
*/ */
@ -125,7 +161,8 @@ body {
line-height: 1.6; line-height: 1.6;
font-weight: 400; font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #222; } color: var(--text);
background-color: var(--background); }
/* Typography /* Typography
@ -158,9 +195,9 @@ p {
/* Links /* Links
*/ */
a { a {
color: #1EAEDB; } color: var(--primary); }
a:hover { a:hover {
color: #0FA0CE; } color: var(--primary-focus); }
/* Buttons /* Buttons
@ -173,7 +210,7 @@ input[type="button"] {
display: inline-block; display: inline-block;
height: 38px; height: 38px;
padding: 0 30px; padding: 0 30px;
color: #555; color: var(--muted);
text-align: center; text-align: center;
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
@ -184,7 +221,7 @@ input[type="button"] {
white-space: nowrap; white-space: nowrap;
background-color: transparent; background-color: transparent;
border-radius: 4px; border-radius: 4px;
border: 1px solid #bbb; border: 1px solid var(--muted-border);
cursor: pointer; cursor: pointer;
box-sizing: border-box; } box-sizing: border-box; }
.button:hover, .button:hover,
@ -197,17 +234,17 @@ button:focus,
input[type="submit"]:focus, input[type="submit"]:focus,
input[type="reset"]:focus, input[type="reset"]:focus,
input[type="button"]:focus { input[type="button"]:focus {
color: #333; color: var(--muted-focus);
border-color: #888; border-color: var(--muted-border-focused);
outline: 0; } outline: 0; }
.button.button-primary, .button.button-primary,
button.button-primary, button.button-primary,
input[type="submit"].button-primary, input[type="submit"].button-primary,
input[type="reset"].button-primary, input[type="reset"].button-primary,
input[type="button"].button-primary { input[type="button"].button-primary {
color: #FFF; color: var(--primary-text);
background-color: #33C3F0; background-color: var(--primary-background);
border-color: #33C3F0; } border-color: var(--primary-background); }
.button.button-primary:hover, .button.button-primary:hover,
button.button-primary:hover, button.button-primary:hover,
input[type="submit"].button-primary:hover, input[type="submit"].button-primary:hover,
@ -218,9 +255,9 @@ button.button-primary:focus,
input[type="submit"].button-primary:focus, input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus, input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus { input[type="button"].button-primary:focus {
color: #FFF; color: var(--primary-text);
background-color: #1EAEDB; background-color: var(--primary);
border-color: #1EAEDB; } border-color: var(--primary); }
/* Forms /* Forms
@ -236,8 +273,8 @@ textarea,
select { select {
height: 38px; height: 38px;
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff; background-color: var(--form-background);
border: 1px solid #D1D1D1; border: 1px solid var(--form-border);
border-radius: 4px; border-radius: 4px;
box-shadow: none; box-shadow: none;
box-sizing: border-box; } box-sizing: border-box; }
@ -266,7 +303,7 @@ input[type="url"]:focus,
input[type="password"]:focus, input[type="password"]:focus,
textarea:focus, textarea:focus,
select:focus { select:focus {
border: 1px solid #33C3F0; border: 1px solid var(--primary-background);
outline: 0; } outline: 0; }
label, label,
legend { legend {
@ -311,8 +348,9 @@ code {
margin: 0 .2rem; margin: 0 .2rem;
font-size: 90%; font-size: 90%;
white-space: nowrap; white-space: nowrap;
background: #F1F1F1; color: var(--code);
border: 1px solid #E1E1E1; background: var(--code-background);
border: 1px solid var(--code-border);
border-radius: 4px; } border-radius: 4px; }
pre > code { pre > code {
display: block; display: block;
@ -326,7 +364,7 @@ th,
td { td {
padding: 12px 15px; padding: 12px 15px;
text-align: left; text-align: left;
border-bottom: 1px solid #E1E1E1; } border-bottom: 1px solid var(--background-highlight); }
th:first-child, th:first-child,
td:first-child { td:first-child {
padding-left: 0; } padding-left: 0; }
@ -377,7 +415,7 @@ hr {
margin-top: 3rem; margin-top: 3rem;
margin-bottom: 3.5rem; margin-bottom: 3.5rem;
border-width: 0; border-width: 0;
border-top: 1px solid #E1E1E1; } border-top: 1px solid var(--background-highlight); }
/* Clearing /* Clearing

View File

@ -0,0 +1,31 @@
/* Light red theme with pinkish undertones */
.crimson-red {
/* Colors used for primary elements such as primary buttons and links */
--primary: #d12245;
--primary-focus: #DC143C;
--primary-background: #ec375b;
--primary-text: #ffffff;
/* The color of non-primary elements such as standard buttons */
--muted: #555;
--muted-border: #bbb;
--muted-focus: #333;
--muted-border-focused: #888;
/* Text color on page for all elements */
--text: #222;
/* Page background color and highlights */
--background: #FFF;
--background-highlight: #f1f1f1;
/* Code blocks */
--code: #222;
--code-background: #FFFDFD;
--code-border: #f3eded;
/* Forms */
--form-background: #FFF;
--form-border: #D1D1D1;
}

View File

@ -0,0 +1,31 @@
/* Matrix dark theme for those late nights */
.hacker-green {
/* Colors used for primary elements such as primary buttons and links */
--primary: #880e7b;
--primary-focus: #821476;
--primary-background: #591051;
--primary-text: #adabab;
/* The color of non-primary elements such as standard buttons */
--muted: #555;
--muted-border: #bbb;
--muted-focus: #333;
--muted-border-focused: #888;
/* Text color on page for all elements */
--text: #ccc6b4;
/* Page background color and highlights */
--background: #000000;
--background-highlight: #161616;
/* Code blocks */
--code: #64ea27;
--code-background: #000;
--code-border: #041;
/* Forms */
--form-background: #131212;
--form-border: #1a1919;
}

View File

@ -0,0 +1,31 @@
/* Classic bone chilling blue */
.hacker-green {
/* Colors used for primary elements such as primary buttons and links */
--primary: #1EAEDB;
--primary-focus: #0FA0CE;
--primary-background: #33C3F0;
--primary-text: #FFF;
/* The color of non-primary elements such as standard buttons */
--muted: #555;
--muted-border: #bbb;
--muted-focus: #333;
--muted-border-focused: #888;
/* Text color on page for all elements */
--text: #222;
/* Page background color and highlights */
--background: #FFF;
--background-highlight: #E1E1E1;
/* Code blocks */
--code: #222;
--code-background: #F1F1F1;
--code-border: #E1E1E1;
/* Forms */
--form-background: #FFF;
--form-border: #D1D1D1;
}

View File

@ -0,0 +1,31 @@
/* Dark grey theme with orange highlights */
.soothing-orange {
/* Colors used for primary elements such as primary buttons and links */
--primary: #f3b252;
--primary-focus: #ebac4d;
--primary-background: #ffab2e;
--primary-text: #161616;
/* The color of non-primary elements such as standard buttons */
--muted: #9d9d9d;
--muted-border: #808080;
--muted-focus: #e1e1e1;
--muted-border-focused: #cecece;
/* Text color on page for all elements */
--text: #FFFFFF;
/* Page background color and highlights */
--background: #2B2B2B;
--background-highlight: #242323;
/* Code blocks */
--code: #FFFFFF;
--code-background: #242323;
--code-border: #313030;
/* Forms */
--form-background: #1f1f1f;
--form-border: #242424;
}