Two Tone Blue Theme

[OG-Nimbi]

A clean theme with a blue background, dark sidebar, and optional dark cards. It can be applied in the _config.yml with color_scheme: twotone_blue.

The dark cards requires the _sass/styles/cards.scss file.

It also works quite well with the basic callout colors.

I figured I'd open a PR here for it in case you guys like it and would like to implement it as a built-in theme for just-the-docs.

This theme is currently in use on my website if anyone wants to see it live.

Screenshots

Files

• _sass/twotone_blue.scss

$color-scheme: twotone_blue;
$body-background-color: #2d5986;
$body-heading-color: $grey-lt-000;
$body-text-color: $grey-lt-200;
$link-color: $blue-000;
$nav-child-link-color: $grey-dk-000;
$sidebar-color: $grey-dk-300;
$base-button-color: $grey-dk-250;
$btn-primary-color: $blue-200;
$code-background-color: #31343f; // OneDarkJekyll default for syntax-one-dark-vivid
$code-linenumber-color: #dee2f7; // OneDarkJekyll .nf for syntax-one-dark-vivid
$feedback-color: darken($sidebar-color, 3%);
$table-background-color: $grey-dk-250;
$search-background-color: $grey-dk-250;
$search-result-preview-color: $grey-dk-000;
$border-color: $grey-dk-200;
$card-background-color: $grey-dk-300;
$container-background-color: $grey-dk-300;
$card-shadow-color: $grey-dk-200;
$card-shadow-hover-color: darken($card-shadow-color, 3%);

@import "../vendor/OneDarkJekyll/syntax"; // this is the one-dark-vivid atom syntax theme
@import "styles/twotone_blue"; // this is the twotone_blue theme stylesheet

• _sass/styles/cards.scss

.w3-card {
  display: block;
  background-color: $card-background-color;
  box-shadow: 0 4px 8px 0 $card-shadow-color;
  transition: 0.3s;
  border-radius: 5px;
}

.w3-card:hover {
  box-shadow: 0 8px 16px 0 $card-shadow-hover-color;
}

.w3-container {
  background-color: $container-background-color;
  padding: 2px 16px;
}