add cobalt blue theme (#78)

* added cobalt blue theme

* lighten nav items
This commit is contained in:
Chris 2018-04-11 22:11:47 -05:00 committed by Nolan Lawson
parent bdf658f54c
commit c8687635e8
4 changed files with 43 additions and 2 deletions

View file

@ -30,6 +30,10 @@ const themes = [
{ {
name: 'ozark', name: 'ozark',
label: 'Ozark' label: 'Ozark'
},
{
name: 'cobalt',
label: 'Cobalt'
} }
] ]

View file

@ -19,6 +19,7 @@ body.theme-oaken.offline,
body.theme-scarlet.offline, body.theme-scarlet.offline,
body.theme-seafoam.offline, body.theme-seafoam.offline,
body.theme-gecko.offline, body.theme-gecko.offline,
body.theme-ozark.offline { body.theme-ozark.offline,
body.theme-cobalt.offline {
@include baseTheme(); @include baseTheme();
} }

35
scss/themes/cobalt.scss Normal file
View file

@ -0,0 +1,35 @@
$main-theme-color: #08439b;
$body-bg-color: #05285c;
$anchor-color: #eeae00;
$main-text-color: #e0e0e0;
$main-bg-color: #08439b;
$border-color: lighten($main-bg-color, 16%);
$secondary-text-color: darken($main-text-color, 20%);
$toast-border: #fafafa;
$toast-bg: #333;
$focus-outline: lighten($main-bg-color, 16%);
$compose-background: lighten($main-theme-color, 32%);
@import "_base.scss";
@import "_dark.scss";
body.theme-cobalt {
@include baseTheme();
@include darkTheme();
--settings-list-item-text: $main-text-color;
--settings-list-item-text-hover: $main-text-color;
--action-button-fill-color-pressed: $anchor-color;
--action-button-fill-color-pressed-hover: darken($anchor-color, 2%);
--action-button-fill-color-pressed-active: darken($anchor-color, 15%);
--svg-fill: $secondary-text-color;
--nav-svg-fill: $main-text-color;
--nav-text-color: $main-text-color;
--nav-svg-fill-hover: $main-text-color;
--nav-text-color-hover: $main-text-color;
--nav-a-selected-border: $anchor-color;
--nav-a-selected-border-hover: $anchor-color;
}

View file

@ -51,6 +51,7 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
majesty: "blueviolet", majesty: "blueviolet",
gecko: "#4ab92f", gecko: "#4ab92f",
ozark: "#5263af", ozark: "#5263af",
cobalt: "#08439b",
offline: "#999999" offline: "#999999"
} }
if (localStorage.store_currentInstance && localStorage.store_instanceThemes) { if (localStorage.store_currentInstance && localStorage.store_instanceThemes) {
@ -129,4 +130,4 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
initialise the router --> initialise the router -->
<script src='%sapper.main%'></script> <script src='%sapper.main%'></script>
</body> </body>
</html> </html>