From 6511b1ae4c2b5c0f9146e92f06372b93b70d96a0 Mon Sep 17 00:00:00 2001 From: Hsu Still <341464@gmail.com> Date: Fri, 6 Apr 2018 17:18:08 +0800 Subject: [PATCH] Implement rudimentary support for theme switching --- .../partials/footer.tmpl.partial | 19 ++ .../partials/head.tmpl.partial | 4 +- .../partials/scripts.tmpl.partial | 3 +- .../light-dark-theme/styles/dark.css | 4 +- .../light-dark-theme/styles/light.css | 175 +----------------- .../light-dark-theme/styles/styleswitcher.js | 69 +++++++ 6 files changed, 105 insertions(+), 169 deletions(-) create mode 100644 docs/_template/light-dark-theme/partials/footer.tmpl.partial create mode 100644 docs/_template/light-dark-theme/styles/styleswitcher.js diff --git a/docs/_template/light-dark-theme/partials/footer.tmpl.partial b/docs/_template/light-dark-theme/partials/footer.tmpl.partial new file mode 100644 index 000000000..1f6afa00e --- /dev/null +++ b/docs/_template/light-dark-theme/partials/footer.tmpl.partial @@ -0,0 +1,19 @@ +{{!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/_template/light-dark-theme/partials/head.tmpl.partial b/docs/_template/light-dark-theme/partials/head.tmpl.partial index 6cf00b897..83c284fd7 100644 --- a/docs/_template/light-dark-theme/partials/head.tmpl.partial +++ b/docs/_template/light-dark-theme/partials/head.tmpl.partial @@ -11,8 +11,8 @@ - - + + diff --git a/docs/_template/light-dark-theme/partials/scripts.tmpl.partial b/docs/_template/light-dark-theme/partials/scripts.tmpl.partial index cd7d0074c..420568070 100644 --- a/docs/_template/light-dark-theme/partials/scripts.tmpl.partial +++ b/docs/_template/light-dark-theme/partials/scripts.tmpl.partial @@ -5,4 +5,5 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/docs/_template/light-dark-theme/styles/dark.css b/docs/_template/light-dark-theme/styles/dark.css index c92d777bc..a268ea4f8 100644 --- a/docs/_template/light-dark-theme/styles/dark.css +++ b/docs/_template/light-dark-theme/styles/dark.css @@ -1,5 +1,6 @@ /* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. See License.txt in the project root for license information. */ @import url('https://fonts.googleapis.com/css?family=Titillium+Web'); +@import url('dracula.css'); html, body { font-family: 'Titillium Web', 'Segoe UI', Tahoma, Helvetica, sans-serif; @@ -177,7 +178,8 @@ body .toc{ code { color:white; background-color:#4a4c52; - border-radius:4px + border-radius:4px; + padding: 3px 7px; } pre { background-color: #282a36; diff --git a/docs/_template/light-dark-theme/styles/light.css b/docs/_template/light-dark-theme/styles/light.css index 3ccf50e2a..5b1d5abe9 100644 --- a/docs/_template/light-dark-theme/styles/light.css +++ b/docs/_template/light-dark-theme/styles/light.css @@ -4,193 +4,38 @@ html, body { font-family: 'Titillium Web', 'Segoe UI', Tahoma, Helvetica, sans-serif; height: 100%; - color: #212121; - background: #C0C0C0; + color: #000; + background: #fff; font-size: 15px; } -button, -a { - color: #64B5F6; -} -button:hover, -button:focus, -a:hover, -a:focus { - color: #2196F3; -} -a.disable, -a.disable:hover { - color: #EEEEEE; -} -.divider { - color: #37474F; -} -hr { - border-color: #37474F; -} header .navbar { border-width: 0 0 0px; border-radius: 0; } -.subnav { - background: #383838 -} - -.inheritance h5, .inheritedMembers h5{ - border-bottom: 1px solid #37474F; -} - -article h4{ - border-bottom: 1px solid #37474F; -} -.docs-search { - background: #424242; -} -.search-results-group-heading { - color: #424242; -} -.search-close { - color: #424242; -} -.sidetoc { - background-color: #1b1b1b; - border-left: 0px solid #37474F; - border-right: 0px solid #37474F; -} .sideaffix{ overflow: visible; } - body .toc{ background-color: inherit; overflow: visible; } -.toc .nav > li > a { - color: rgb(218, 218, 218); -} -.toc .nav > li > a:hover, -.toc .nav > li > a:focus { - color: #E0E0E0; -} -.toc .nav > li.active > a { - color: #90CAF9; -} -.toc .nav > li.active > a:hover, -.toc .nav > li.active > a:focus { - color: #4FC3F7; -} - -.sidefilter { - background-color: #1b1b1b; - border-left: 0px solid #37474F; - border-right: 0px solid #37474F; -} -.affix ul > li > a:hover { - background: none; - color: #EEEEEE; -} -.affix ul > li.active > a, -.affix ul > li.active > a:before { - color: #B3E5FC; -} -.affix ul > li > a { - color: #EEEEEE; -} -.affix > ul > li.active > a, -.affix > ul > li.active > a:before { - color: #B3E5FC; -} -.tryspan { - border-color: #37474F; -} -.footer { - border-top: 1px solid #5F5F5F; - background: #616161; -} - -.alert-info { - color: #d9edf7; - background: #004458; - border-color: #005873 -} -.alert-warning { - color: #fffaf2; - background: #80551a; - border-color: #99661f -} -.alert-danger { - color: #fff2f2; - background: #4d0000; - border-color: #660000 -} - -/* For tabbed content */ - -.tabGroup { - margin-top: 1rem; } - .tabGroup ul[role="tablist"] { - margin: 0; - padding: 0; - list-style: none; } - .tabGroup ul[role="tablist"] > li { - list-style: none; - display: inline-block; } - .tabGroup a[role="tab"] { - color: white; - box-sizing: border-box; - display: inline-block; - padding: 5px 7.5px; - text-decoration: none; - border-bottom: 2px solid #fff; } - .tabGroup a[role="tab"]:hover, .tabGroup a[role="tab"]:focus, .tabGroup a[role="tab"][aria-selected="true"] { - border-bottom: 2px solid #607D8B; } - .tabGroup a[role="tab"][aria-selected="true"] { - color: #81D4FA; } - .tabGroup a[role="tab"]:hover, .tabGroup a[role="tab"]:focus { - color: #29B6F6; } - .tabGroup a[role="tab"]:focus { - outline: 1px solid #607D8B; - outline-offset: -1px; } - @media (min-width: 768px) { - .tabGroup a[role="tab"] { - padding: 5px 15px; } } - .tabGroup section[role="tabpanel"] { - border: 1px solid #607D8B; - padding: 15px; - margin: 0; - overflow: hidden; } - .tabGroup section[role="tabpanel"] > .codeHeader, - .tabGroup section[role="tabpanel"] > pre { - margin-left: -16px; - margin-right: -16px; } - .tabGroup section[role="tabpanel"] > :first-child { - margin-top: 0; } - .tabGroup section[role="tabpanel"] > pre:last-child { - display: block; - margin-bottom: -16px; } - -.mainContainer[dir='rtl'] main ul[role="tablist"] { - margin: 0; } - /* code */ code { - color:white; - background-color:#4a4c52; - border-radius:4px -} -pre { - background-color: #282a36; + color:#222f3d; + background-color: #f9f9f9; + border-radius:4px; + padding: 3px 7px; } /* table */ .table-striped>tbody>tr:nth-of-type(odd) { - background-color:#333333; - color: #d3d3d3 + color:#333333; + background-color: #d3d3d3 } tbody>tr { - background-color:#424242; - color: #c0c0c0 + color:#424242; + background-color: #c0c0c0 } .table>tbody+tbody { border-top:2px solid rgb(173, 173, 173) diff --git a/docs/_template/light-dark-theme/styles/styleswitcher.js b/docs/_template/light-dark-theme/styles/styleswitcher.js new file mode 100644 index 000000000..cd9807e3f --- /dev/null +++ b/docs/_template/light-dark-theme/styles/styleswitcher.js @@ -0,0 +1,69 @@ +function getSelectionChange(e){ + var selectValue = e.options[e.selectedIndex].value; + setActiveStyleSheet(selectValue); +} + +function setActiveStyleSheet(title) { + var i, a, main; + for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { + if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { + a.disabled = true; + if(a.getAttribute("title") == title) a.disabled = false; + } + } +} + +function getActiveStyleSheet() { + var i, a; + for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { + if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title"); + } + return null; +} + +function getPreferredStyleSheet() { + var i, a; + for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { + if(a.getAttribute("rel").indexOf("style") != -1 + && a.getAttribute("rel").indexOf("alt") == -1 + && a.getAttribute("title") + ) return a.getAttribute("title"); + } + return null; +} + +function createCookie(name,value,days) { + if (days) { + var date = new Date(); + date.setTime(date.getTime()+(days*24*60*60*1000)); + var expires = "; expires="+date.toGMTString(); + } + else expires = ""; + document.cookie = name+"="+value+expires+"; path=/"; +} + +function readCookie(name) { + var nameEQ = name + "="; + var ca = document.cookie.split(';'); + for(var i=0;i < ca.length;i++) { + var c = ca[i]; + while (c.charAt(0)==' ') c = c.substring(1,c.length); + if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); + } + return null; +} + +window.onload = function(e) { + var cookie = readCookie("style"); + var title = cookie ? cookie : getPreferredStyleSheet(); + setActiveStyleSheet(title); +} + +window.onunload = function(e) { + var title = getActiveStyleSheet(); + createCookie("style", title, 365); +} + +var cookie = readCookie("style"); +var title = cookie ? cookie : getPreferredStyleSheet(); +setActiveStyleSheet(title);