finish theme engine
This commit is contained in:
parent
1f9029f457
commit
586ba670b8
|
@ -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'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
|
@ -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();
|
||||||
|
}
|
|
@ -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;
|
$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();
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 New Issue