diff --git a/routes/_static/themes.js b/routes/_static/themes.js index 82186ce..aac8914 100644 --- a/routes/_static/themes.js +++ b/routes/_static/themes.js @@ -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' } ] diff --git a/scss/themes/_base.scss b/scss/themes/_base.scss index 46eb95d..4eca521 100644 --- a/scss/themes/_base.scss +++ b/scss/themes/_base.scss @@ -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; diff --git a/scss/themes/_default.scss b/scss/themes/_default.scss index 4d73f5f..bec4df7 100644 --- a/scss/themes/_default.scss +++ b/scss/themes/_default.scss @@ -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(); } diff --git a/scss/themes/hotpants.scss b/scss/themes/hotpants.scss index dc778ff..23f69f7 100644 --- a/scss/themes/hotpants.scss +++ b/scss/themes/hotpants.scss @@ -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(); } diff --git a/scss/themes/majesty.scss b/scss/themes/majesty.scss new file mode 100644 index 0000000..325f96e --- /dev/null +++ b/scss/themes/majesty.scss @@ -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(); +} diff --git a/scss/themes/oaken.scss b/scss/themes/oaken.scss new file mode 100644 index 0000000..8623e53 --- /dev/null +++ b/scss/themes/oaken.scss @@ -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(); +} diff --git a/scss/themes/scarlet.scss b/scss/themes/scarlet.scss index 305699e..2d0cc48 100644 --- a/scss/themes/scarlet.scss +++ b/scss/themes/scarlet.scss @@ -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(); } diff --git a/scss/themes/seafoam.scss b/scss/themes/seafoam.scss new file mode 100644 index 0000000..6fb1389 --- /dev/null +++ b/scss/themes/seafoam.scss @@ -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(); +}