From da483d155f02720f9504311883322269294042ca Mon Sep 17 00:00:00 2001 From: Per Lundberg Date: Tue, 23 Mar 2021 23:08:29 +0200 Subject: [PATCH] (docs) Add dark theme --- .vscode/settings.json | 3 +- docs/docfx.json | 5 +- .../darkerfx/partials/affix.tmpl.partial | 39 ++ docs/templates/darkerfx/styles/main.css | 451 +++++++++++++ docs/templates/darkerfx/styles/main.css.map | 7 + docs/templates/darkerfx/styles/main.scss | 592 ++++++++++++++++++ .../templates/darkerfx/styles/toggle-theme.js | 27 + .../override}/partials/head.tmpl.partial | 3 +- .../override}/partials/scripts.tmpl.partial | 0 .../override}/styles/asciinema-player.css | 0 .../override/styles/override.css} | 2 +- 11 files changed, 1124 insertions(+), 5 deletions(-) create mode 100644 docs/templates/darkerfx/partials/affix.tmpl.partial create mode 100644 docs/templates/darkerfx/styles/main.css create mode 100644 docs/templates/darkerfx/styles/main.css.map create mode 100644 docs/templates/darkerfx/styles/main.scss create mode 100644 docs/templates/darkerfx/styles/toggle-theme.js rename docs/{template => templates/override}/partials/head.tmpl.partial (95%) rename docs/{template => templates/override}/partials/scripts.tmpl.partial (100%) rename docs/{template => templates/override}/styles/asciinema-player.css (100%) rename docs/{template/styles/main.css => templates/override/styles/override.css} (89%) diff --git a/.vscode/settings.json b/.vscode/settings.json index 1370c618..365c9fb8 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,6 +5,7 @@ "MSIL", "Per's", "Waka", - "hljs" + "hljs", + "sidetoc" ] } \ No newline at end of file diff --git a/docs/docfx.json b/docs/docfx.json index 38fba494..97b1183d 100644 --- a/docs/docfx.json +++ b/docs/docfx.json @@ -70,10 +70,11 @@ } }, - // Our custom template changes are in docs/template + // Our custom template changes are in docs/templates/override "template": [ "default", - "template" + "templates/override", + "templates/darkerfx" ], "postProcessors": [], diff --git a/docs/templates/darkerfx/partials/affix.tmpl.partial b/docs/templates/darkerfx/partials/affix.tmpl.partial new file mode 100644 index 00000000..ac9d2fbe --- /dev/null +++ b/docs/templates/darkerfx/partials/affix.tmpl.partial @@ -0,0 +1,39 @@ +{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}} + + diff --git a/docs/templates/darkerfx/styles/main.css b/docs/templates/darkerfx/styles/main.css new file mode 100644 index 00000000..755c0e05 --- /dev/null +++ b/docs/templates/darkerfx/styles/main.css @@ -0,0 +1,451 @@ +/* + * Based on darkfx theme for docfx, Copyright (c) Oscar Vasquez and/or + * steffen-wilke. All rights reserved. Licensed under the MIT license. + * + * I have modified the style to accomplish the following goals, and possibly + * others: + * + * - The dark theme should match (or resemble) the dark theme for + * https://docs.microsoft.com + * - The light theme should look identical (more or less) to the default docfx + * theme which I was previously using. + * + * The original darkfx theme can be found here: + * https://github.com/steffen-wilke/darkfx + */ +:root, +body.theme-dark { + --theme-foreground: #ccd5dc; + --theme-text: #e3e3e3; + --theme-navbar: #9d9d9d; + --theme-navbar-hover: #fff; + --theme-navbar-active: #fff; + --theme-breadcrumb: #999; + --theme-underline: #ddd; + --theme-form-control-border: #404040; + --theme-sidenav-border: #404040; + --theme-sidenav-background: #2d2d30; + --theme-sidenav-filter-background: #1d1d1d; + --theme-toc-hover: #fff; + --theme-background: #2d2d30; + --theme-body-background: #171717; + --theme-background-navbar: #222; + --theme-background-navbar-active: #080808; + --theme-background-subnav: #1d1d1d; + --theme-background-footer: #171717; + --theme-background-table-alt: #212123; + --theme-background-quote: #69696e; + --theme-inline-code: inherit; + --theme-inline-code-background: #454545; + --theme-code-border: #404040; + --theme-border-subnav: #404040; + --theme-border-footer: #404040; } + +body.theme-light { + --theme-foreground: #171717; + --theme-text: #171717; + --theme-navbar: #9d9d9d; + --theme-navbar-hover: #fff; + --theme-navbar-active: #fff; + --theme-breadcrumb: #337ab7; + --theme-form-control-border: #ccc; + --theme-sidenav-border: #e7e7e7; + --theme-sidenav-background: #f1f1f1; + --theme-sidenav-filter-background: #ffffff; + --theme-toc-hover: #4c4c4c; + --theme-background: #ffffff; + --theme-body-background: #ffffff; + --theme-background-navbar: #222; + --theme-background-navbar-active: #080808; + --theme-background-subnav: #f5f5f5; + --theme-background-footer: #f8f8f8; + --theme-background-table-alt: #f9f9f9; + --theme-inline-code: #c7254e; + --theme-inline-code-background: #f9f2f4; + --theme-code-border: #e7e7e7; + --theme-border-footer: #e7e7e7; } + +body { + color: var(--theme-text); + background-color: var(--theme-body-background); } + +article h4 { + border-bottom: 2px solid var(--theme-underline); } + +.navbar-brand > img { + color: var(--theme-background); } + +.subnav { + background-color: var(--theme-background-subnav); } + +.theme-dark .subnav { + border-bottom: 1px solid var(--theme-border-subnav); } + +.navbar-inverse { + background-color: var(--theme-background-navbar); } + +.navbar-inverse .navbar-nav > li > a, +.navbar-inverse .navbar-text { + color: var(--theme-navbar); + background-color: var(--theme-background-navbar); } + +/* Link in navbar being hovered */ +.navbar-inverse .navbar-nav > li > a:focus, +.navbar-inverse .navbar-nav > li > a:hover { + color: var(--theme-navbar-hover); + background-color: var(--theme-background-navbar); } + +/* Active link in navbar */ +.navbar-inverse .navbar-nav > .active > a, +.navbar-inverse .navbar-nav > .active > a:focus, +.navbar-inverse .navbar-nav > .active > a:hover { + color: var(--theme-navbar-active); + background-color: var(--theme-background-navbar-active); } + +.toc .nav > li > a { + color: var(--theme-foreground); } + +.sidefilter, +.sidetoc { + background-color: var(--theme-sidenav-background); + border-left: 1px solid var(--theme-sidenav-border); + border-right: 1px solid var(--theme-sidenav-border); } + +.toc-filter, +.toc-filter > input { + background-color: var(--theme-sidenav-filter-background); } + +.toc-filter > input:focus { + color: var(--theme-foreground); } + +.sidetoc > .toc { + background-color: var(--theme-sidenav-background); } + +body.theme-dark button, body.theme-dark a { + color: #5999d8; } +body.theme-dark .alert > p { + background-color: var(--theme-background-dark); } +body.theme-dark .alert > h5 { + background-color: var(--theme-background-dark); } +body.theme-dark .alert-info { + color: #94d0f2; + background-color: #1e2f37; + border-color: #293a42; } +body.theme-dark .alert-warning { + color: #e4c28c; + background-color: #2f2d1d; + border-color: #3a3828; } +body.theme-dark .alert-danger { + color: #ffa79e; + background-color: #372829; + border-color: #423333; } + +body.theme-light .alert-info { + color: #31708f; + background-color: #d9edf7; + border-color: #bce8f1; } +body.theme-light .alert-info hr { + border-top-color: #a6e1ec; } +body.theme-light .alert-info .alert-link { + color: #245269; } +body.theme-light .alert-warning { + color: #8a6d3b; + background-color: #fcf8e3; + border-color: #faebcc; } +body.theme-light .alert-warning hr { + border-top-color: #f7e1b5; } +body.theme-light .alert-warning .alert-link { + color: #66512c; } +body.theme-light .alert-danger { + color: #a94442; + background-color: #f2dede; + border-color: #ebccd1; } +body.theme-light .alert-danger hr { + border-top-color: #e4b9c0; } +body.theme-light .alert-danger .alert-link { + color: #843534; } + +.breadcrumb { + background-color: var(--theme-background-subnav); } + +.breadcrumb .label.label-primary { + background: #444; } + +#breadcrumb .breadcrumb > li a { + color: var(--theme-breadcrumb); } + +#breadcrumb .breadcrumb > li a:hover { + color: var(--theme-foreground); } + +.breadcrumb > li + li:before { + color: var(--theme-background-dark); } + +.theme-light .breadcrumb > li + li:before { + color: var(--theme-foreground); } + +.footer { + background-color: var(--theme-background-footer); + border-top: 1px solid var(--theme-border-footer); } + +.toc .nav > li > a:hover, +.toc .nav > li > a:focus { + color: var(--theme-toc-hover); } + +.form-control { + background-color: var(--theme-background-subnav); + -webkit-box-shadow: none; + box-shadow: none; + border: 1px solid var(--theme-form-control-border); } + +.form-control:focus { + border-color: #66afe9; + -webkit-box-shadow: none; + box-shadow: none; } + +input#search-query:focus { + color: var(--theme-foreground); } + +.table-bordered, +.table-bordered > tbody > tr > td, +.table-bordered > tbody > tr > th, +.table-bordered > tfoot > tr > td, +.table-bordered > tfoot > tr > th, +.table-bordered > thead > tr > td, +.table-bordered > thead > tr > th { + border: 1px solid var(--theme-background-dark); } + +.table-striped > tbody > tr:nth-of-type(odd) { + background-color: var(--theme-background-table-alt); } + +blockquote { + border-left: 5px solid var(--theme-background-quote); + color: var(--theme-background-quote); } + +.pagination > .disabled > a, +.pagination > .disabled > a:focus, +.pagination > .disabled > a:hover, +.pagination > .disabled > span, +.pagination > .disabled > span:focus, +.pagination > .disabled > span:hover { + background-color: var(--theme-background-subnav); + border-color: var(--theme-background-subnav); } + +.tabGroup a[role="tab"] { + border-bottom: 2px solid var(--theme-background-dark); } + +.tabGroup a[role="tab"][aria-selected="true"] { + color: var(--theme-foreground); } + +.tabGroup section[role="tabpanel"] { + border: 1px solid var(--theme-background-dark); } + +.sideaffix > div.contribution > ul > li > a.contribution-link:hover { + background-color: var(--theme-background); } + +.switch { + position: relative; + display: inline-block; + width: 40px; + height: 20px; } + +.switch input { + opacity: 0; + width: 0; + height: 0; } + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; } + +.slider:before { + position: absolute; + content: ""; + height: 14px; + width: 14px; + left: 4px; + bottom: 3px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; } + +input:checked + .slider { + background-color: #337ab7; } + +input:focus + .slider { + box-shadow: 0 0 1px #337ab7; } + +input:checked + .slider:before { + -webkit-transform: translateX(19px); + -ms-transform: translateX(19px); + transform: translateX(19px); } + +/* Rounded sliders */ +.slider.round { + border-radius: 20px; } + +.slider.round:before { + border-radius: 50%; } + +.toggle-mode .icon { + display: inline-block; } + +.toggle-mode .icon i { + font-style: normal; + font-size: 17px; + display: inline-block; + padding-right: 7px; + padding-left: 7px; + vertical-align: middle; } + +code { + color: var(--theme-inline-code); + background-color: var(--theme-inline-code-background); } + +pre code { + background-color: inherit; } + +pre { + padding: 0; + border: 1px solid var(--theme-code-border); + background-color: inherit; } + +/* + * highlight.js custom theme (dark version) + * + * Visual Studio 2015 dark style + * Author: Nicolas LLOBERA + * + * Original style can be found here: https://github.com/highlightjs/highlight.js/blob/main/src/styles/vs2015.css + */ +body.theme-dark .hljs { + display: block; + overflow-x: auto; + padding: 1em; + background: #1E1E1E; + color: #DCDCDC; } +body.theme-dark .hljs-keyword, +body.theme-dark .hljs-literal, +body.theme-dark .hljs-symbol, +body.theme-dark .hljs-name { + color: #569CD6; } +body.theme-dark .hljs-link { + color: #569CD6; + text-decoration: underline; } +body.theme-dark .hljs-built_in, +body.theme-dark .hljs-type { + color: #4EC9B0; } +body.theme-dark .hljs-number, +body.theme-dark .hljs-class { + color: #B8D7A3; } +body.theme-dark .hljs-string, +body.theme-dark .hljs-meta-string { + color: #D69D85; } +body.theme-dark .hljs-regexp, +body.theme-dark .hljs-template-tag { + color: #9A5334; } +body.theme-dark .hljs-subst, +body.theme-dark .hljs-function, +body.theme-dark .hljs-title, +body.theme-dark .hljs-params, +body.theme-dark .hljs-formula { + color: #DCDCDC; } +body.theme-dark .hljs-comment, +body.theme-dark .hljs-quote { + color: #57A64A; + font-style: italic; } +body.theme-dark .hljs-doctag { + color: #608B4E; } +body.theme-dark .hljs-meta, +body.theme-dark .hljs-meta-keyword, +body.theme-dark .hljs-tag { + color: #9B9B9B; } +body.theme-dark .hljs-variable, +body.theme-dark .hljs-template-variable { + color: #BD63C5; } +body.theme-dark .hljs-attr, +body.theme-dark .hljs-attribute, +body.theme-dark .hljs-builtin-name { + color: #9CDCFE; } +body.theme-dark .hljs-section { + color: gold; } +body.theme-dark .hljs-emphasis { + font-style: italic; } +body.theme-dark .hljs-strong { + font-weight: bold; } +body.theme-dark .hljs-bullet, +body.theme-dark .hljs-selector-tag, +body.theme-dark .hljs-selector-id, +body.theme-dark .hljs-selector-class, +body.theme-dark .hljs-selector-attr, +body.theme-dark .hljs-selector-pseudo { + color: #D7BA7D; } +body.theme-dark .hljs-addition { + background-color: #144212; + display: inline-block; + width: 100%; } +body.theme-dark .hljs-deletion { + background-color: #600; + display: inline-block; + width: 100%; } + +/* + * highlight.js custom theme (light version) + * + * Visual Studio-like style based on original C# coloring by Jason Diamond + + * + * Original style can be found here: + * https://github.com/highlightjs/highlight.js/blob/main/src/styles/vs.css + */ +body.theme-light .hljs { + display: block; + overflow-x: auto; + padding: 1em; + background: white; + color: black; } +body.theme-light .hljs-comment, +body.theme-light .hljs-quote, +body.theme-light .hljs-variable { + color: #008000; } +body.theme-light .hljs-keyword, +body.theme-light .hljs-selector-tag, +body.theme-light .hljs-built_in, +body.theme-light .hljs-name, +body.theme-light .hljs-tag { + color: #00f; } +body.theme-light .hljs-string, +body.theme-light .hljs-title, +body.theme-light .hljs-section, +body.theme-light .hljs-attribute, +body.theme-light .hljs-literal, +body.theme-light .hljs-template-tag, +body.theme-light .hljs-template-variable, +body.theme-light .hljs-type, +body.theme-light .hljs-addition { + color: #a31515; } +body.theme-light .hljs-deletion, +body.theme-light .hljs-selector-attr, +body.theme-light .hljs-selector-pseudo, +body.theme-light .hljs-meta { + color: #2b91af; } +body.theme-light .hljs-doctag { + color: #808080; } +body.theme-light .hljs-attr { + color: #f00; } +body.theme-light .hljs-symbol, +body.theme-light .hljs-bullet, +body.theme-light .hljs-link { + color: #00b0e8; } +body.theme-light .hljs-emphasis { + font-style: italic; } +body.theme-light .hljs-strong { + font-weight: bold; } + +/*# sourceMappingURL=main.css.map */ diff --git a/docs/templates/darkerfx/styles/main.css.map b/docs/templates/darkerfx/styles/main.css.map new file mode 100644 index 00000000..3a66a94e --- /dev/null +++ b/docs/templates/darkerfx/styles/main.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["main.scss"], +"names": [], +"file": "main.css" +} diff --git a/docs/templates/darkerfx/styles/main.scss b/docs/templates/darkerfx/styles/main.scss new file mode 100644 index 00000000..11ddbb33 --- /dev/null +++ b/docs/templates/darkerfx/styles/main.scss @@ -0,0 +1,592 @@ +/* + * Based on darkfx theme for docfx, Copyright (c) Oscar Vasquez and/or + * steffen-wilke. All rights reserved. Licensed under the MIT license. + * + * I have modified the style to accomplish the following goals, and possibly + * others: + * + * - The dark theme should match (or resemble) the dark theme for + * https://docs.microsoft.com + * - The light theme should look identical (more or less) to the default docfx + * theme which I was previously using. + * + * The original darkfx theme can be found here: + * https://github.com/steffen-wilke/darkfx + */ + +:root, +body.theme-dark { + --theme-foreground: #ccd5dc; + --theme-text: #e3e3e3; + --theme-navbar: #9d9d9d; + --theme-navbar-hover: #fff; + --theme-navbar-active: #fff; + --theme-breadcrumb: #999; + --theme-underline: #ddd; + --theme-form-control-border: #404040; + --theme-sidenav-border: #404040; + --theme-sidenav-background: #2d2d30; + --theme-sidenav-filter-background: #1d1d1d; + --theme-toc-hover: #fff; + --theme-background: #2d2d30; + --theme-body-background: #171717; + --theme-background-navbar: #222; + --theme-background-navbar-active: #080808; + --theme-background-subnav: #1d1d1d; + --theme-background-footer: #171717; + --theme-background-table-alt: #212123; + --theme-background-quote: #69696e; + --theme-inline-code: inherit; + --theme-inline-code-background: #454545; + --theme-code-border: #404040; + --theme-border-subnav: #404040; + --theme-border-footer: #404040; +} + +body.theme-light { + --theme-foreground: #171717; + --theme-text: #171717; + --theme-navbar: #9d9d9d; + --theme-navbar-hover: #fff; + --theme-navbar-active: #fff; + --theme-breadcrumb: #337ab7; + --theme-form-control-border: #ccc; + --theme-sidenav-border: #e7e7e7; + --theme-sidenav-background: #f1f1f1; + --theme-sidenav-filter-background: #ffffff; + --theme-toc-hover: #4c4c4c; + --theme-background: #ffffff; + --theme-body-background: #ffffff; + --theme-background-navbar: #222; + --theme-background-navbar-active: #080808; + --theme-background-subnav: #f5f5f5; + --theme-background-footer: #f8f8f8; + --theme-background-table-alt: #f9f9f9; + --theme-inline-code: #c7254e; + --theme-inline-code-background: #f9f2f4; + --theme-code-border: #e7e7e7; + --theme-border-footer: #e7e7e7; +} + +body { + color: var(--theme-text); + background-color: var(--theme-body-background); +} + +article h4 { + border-bottom: 2px solid var(--theme-underline); +} + +.navbar-brand>img { + color: var(--theme-background); +} + +.subnav { + background-color: var(--theme-background-subnav); +} + +.theme-dark .subnav { + border-bottom: 1px solid var(--theme-border-subnav); +} + +.navbar-inverse { + background-color: var(--theme-background-navbar); +} + +.navbar-inverse .navbar-nav>li>a, +.navbar-inverse .navbar-text { + color: var(--theme-navbar); + background-color: var(--theme-background-navbar); +} + +/* Link in navbar being hovered */ +.navbar-inverse .navbar-nav>li>a:focus, +.navbar-inverse .navbar-nav>li>a:hover { + color: var(--theme-navbar-hover); + background-color: var(--theme-background-navbar); +} + +/* Active link in navbar */ +.navbar-inverse .navbar-nav>.active>a, +.navbar-inverse .navbar-nav>.active>a:focus, +.navbar-inverse .navbar-nav>.active>a:hover { + color: var(--theme-navbar-active); + background-color: var(--theme-background-navbar-active); +} + +.toc .nav>li>a { + color: var(--theme-foreground); +} + +.sidefilter, +.sidetoc { + background-color: var(--theme-sidenav-background); + border-left: 1px solid var(--theme-sidenav-border); + border-right: 1px solid var(--theme-sidenav-border); +} + +.toc-filter, +.toc-filter>input { + background-color: var(--theme-sidenav-filter-background); +} + +.toc-filter>input:focus { + color: var(--theme-foreground); +} + +.sidetoc>.toc { + background-color: var(--theme-sidenav-background); +} + +body.theme-dark { + button, a { + color: #5999d8; + } + + .alert>p { + background-color: var(--theme-background-dark); + } + + .alert>h5 { + background-color: var(--theme-background-dark); + } + + .alert-info { + color: #94d0f2; + background-color: #1e2f37; + border-color: #293a42; + } + + .alert-warning { + color: #e4c28c; + background-color: #2f2d1d; + border-color: #3a3828 + } + + .alert-danger { + color: #ffa79e; + background-color: #372829; + border-color: #423333 + } +} + +body.theme-light { + .alert-info { + color: #31708f; + background-color: #d9edf7; + border-color: #bce8f1 + } + + .alert-info hr { + border-top-color: #a6e1ec + } + + .alert-info .alert-link { + color: #245269 + } + + .alert-warning { + color: #8a6d3b; + background-color: #fcf8e3; + border-color: #faebcc + } + + .alert-warning hr { + border-top-color: #f7e1b5 + } + + .alert-warning .alert-link { + color: #66512c + } + + .alert-danger { + color: #a94442; + background-color: #f2dede; + border-color: #ebccd1 + } + + .alert-danger hr { + border-top-color: #e4b9c0 + } + + .alert-danger .alert-link { + color: #843534 + } +} + +.breadcrumb { + background-color: var(--theme-background-subnav); +} + +.breadcrumb .label.label-primary { + background: #444; +} + +#breadcrumb .breadcrumb>li a { + color: var(--theme-breadcrumb); +} + +#breadcrumb .breadcrumb>li a:hover { + color: var(--theme-foreground); +} + +.breadcrumb>li+li:before { + color: var(--theme-background-dark); +} + +.theme-light .breadcrumb>li+li:before { + color: var(--theme-foreground) +} + +.footer { + background-color: var(--theme-background-footer); + border-top: 1px solid var(--theme-border-footer); +} + +.toc .nav>li>a:hover, +.toc .nav>li>a:focus { + color: var(--theme-toc-hover); +} + +.form-control { + background-color: var(--theme-background-subnav); + -webkit-box-shadow: none; + box-shadow: none; + border: 1px solid var(--theme-form-control-border); +} + +.form-control:focus { + border-color: #66afe9; + -webkit-box-shadow: none; + box-shadow: none; +} + +input#search-query:focus { + color: var(--theme-foreground); +} + +.table-bordered, +.table-bordered>tbody>tr>td, +.table-bordered>tbody>tr>th, +.table-bordered>tfoot>tr>td, +.table-bordered>tfoot>tr>th, +.table-bordered>thead>tr>td, +.table-bordered>thead>tr>th { + border: 1px solid var(--theme-background-dark); +} + +.table-striped>tbody>tr:nth-of-type(odd) { + background-color: var(--theme-background-table-alt); +} + +blockquote { + border-left: 5px solid var(--theme-background-quote); + color: var(--theme-background-quote); +} + +.pagination>.disabled>a, +.pagination>.disabled>a:focus, +.pagination>.disabled>a:hover, +.pagination>.disabled>span, +.pagination>.disabled>span:focus, +.pagination>.disabled>span:hover { + background-color: var(--theme-background-subnav); + border-color: var(--theme-background-subnav); +} + +.tabGroup a[role="tab"] { + border-bottom: 2px solid var(--theme-background-dark); +} + +.tabGroup a[role="tab"][aria-selected="true"] { + color: var(--theme-foreground); +} + +.tabGroup section[role="tabpanel"] { + border: 1px solid var(--theme-background-dark); +} + +.sideaffix>div.contribution>ul>li>a.contribution-link:hover { + background-color: var(--theme-background); +} + +.switch { + position: relative; + display: inline-block; + width: 40px; + height: 20px; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 14px; + width: 14px; + left: 4px; + bottom: 3px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked+.slider { + background-color: #337ab7; +} + +input:focus+.slider { + box-shadow: 0 0 1px #337ab7; +} + +input:checked+.slider:before { + -webkit-transform: translateX(19px); + -ms-transform: translateX(19px); + transform: translateX(19px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 20px; +} + +.slider.round:before { + border-radius: 50%; +} + +.toggle-mode .icon { + display: inline-block; +} + +.toggle-mode .icon i { + font-style: normal; + font-size: 17px; + display: inline-block; + padding-right: 7px; + padding-left: 7px; + vertical-align: middle; +} + +code { + color: var(--theme-inline-code); + background-color: var(--theme-inline-code-background); +} + +pre code { + background-color: inherit; +} + +pre { + padding: 0; + border: 1px solid var(--theme-code-border); + background-color: inherit; +} + +/* + * highlight.js custom theme (dark version) + * + * Visual Studio 2015 dark style + * Author: Nicolas LLOBERA + * + * Original style can be found here: https://github.com/highlightjs/highlight.js/blob/main/src/styles/vs2015.css + */ +body.theme-dark { + .hljs { + display: block; + overflow-x: auto; + padding: 1em; + background: #1E1E1E; + color: #DCDCDC; + } + + .hljs-keyword, + .hljs-literal, + .hljs-symbol, + .hljs-name { + color: #569CD6; + } + + .hljs-link { + color: #569CD6; + text-decoration: underline; + } + + .hljs-built_in, + .hljs-type { + color: #4EC9B0; + } + + .hljs-number, + .hljs-class { + color: #B8D7A3; + } + + .hljs-string, + .hljs-meta-string { + color: #D69D85; + } + + .hljs-regexp, + .hljs-template-tag { + color: #9A5334; + } + + .hljs-subst, + .hljs-function, + .hljs-title, + .hljs-params, + .hljs-formula { + color: #DCDCDC; + } + + .hljs-comment, + .hljs-quote { + color: #57A64A; + font-style: italic; + } + + .hljs-doctag { + color: #608B4E; + } + + .hljs-meta, + .hljs-meta-keyword, + .hljs-tag { + color: #9B9B9B; + } + + .hljs-variable, + .hljs-template-variable { + color: #BD63C5; + } + + .hljs-attr, + .hljs-attribute, + .hljs-builtin-name { + color: #9CDCFE; + } + + .hljs-section { + color: gold; + } + + .hljs-emphasis { + font-style: italic; + } + + .hljs-strong { + font-weight: bold; + } + + .hljs-bullet, + .hljs-selector-tag, + .hljs-selector-id, + .hljs-selector-class, + .hljs-selector-attr, + .hljs-selector-pseudo { + color: #D7BA7D; + } + + .hljs-addition { + background-color: #144212; + display: inline-block; + width: 100%; + } + + .hljs-deletion { + background-color: #600; + display: inline-block; + width: 100%; + } +} + +/* + * highlight.js custom theme (light version) + * + * Visual Studio-like style based on original C# coloring by Jason Diamond + + * + * Original style can be found here: + * https://github.com/highlightjs/highlight.js/blob/main/src/styles/vs.css + */ +body.theme-light { + .hljs { + display: block; + overflow-x: auto; + padding: 1em; + background: white; + color: black; + } + + .hljs-comment, + .hljs-quote, + .hljs-variable { + color: #008000; + } + + .hljs-keyword, + .hljs-selector-tag, + .hljs-built_in, + .hljs-name, + .hljs-tag { + color: #00f; + } + + .hljs-string, + .hljs-title, + .hljs-section, + .hljs-attribute, + .hljs-literal, + .hljs-template-tag, + .hljs-template-variable, + .hljs-type, + .hljs-addition { + color: #a31515; + } + + .hljs-deletion, + .hljs-selector-attr, + .hljs-selector-pseudo, + .hljs-meta { + color: #2b91af; + } + + .hljs-doctag { + color: #808080; + } + + .hljs-attr { + color: #f00; + } + + .hljs-symbol, + .hljs-bullet, + .hljs-link { + color: #00b0e8; + } + + + .hljs-emphasis { + font-style: italic; + } + + .hljs-strong { + font-weight: bold; + } +} diff --git a/docs/templates/darkerfx/styles/toggle-theme.js b/docs/templates/darkerfx/styles/toggle-theme.js new file mode 100644 index 00000000..32bf5129 --- /dev/null +++ b/docs/templates/darkerfx/styles/toggle-theme.js @@ -0,0 +1,27 @@ +const sw = document.getElementById("switch-style"), b = document.body; + +if (sw && b) { + if (window.localStorage && localStorage.getItem("theme") === "theme-dark") { + // Browser supports local storage and dark mode is configured. + sw.checked = true; + } + else { + // Browser does not support local storage, or no stored theme setting is + // present. Determine dark mode based on browser settings. Browsers + // which don't support media matching will default to light theme, in + // line with what most people would expect from a web page. + sw.checked = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + } + + b.classList.toggle("theme-dark", sw.checked) + b.classList.toggle("theme-light", !sw.checked) + + sw.addEventListener("change", function () { + b.classList.toggle("theme-dark", this.checked) + b.classList.toggle("theme-light", !this.checked) + + if (window.localStorage) { + localStorage.setItem("theme", this.checked ? "theme-dark" : "theme-light"); + } + }) +} diff --git a/docs/template/partials/head.tmpl.partial b/docs/templates/override/partials/head.tmpl.partial similarity index 95% rename from docs/template/partials/head.tmpl.partial rename to docs/templates/override/partials/head.tmpl.partial index 684348ed..b73f6a97 100644 --- a/docs/template/partials/head.tmpl.partial +++ b/docs/templates/override/partials/head.tmpl.partial @@ -10,9 +10,10 @@ {{#_description}}{{/_description}} + - + {{#_noindex}}{{/_noindex}} diff --git a/docs/template/partials/scripts.tmpl.partial b/docs/templates/override/partials/scripts.tmpl.partial similarity index 100% rename from docs/template/partials/scripts.tmpl.partial rename to docs/templates/override/partials/scripts.tmpl.partial diff --git a/docs/template/styles/asciinema-player.css b/docs/templates/override/styles/asciinema-player.css similarity index 100% rename from docs/template/styles/asciinema-player.css rename to docs/templates/override/styles/asciinema-player.css diff --git a/docs/template/styles/main.css b/docs/templates/override/styles/override.css similarity index 89% rename from docs/template/styles/main.css rename to docs/templates/override/styles/override.css index 95b3b7fa..6c84d073 100644 --- a/docs/template/styles/main.css +++ b/docs/templates/override/styles/override.css @@ -1,4 +1,4 @@ -/* main.css - CSS overrides go here */ +/* override.css - CSS overrides go here */ body { font-size: 18px;