diff --git a/.stylelintrc.json b/.stylelintrc.json index 139033f..108fc51 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,6 +1,7 @@ { "ignoreFiles" : [ "assets/css/just-the-docs.scss", + "assets/css/dark-mode-preview.scss", "_sass/vendor/**/*.scss" ], "extends": [ diff --git a/.travis.yml b/.travis.yml index c7ec1c3..f9fa81d 100644 --- a/.travis.yml +++ b/.travis.yml @@ -6,6 +6,7 @@ env: install: - npm install + - gem install bundler --version '>=1.17.1' - bundle install script: diff --git a/_config.yml b/_config.yml index 22aef3f..9b02ede 100644 --- a/_config.yml +++ b/_config.yml @@ -28,3 +28,6 @@ search_enabled: true aux_links: "Just the Docs on GitHub": - "//github.com/pmarsceill/just-the-docs" + +# Color scheme currently only supports "dark" or nil (default) +color_scheme: nil diff --git a/_layouts/default.html b/_layouts/default.html index cc76786..016725a 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -5,7 +5,7 @@
- {{ site.title }} + {{ site.title }}
{% include nav.html %} diff --git a/_sass/base.scss b/_sass/base.scss index 7f417f3..1ea3903 100644 --- a/_sass/base.scss +++ b/_sass/base.scss @@ -7,6 +7,11 @@ box-sizing: border-box; } +::selection { + color: $white; + background: $link-color; +} + html { @include fs-4; } @@ -16,6 +21,7 @@ body { font-size: inherit; line-height: $body-line-height; color: $body-text-color; + background-color: $body-background-color; } p, @@ -64,7 +70,7 @@ a { a:not([class]) { text-decoration: none; - background-image: linear-gradient($grey-lt-100 0%, $grey-lt-100 100%); + background-image: linear-gradient($border-color 0%, $border-color 100%); background-repeat: repeat-x; background-position: 0 100%; background-size: 1px 1px; @@ -99,6 +105,6 @@ hr { height: 1px; padding: 0; margin: $sp-6 0; - background-color: $grey-lt-100; + background-color: $border-color; border: 0; } diff --git a/_sass/buttons.scss b/_sass/buttons.scss index a58c920..05db0ed 100644 --- a/_sass/buttons.scss +++ b/_sass/buttons.scss @@ -15,11 +15,11 @@ font-size: inherit; font-weight: 500; line-height: 1.5; - color: $purple-200; + color: $link-color; text-decoration: none; vertical-align: baseline; cursor: pointer; - background-color: #f7f7f7; + background-color: $base-button-color; border-width: 0; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); @@ -38,7 +38,7 @@ &:hover, &.zeroclipboard-is-hover { - color: $purple-300; + color: darken($link-color, 2%); } &:hover, @@ -46,13 +46,13 @@ &.zeroclipboard-is-hover, &.zeroclipboard-is-active { text-decoration: none; - background-color: #f4f4f4; + background-color: darken($base-button-color, 1%); } &:active, &.selected, &.zeroclipboard-is-active { - background-color: #ededed; + background-color: darken($base-button-color, 3%); background-image: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); } @@ -75,7 +75,7 @@ } .btn-outline { - color: $blue-100; + color: $link-color; background: transparent; box-shadow: inset 0 0 0 2px $grey-lt-300; @@ -83,7 +83,7 @@ &:active, &.zeroclipboard-is-hover, &.zeroclipboard-is-active { - color: $grey-dk-100; + color: darken($link-color, 4%); text-decoration: none; background-color: transparent; box-shadow: inset 0 0 0 3px $grey-lt-300; @@ -101,6 +101,10 @@ } } +.btn-primary { + @include btn-color($white, $btn-primary-color); +} + .btn-purple { @include btn-color($white, $purple-100); } diff --git a/_sass/code.scss b/_sass/code.scss index 3e740ed..f29a97c 100644 --- a/_sass/code.scss +++ b/_sass/code.scss @@ -6,7 +6,7 @@ code { padding: 0.2em 0.15em; font-weight: 400; - background-color: $grey-lt-000; + background-color: $code-background-color; border: $border $border-color; border-radius: $border-radius; } @@ -14,7 +14,7 @@ code { pre.highlight { padding: $sp-3; margin-bottom: 0; - background-color: $grey-lt-000; + background-color: $code-background-color; code { padding: 0; diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss new file mode 100644 index 0000000..6c2e8a9 --- /dev/null +++ b/_sass/color_schemes/dark.scss @@ -0,0 +1,14 @@ + +$body-background-color: $grey-dk-300; +$sidebar-color: $grey-dk-300; +$border-color: $grey-dk-200; + +$body-text-color: $grey-lt-300; +$body-heading-color: $grey-lt-000; +$nav-child-link-color: $grey-dk-000; + +$link-color: $blue-000; +$btn-primary-color: $blue-200; +$base-button-color: $grey-dk-250; + +$code-background-color: $grey-dk-250; diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss index 51399f2..82064a5 100644 --- a/_sass/custom/custom.scss +++ b/_sass/custom/custom.scss @@ -17,6 +17,7 @@ // $grey-dk-000: #959396; // $grey-dk-100: #5c5962; // $grey-dk-200: #44434d; +// $grey-dk-250: #302d36 !default; // $grey-dk-300: #27262b; // // $grey-lt-000: #f5f6fa; @@ -39,9 +40,16 @@ // $green-200: #009c7b; // $green-300: #026e57; // -// $body-text-color: $grey-dk-100; -// $body-heading-color: $grey-dk-300; -// $link-color: $purple-000; +// $body-background-color: $white !default; +// $sidebar-color: $grey-lt-000 !default; +// $code-background-color: $grey-lt-000 !default; + +// $body-text-color: $grey-dk-100 !default; +// $body-heading-color: $grey-dk-300 !default; +// $nav-child-link-color: $grey-dk-100 !default; +// $link-color: $purple-000 !default; +// $btn-primary-color: $purple-100 !default; +// $base-button-color: #f7f7f7 !default; // // // // // Media queries in pixels diff --git a/_sass/layout.scss b/_sass/layout.scss index 35b9631..27f15e9 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -21,7 +21,7 @@ flex-wrap: wrap; padding-top: $gutter-spacing-sm; padding-bottom: $gutter-spacing-sm; - background-color: $grey-lt-000; + background-color: $sidebar-color; @include mq(md) { flex-wrap: nowrap; @@ -75,10 +75,10 @@ } .page-header { - background-color: $grey-lt-000; + background-color: $sidebar-color; @include mq(md) { - background-color: $white; + background-color: $body-background-color; } .main-content { @@ -138,6 +138,6 @@ body { position: static; align-self: flex-end; justify-self: end; - background-color: $grey-lt-000; + background-color: $sidebar-color; } } diff --git a/_sass/navigation.scss b/_sass/navigation.scss index e5d580b..0a5fb7d 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -5,7 +5,8 @@ .site-title { display: block; flex: 1 1 auto; - background-color: $grey-lt-000; + color: $body-heading-color; + background-color: $sidebar-color; @include mq(md) { position: absolute; @@ -34,7 +35,7 @@ list-style: none; .navigation-list-link { - color: $grey-dk-100; + color: $nav-child-link-color; } .navigation-list-item { @@ -44,13 +45,13 @@ position: absolute; margin-top: 0.3em; margin-left: -0.8em; - color: $grey-dk-000; + color: rgba($body-text-color, 0.3); content: "- "; } &.active { &::before { - color: $grey-dk-100; + color: $body-text-color; } } } @@ -72,7 +73,7 @@ &.active { font-weight: 600; - color: $grey-dk-200; + color: $body-heading-color; text-decoration: none; } } diff --git a/_sass/search.scss b/_sass/search.scss index 7e3a802..32ec1db 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -39,20 +39,21 @@ display: block; width: 300px; margin-top: $gutter-spacing; - background: $white; + background: lighten($body-background-color, 1%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05); } } .search-input-wrap { display: flex; - background-color: $white; + background-color: $body-background-color; } .search-input { width: 100%; padding-top: $sp-1; padding-bottom: $sp-1; + background-color: $body-background-color; border-top: 0; border-right: 0; border-bottom: 0; @@ -64,7 +65,7 @@ box-shadow: none; + .search-icon { - fill: $purple-000; + fill: $link-color; } } @@ -107,6 +108,7 @@ padding-left: $sp-3; &:hover { - background-color: $grey-lt-000; + color: $body-heading-color; + background-color: darken($body-background-color, 2%); } } diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss index 59cb59e..8a09eda 100644 --- a/_sass/support/_variables.scss +++ b/_sass/support/_variables.scss @@ -17,6 +17,7 @@ $white: #fff !default; $grey-dk-000: #959396 !default; $grey-dk-100: #5c5962 !default; $grey-dk-200: #44434d !default; +$grey-dk-250: #302d36 !default; $grey-dk-300: #27262b !default; $grey-lt-000: #f5f6fa !default; @@ -49,9 +50,16 @@ $red-100: #f96e65 !default; $red-200: #e94c4c !default; $red-300: #dd2e2e !default; +$body-background-color: $white !default; +$sidebar-color: $grey-lt-000 !default; +$code-background-color: $grey-lt-000 !default; + $body-text-color: $grey-dk-100 !default; $body-heading-color: $grey-dk-300 !default; +$nav-child-link-color: $grey-dk-100 !default; $link-color: $purple-000 !default; +$btn-primary-color: $purple-100 !default; +$base-button-color: #f7f7f7 !default; // // Media queries in pixels diff --git a/_sass/tables.scss b/_sass/tables.scss index d97ed07..39bc0dc 100644 --- a/_sass/tables.scss +++ b/_sass/tables.scss @@ -25,7 +25,8 @@ td { padding-right: $sp-3; padding-bottom: $sp-2; padding-left: $sp-3; - border-bottom: $border $grey-lt-000; + background-color: lighten($body-background-color, 2%); + border-bottom: $border rgba($border-color, 0.5); border-left: $border $border-color; &:first-of-type { diff --git a/_sass/utilities/_colors.scss b/_sass/utilities/_colors.scss index 011f4c1..f3607ab 100644 --- a/_sass/utilities/_colors.scss +++ b/_sass/utilities/_colors.scss @@ -16,6 +16,10 @@ color: $grey-dk-200 !important; } +.text-grey-dk-250 { + color: $grey-dk-250 !important; +} + .text-grey-dk-300 { color: $grey-dk-300 !important; } @@ -130,6 +134,10 @@ background-color: $grey-dk-200 !important; } +.bg-grey-dk-250 { + background-color: $grey-dk-250 !important; +} + .bg-grey-dk-300 { background-color: $grey-dk-300 !important; } diff --git a/assets/css/dark-mode-preview.scss b/assets/css/dark-mode-preview.scss new file mode 100644 index 0000000..f30f9e0 --- /dev/null +++ b/assets/css/dark-mode-preview.scss @@ -0,0 +1,41 @@ +--- +# this ensures Jekyll reads the file to be transformed into CSS later +# only Main files contain this front matter, not partials. +--- + +// +// Import external dependencies +// + +@import "./vendor/normalize.scss/normalize.scss"; + +// +// Import Just the docs scss +// + +// Support +@import "./support/support"; + +// +// Import custom color scheme scss +// + +@import "./color_schemes/dark.scss"; + +// Modules +@import "./base"; +@import "./layout"; +@import "./content"; +@import "./navigation"; +@import "./typography"; +@import "./labels"; +@import "./buttons"; +@import "./search"; +@import "./tables"; +@import "./code"; +@import "./utilities/utilities"; + +// +// Import custom overrides +// +@import "./custom/custom"; diff --git a/assets/css/just-the-docs.scss b/assets/css/just-the-docs.scss index f47d6a8..601cdaa 100644 --- a/assets/css/just-the-docs.scss +++ b/assets/css/just-the-docs.scss @@ -4,7 +4,7 @@ --- // -// Import dependancies +// Import external dependencies // @import "./vendor/normalize.scss/normalize.scss"; @@ -16,8 +16,13 @@ // Support @import "./support/support"; -// Custom overrides -@import "./custom/custom"; +// +// Import custom color scheme scss +// + +{% if site.color_scheme == "dark" %} +@import "./color_schemes/dark.scss"; +{% endif %} // Modules @import "./base"; @@ -31,3 +36,8 @@ @import "./tables"; @import "./code"; @import "./utilities/utilities"; + +// +// Import custom overrides +// +@import "./custom/custom"; diff --git a/docs/configuration.md b/docs/configuration.md index e092418..94610ff 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -23,3 +23,28 @@ aux_links: "Just the Docs on GitHub": - "//github.com/pmarsceill/just-the-docs" ``` + +## Color scheme + +```yml +# Color scheme currently only supports "dark" or nil (default) +color_scheme: "dark" +``` + + + + +See [Customization]({{site.baseurl }}{% link docs/customization.md %}) for more information. diff --git a/docs/customization.md b/docs/customization.md index b5a4f83..6f0961b 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -15,11 +15,49 @@ nav_order: 6 --- -## Visual customization +## Color schemes +{: .d-inline-block :} + +New +{: .label .label-green :} + +Just the Docs supports two color schemes: light (default), and dark. + +To enable a color scheme, set the `color_scheme` parameter in your site's `_config.yml` file: + +#### Example +{: no_toc } + +```yml +# Color scheme currently only supports "dark" or nil (default) +color_scheme: "dark" +``` + + + + + +## Specific visual customization To customize your site’s aesthetic, open `_sass/custom/custom.scss` in your editor to see if there is a variable that you can override. Most styles like fonts, colors, spacing, etc.. are derived from these variables. To override a specific variable, uncomment out it’s line and change it’s value. -For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the link color variable on line `44`. Uncomment it out, and change it's value to our `$blue-000` variable, or another shade of your choosing. +For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the `$link-color` variable on line `50`. Uncomment it out, and change it's value to our `$blue-000` variable, or another shade of your choosing. + +#### Example +{: no_toc } ```scss // ... @@ -35,10 +73,3 @@ _Note:_ Editing the variables directly in `_sass/support/variables.scss` is not --- -## Themes -{: .d-inline-block :} - -Coming soon -{: .label .label-yellow :} - -Hard at work on a dark theme, and more. diff --git a/docs/utilities/color.md b/docs/utilities/color.md index f2bfc53..f025f91 100644 --- a/docs/utilities/color.md +++ b/docs/utilities/color.md @@ -34,6 +34,7 @@ All the colors used in Just the Docs have been systemsized into a series of vari | `grey-dk-000` | `.text-grey-dk-000` | `.bg-grey-dk-000` | | `grey-dk-100` | `.text-grey-dk-100` | `.bg-grey-dk-100` | | `grey-dk-200` | `.text-grey-dk-200` | `.bg-grey-dk-200` | +| `grey-dk-250` | `.text-grey-dk-250` | `.bg-grey-dk-250` | | `grey-dk-300` | `.text-grey-dk-300` | `.bg-grey-dk-300` | ## Purples diff --git a/index.md b/index.md index 3ad9ca6..e960388 100644 --- a/index.md +++ b/index.md @@ -12,7 +12,7 @@ permalink: / Just the Docs gives your documentation a jumpstart with a responsive Jekyll theme that is easily customizable and hosted on GitHub pages. {: .fs-6 .fw-300 } -[Get started now](#getting-started){: .btn .btn-purple .fs-5 .mb-4 .mb-md-0 .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn .fs-5 } +[Get started now](#getting-started){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn .fs-5 } --- diff --git a/just-the-docs.gemspec b/just-the-docs.gemspec index b092586..3d99264 100644 --- a/just-the-docs.gemspec +++ b/just-the-docs.gemspec @@ -13,8 +13,8 @@ Gem::Specification.new do |spec| spec.files = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(assets|bin|_layouts|_includes|lib|Rakefile|_sass|LICENSE|README)}i) } spec.executables << 'just-the-docs' - spec.add_runtime_dependency "jekyll", "~> 3.3" - spec.add_runtime_dependency "rake", "~> 10.0" + spec.add_runtime_dependency "jekyll", "~> 3.8.5" + spec.add_runtime_dependency "rake", "~> 12.3.1" - spec.add_development_dependency "bundler", "~> 1.12" + spec.add_development_dependency "bundler", "~> 1.17.1" end