finish theme engine
This commit is contained in:
parent
1f9029f457
commit
586ba670b8
|
@ -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'
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
|
|
@ -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
13
scss/themes/majesty.scss
Normal 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
13
scss/themes/oaken.scss
Normal 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();
|
||||
}
|
|
@ -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
13
scss/themes/seafoam.scss
Normal 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();
|
||||
}
|
Loading…
Reference in a new issue