finish theme engine

This commit is contained in:
Nolan Lawson 2018-01-13 19:17:41 -08:00
parent 1f9029f457
commit 586ba670b8
8 changed files with 58 additions and 4 deletions

View file

@ -7,9 +7,21 @@ const themes = [
name: 'scarlet', name: 'scarlet',
label: 'Scarlet' label: 'Scarlet'
}, },
{
name: 'seafoam',
label: 'Seafoam'
},
{ {
name: 'hotpants', name: 'hotpants',
label: 'Hotpants' label: 'Hotpants'
},
{
name: 'oaken',
label: 'Oaken'
},
{
name: 'majesty',
label: 'Majesty'
} }
] ]

View file

@ -14,7 +14,7 @@
--input-border: $border-color; --input-border: $border-color;
--anchor-text: $anchor-color; --anchor-text: $anchor-color;
--main-bg: $main-bg-color; --main-bg: $main-bg-color;
--body-bg: lighten($main-theme-color, 38%); --body-bg: $body-bg-color;
--body-text-color: $main-text-color; --body-text-color: $main-text-color;
--main-border: $border-color; --main-border: $border-color;

View file

@ -1,4 +1,5 @@
$main-theme-color: royalblue; $main-theme-color: royalblue;
$body-bg-color: lighten($main-theme-color, 38%);
$anchor-color: $main-theme-color; $anchor-color: $main-theme-color;
$main-text-color: #333; $main-text-color: #333;
$border-color: #dadada; $border-color: #dadada;
@ -8,5 +9,5 @@ $secondary-text-color: white;
@import "_base.scss"; @import "_base.scss";
:root { :root {
@include baseTheme() @include baseTheme();
} }

View file

@ -1,4 +1,5 @@
$main-theme-color: hotpink; $main-theme-color: hotpink;
$body-bg-color: lighten($main-theme-color, 25%);
$anchor-color: $main-theme-color; $anchor-color: $main-theme-color;
$main-text-color: #333; $main-text-color: #333;
$border-color: #dadada; $border-color: #dadada;
@ -8,5 +9,5 @@ $secondary-text-color: white;
@import "_base.scss"; @import "_base.scss";
body.theme-hotpants { body.theme-hotpants {
@include baseTheme() @include baseTheme();
} }

13
scss/themes/majesty.scss Normal file
View file

@ -0,0 +1,13 @@
$main-theme-color: blueviolet;
$body-bg-color: lighten($main-theme-color, 40%);
$anchor-color: $main-theme-color;
$main-text-color: #333;
$border-color: #dadada;
$main-bg-color: white;
$secondary-text-color: white;
@import "_base.scss";
body.theme-majesty {
@include baseTheme();
}

13
scss/themes/oaken.scss Normal file
View file

@ -0,0 +1,13 @@
$main-theme-color: saddlebrown;
$body-bg-color: lighten($main-theme-color, 60%);
$anchor-color: $main-theme-color;
$main-text-color: #333;
$border-color: #dadada;
$main-bg-color: white;
$secondary-text-color: white;
@import "_base.scss";
body.theme-oaken {
@include baseTheme();
}

View file

@ -1,4 +1,5 @@
$main-theme-color: crimson; $main-theme-color: crimson;
$body-bg-color: lighten($main-theme-color, 38%);
$anchor-color: $main-theme-color; $anchor-color: $main-theme-color;
$main-text-color: #333; $main-text-color: #333;
$border-color: #dadada; $border-color: #dadada;
@ -8,5 +9,5 @@ $secondary-text-color: white;
@import "_base.scss"; @import "_base.scss";
body.theme-scarlet { body.theme-scarlet {
@include baseTheme() @include baseTheme();
} }

13
scss/themes/seafoam.scss Normal file
View file

@ -0,0 +1,13 @@
$main-theme-color: teal;
$body-bg-color: lighten($main-theme-color, 70%);
$anchor-color: $main-theme-color;
$main-text-color: #333;
$border-color: #dadada;
$main-bg-color: white;
$secondary-text-color: white;
@import "_base.scss";
body.theme-seafoam {
@include baseTheme();
}