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',
label: 'Scarlet'
},
{
name: 'seafoam',
label: 'Seafoam'
},
{
name: 'hotpants',
label: 'Hotpants'
},
{
name: 'oaken',
label: 'Oaken'
},
{
name: 'majesty',
label: 'Majesty'
}
]

View file

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

View file

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

View file

@ -1,4 +1,5 @@
$main-theme-color: hotpink;
$body-bg-color: lighten($main-theme-color, 25%);
$anchor-color: $main-theme-color;
$main-text-color: #333;
$border-color: #dadada;
@ -8,5 +9,5 @@ $secondary-text-color: white;
@import "_base.scss";
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;
$body-bg-color: lighten($main-theme-color, 38%);
$anchor-color: $main-theme-color;
$main-text-color: #333;
$border-color: #dadada;
@ -8,5 +9,5 @@ $secondary-text-color: white;
@import "_base.scss";
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();
}