diff --git a/doc/source/ystatic/dark_theme.css b/doc/source/ystatic/dark_theme.css
new file mode 100644
index 000000000..239aa462b
--- /dev/null
+++ b/doc/source/ystatic/dark_theme.css
@@ -0,0 +1,720 @@
+/*
+ * flasky.css_t
+ * ~~~~~~~~~~~~
+ *
+ * :copyright: Copyright 2010 by Armin Ronacher. Modifications by Kenneth Reitz.
+ * :license: Flask Design License, see LICENSE for details.
+ */
+
+
+
+
+
+ @import url("basic.css");
+
+ /* -- page layout ----------------------------------------------------------- */
+ 
+ body {
+     font: 400 16px Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+     /*font-family: 'goudy old style', 'minion pro', 'bell mt', Georgia, 'Hiragino Mincho Pro';
+     font-size: 17px; */
+     line-height: normal;
+     background-color: #333;
+     color: #333;
+     margin: 0;
+     padding: 0;
+     text-shadow: 0 1px 3px rgba(0,0,0,0.5);
+ }
+ 
+ strong {
+     font-weight: bold;
+ }
+ 
+ div.document {
+     width: 1024px;
+     margin: 30px auto 0 auto;
+ }
+ 
+ div.documentwrapper {
+     float: left;
+     width: 100%;
+ }
+ 
+ div.bodywrapper {
+     margin: 0 0 0 220px;
+ }
+ 
+ div.sphinxsidebar {
+     width: 220px;
+ }
+ 
+ hr {
+     border: 1px solid #B1B4B6;
+ }
+ 
+ div.body {
+     background-color: #444;
+     border-radius: 5px;
+     color: #ddd;
+     padding: 15px 30px 15px 30px;
+     box-shadow: 0 3px 10px rgba(0,0,0,0.3);
+ }
+ 
+ img.floatingflask {
+     padding: 0 0 10px 10px;
+     float: right;
+ }
+ 
+ div.footer {
+     width: 1024px;
+     margin: 20px auto 30px auto;
+     font-size: 14px;
+     color: #888;
+     text-align: right;
+ }
+ 
+ div.footer a {
+     color: #888;
+ }
+ 
+ div.related {
+     display: none;
+ }
+ 
+ div.sphinxsidebar a {
+     color: #FFCC00;
+     text-decoration: none;
+     border-bottom: none;
+ }
+ div.sphinxsidebar a:hover {
+     color: #ff9900;
+ }
+ 
+ div.sphinxsidebar a:hover,
+ div.sphinxsidebar a:visited,
+ div.sphinxsidebar a:focus {
+     border-bottom: none;
+ }
+ 
+ div.sphinxsidebar {
+     margin: 0;
+     position: fixed;
+     overflow: auto;
+     height: auto;
+     font-size: 14px;
+     line-height: 1.5;
+ }
+ 
+ div.sphinxsidebarwrapper {
+     padding: 18px 0 18px 10px;
+ }
+ 
+ div.sphinxsidebarwrapper p.logo {
+     padding: 0;
+     margin: -10px 0 0 -20px;
+     text-align: center;
+ }
+ 
+ div.sphinxsidebar h3,
+ div.sphinxsidebar h4 {
+     /*font-family: 'Garamond', 'Georgia', serif;*/
+     font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+     color: #ddd;
+     font-size: 20px;
+     font-weight: normal;
+     padding: 0;
+     /*border-bottom: 1px solid #fff;*/
+ 
+     background-color: #444;
+     border-radius: 5px 0 0 0px;
+     padding-left: 5px;
+     border: 1px solid #444;
+     margin-top: 10px;
+     box-shadow: 0 3px 10px rgba(0,0,0,0.3);
+     margin-left: -10px;
+     /* Needed, if siebar is not sticky. Otherwise shadows moves over body element*/
+     clip-path: inset(-10px -0px -10px -10px);
+ }
+ 
+ div.sphinxsidebar h4 {
+     font-size: 20px;
+ }
+ 
+ div.sphinxsidebar h3 a {
+     color: #ddd;
+ }
+ 
+ div.sphinxsidebar p.logo a,
+ div.sphinxsidebar h3 a,
+ div.sphinxsidebar p.logo a:hover,
+ div.sphinxsidebar h3 a:hover {
+     border: none;
+ }
+ 
+ div.sphinxsidebar p {
+     color: #555;
+     margin: 10px 0;
+ }
+ 
+ div.sphinxsidebar ul {
+     margin: 0;
+     padding: 0;
+     color: #ddd;
+ }
+ 
+ div.sphinxsidebar input {
+     /*border: 1px solid #ccc;*/
+     border: 1px solid #333;
+     font-family: 'Georgia', serif;
+     font-size: 1em;
+     color: #ddd;
+     width: 170px;
+     border-radius: 5px;
+     padding: 6px 12px;
+     box-shadow: inset 0 1px 10px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.1), 0 0px 0 rgba(0,0,0,0.5);
+     background-color: #2b2b2b;
+ }
+ 
+ div.need-tobediscussed {
+  background-color: #0a4a63 !important;
+ }
+ 
+ /*span.needs-type {*/
+     /*border: 1px solid #444;*/
+     /*border-radius: 5px;*/
+     /*padding: 3px 5px;*/
+ /*}*/
+ 
+ /*div.need-implementation span.needs-type {*/
+     /*!*background-color: #ffdd00 !important;*!*/
+     /*border: 1px solid #ffdd00*/
+ /*}*/
+ 
+ div.need-status-closed span.needs-status {
+     background-color:darkgreen;
+ }
+ 
+ div.need-status-open span.needs-status {
+     background-color:firebrick;
+ }
+ 
+ div.need-status-tbd span.needs-status {
+     background-color:orange;
+ }
+ 
+ div.need-technicaldebt span.needs-type {
+     background-color:red;
+ }
+ 
+ /* need part table layout */
+ tr.need_part td {
+     background-color: #555;
+     padding-left: 30px !important;
+ }
+ 
+ /* using more space for whole page */
+ div.document {
+     width: auto;
+     margin: 30px auto 0 auto;
+     max-width: 98%;
+ }
+ div.body {
+     min-width: 450px;
+     max-width: 100%;
+ }
+ 
+ span.need-part a {
+     font-size: 0.75em;
+ }
+ span.need-part {
+     border-bottom: 1px solid #888;
+ }
+ 
+ /* Code block design  inside needs */
+ div.need pre {
+     margin: 0;
+ }
+ 
+ /* Better need title and ID layout*/
+ span.needs-id {
+     font-size: 120% !important;
+     color: #ffcc00 !important;
+     float:right
+ }
+ span.needs-title {
+     font-weight: bold;
+     font-size: 1.3em;
+ }
+ 
+ div.needs_meta div.headline {
+     margin-bottom: 5px;
+     border-bottom: 1px solid #555;
+ }
+ div.needs_meta.line-block{
+     margin: 0;
+ }
+ 
+ /* Need headline color design*/
+ div.needs_meta div.headline {
+     margin: -5px -10px 5px -10px;
+     border-bottom: 1px solid #555;
+     border-radius: 3px 3px 0 0;
+     padding: 5px 10px 0px 10px;
+ }
+ 
+ div.story div.headline {
+     background-color: #39024e80;
+ }
+ 
+ div.spec div.headline {
+     background-color: #00beff33;
+ }
+ 
+ div.impl div.headline {
+     background-color: #ff000a33;
+ }
+ 
+ div.test div.headline {
+     background-color: #2ed15233;
+ }
+ /* -- body styles ----------------------------------------------------------- */
+ 
+ a {
+     color: #FFCC00;
+     text-decoration: none;
+ }
+ 
+ a:hover {
+     color: #ff9900;
+     text-decoration: none;
+ }
+ 
+ div.body h1,
+ div.body h2,
+ div.body h3,
+ div.body h4,
+ div.body h5,
+ div.body h6 {
+     font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+     /*font-family: 'Garamond', 'Georgia', serif;*/
+     font-weight: normal;
+     /* margin: 30px 0px 10px 0px; */
+     margin: 10px 0px 00px 0px;
+     padding: 0;
+ }
+ 
+ div.body h1 { margin-top: 0; padding-top: 0; font-size: 240%; }
+ div.body h2 { font-size: 180%; }
+ div.body h3 { font-size: 150%; }
+ div.body h4 { font-size: 130%; }
+ div.body h5 { font-size: 100%; }
+ div.body h6 { font-size: 100%; }
+ 
+ a.headerlink {
+     color: #ffcc00;
+     padding: 0 4px;
+     text-decoration: none;
+     text-shadow: none;
+ }
+ 
+ a.headerlink:hover {
+     color: #ff9900;
+     background: none;
+     text-shadow: none;
+ }
+ 
+ div.body p, div.body dd, div.body li {
+     line-height: 1.4em;
+ }
+ 
+ div.admonition {
+     background: none;
+     margin: 20px -30px;
+     padding: 10px 30px;
+ }
+ 
+ div.admonition tt.xref, div.admonition a tt {
+     border-bottom: 1px solid #fafafa;
+ }
+ 
+ dd div.admonition {
+     margin-left: -60px;
+     padding-left: 60px;
+ }
+ 
+ div.admonition p.admonition-title {
+     font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+     /* font-family: 'Garamond', 'Georgia', serif; */
+     /* font-weight: normal;/*
+     font-weight: bold;
+     /* font-size: 24px; */
+     font-size: 18px;
+     margin: 0 0 10px 0;
+     padding: 0;
+     line-height: 1;
+ }
+ 
+ div.admonition p.last {
+     margin-bottom: 0;
+ }
+ 
+ div.highlight {
+     /*background-color: white;*/
+     background-color: #444;
+     text-shadow: none;
+     color: #fff;
+ }
+ 
+ dt:target, .highlight {
+     background: #333;
+ }
+ 
+ div.note {
+     background-color: #555;
+     border: none;
+ }
+ 
+ div.warning {
+     background-color: #7f1212;
+     border: none;
+ }
+ 
+ div.seealso {
+     background-color: #ffc;
+     border: 1px solid #ff6;
+ }
+ 
+ div.topic {
+     background-color: inherit;
+     border: none;
+ }
+ 
+ p.admonition-title {
+     display: inline;
+ }
+ 
+ p.admonition-title:after {
+     content: ":";
+ }
+ 
+ pre, tt {
+     font-family: 'Consolas', 'Menlo', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
+     font-size: 0.9em;
+ }
+ 
+ img.screenshot {
+ }
+ 
+ tt.descname, tt.descclassname {
+     font-size: 0.95em;
+ }
+ 
+ tt.descname {
+     padding-right: 0.08em;
+ }
+ 
+ img.screenshot {
+     -moz-box-shadow: 2px 2px 4px #eee;
+     -webkit-box-shadow: 2px 2px 4px #eee;
+     box-shadow: 2px 2px 4px #eee;
+ }
+ 
+ table.docutils {
+     border: 1px solid #888;
+     -moz-box-shadow: 2px 2px 4px #eee;
+     /* -webkit-box-shadow: 2px 2px 4px #eee; */
+     /* box-shadow: 2px 2px 4px #eee; */
+ }
+ 
+ table.docutils td, table.docutils th {
+     border: 1px solid #888;
+     padding: 0.25em 0.7em;
+ }
+ 
+ table.field-list, table.footnote {
+     border: none;
+     -moz-box-shadow: none;
+     -webkit-box-shadow: none;
+     box-shadow: none;
+ }
+ 
+ table.footnote {
+     margin: 15px 0;
+     width: 100%;
+     border: 1px solid #eee;
+     background: #fdfdfd;
+     font-size: 0.9em;
+ }
+ 
+ table.footnote + table.footnote {
+     margin-top: -15px;
+     border-top: none;
+ }
+ 
+ table.field-list th {
+     padding: 0 0.8em 0 0;
+ }
+ 
+ table.field-list td {
+     padding: 0;
+ }
+ 
+ table.footnote td.label {
+     width: 0px;
+     padding: 0.3em 0 0.3em 0.5em;
+ }
+ 
+ table.footnote td {
+     padding: 0.3em 0.5em;
+ }
+ 
+ dl {
+     margin: 0;
+     padding: 0;
+ }
+ 
+ dl dd {
+     margin-left: 30px;
+ }
+ 
+ blockquote {
+     margin: 0 0 0 30px;
+     padding: 0;
+ }
+ 
+ ul, ol {
+     margin: 10px 0 10px 30px;
+     padding: 0;
+ }
+ 
+ pre {
+     background: #2b2b2b;
+     padding: 7px 30px;
+     margin: 15px -30px;
+     line-height: 1.3em;
+     box-shadow: inset 0 1px 10px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255,0.1),0 -1px 0 rgba(0,0,0,0.5);
+ }
+ 
+ dl pre, blockquote pre, li pre {
+     margin-left: -60px;
+     padding-left: 60px;
+ }
+ 
+ dl dl pre {
+     margin-left: -90px;
+     padding-left: 90px;
+ }
+ 
+ tt {
+     background-color: #ecf0f3;
+     color: #222;
+     /* padding: 1px 2px; */
+ }
+ 
+ tt.xref, a tt {
+     background-color: #FBFBFB;
+     border-bottom: 1px solid white;
+ }
+ 
+ a.reference {
+     text-decoration: none;
+     border-bottom: none;
+ }
+ 
+ a.reference:hover {
+     border-bottom: none;
+ }
+ 
+ a.footnote-reference {
+     text-decoration: none;
+     font-size: 0.7em;
+     vertical-align: top;
+     border-bottom: 1px dotted #004B6B;
+ }
+ 
+ a.footnote-reference:hover {
+     border-bottom: 1px solid #6D4100;
+ }
+ 
+ a:hover tt {
+     background: #EEE;
+ }
+ 
+ @media screen and (max-width: 600px) {
+ 
+     .github_fork {
+         display: none;
+     }
+ 
+     div.sphinxsidebar {
+         display: none;
+     }
+ 
+     div.document {
+        width: 100%;
+ 
+     }
+ 
+     div.documentwrapper {
+         margin-left: 0;
+         margin-top: 0;
+         margin-right: 0;
+         margin-bottom: 0;
+     }
+ 
+     div.bodywrapper {
+         margin-top: 0;
+         margin-right: 0;
+         margin-bottom: 0;
+         margin-left: 0;
+     }
+ 
+     ul {
+         margin-left: 30;
+     }
+ 
+     .document {
+         width: auto;
+     }
+ 
+     .footer {
+         width: auto;
+     }
+ 
+     .bodywrapper {
+         margin: 0;
+     }
+ 
+     .footer {
+         width: auto;
+     }
+ 
+     .github {
+         display: none;
+     }
+ 
+ }
+ 
+ /* misc. */
+ 
+ .revsys-inline {
+     display: none!important;
+ }
+ 
+ /* API layout */
+ 
+ code.descname {
+     color : #ffffff;
+ }
+ 
+ /* Pygmets overwrites  */
+ .highlight .nf { color: #ffcc00 !important; } /* function name */
+ .highlight .nc { color: #ffcc00 !important; } /* class name */
+ .highlight .kn { color: #918a6f !important; } /* import name */
+ .highlight .bp { color: #ffffff !important; } /* self, name */
+ .highlight .k { color: #918a6f !important; } /*  class, def name */
+ .highlight .o { color: #ffffff !important; } /* function name */
+ .highlight .nb { color: #ffffff !important; } /* super, print name */
+ .highlight .go { color: #aaaaaa !important; } /* super, print name */
+ 
+ 
+ /*
+ Needed for readthedocs.io, because it adding its own css, which destroy our images.
+ See https://github.com/rtfd/readthedocs.org/issues/2348
+ */
+ /* img {
+     width: auto !important;
+ }*/
+ 
+ 
+ div.sidebar {
+     background-color: #2b2b2b;
+     border: none;
+     margin: 0 -30px 0 0;
+     box-shadow: inset 0 1px 10px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255,0.1),0 -1px 0 rgba(0,0,0,0.5);
+     border-radius: 10px 0 0 10px;
+     padding: 10px 20px 0 20px;
+     text-align: justify;
+ }
+ 
+ 
+ div.sidebar div.topic {
+     background-color: transparent;
+     border: none;
+     margin-top: -20px;
+ }
+ }
+ 
+ div.sidebar div.topic ul {
+     margin: 5px 0 5px 15px;
+ }
+ 
+ div.sidebar div.topic p.topic-title {
+     display: none;
+ }
+ 
+ table.indextable tr.cap {
+     background-color: transparent !important;
+ }
+ 
+ div.figure p.caption {
+     text-align: center
+ }
+ 
+ table.highlighttable pre {
+     margin: 0;
+ }
+ 
+ table.highlighttable {
+     /* margin: 0; */
+     width: 100%;
+     border-spacing: 0px;
+     margin: 0 -30px 0 -30px;
+     overflow: auto;
+ }
+ 
+ div.highlight-python, div.highlight-jinja {
+ 
+ }
+ 
+ div.highlight-json .nt {
+     color: #ff9900;
+ }
+ 
+ table.highlighttable td {
+  padding: 0;
+ }
+ 
+ div.linenodiv {
+     background-color: #2b2b2b;
+     padding: 0;
+ }
+ 
+ td.linenos pre  {
+     padding: 7px 5px;
+ }
+ td.code div.highlight pre {
+     width: 717px;
+     overflow: hidden;
+ }
+ 
+ .highlight .hll {
+     background-color: #353535 !important;
+ }
+ 
+ p.plantuml object {
+     width: 100% !important;
+     height: 100% !important;
+ 
+ }
+ 
+ .highlighted {
+     background-color: transparent;
+     color: #0e84b5;
+ 
+ }
+ 
+ /* Sidebar TOC: make the current chapter bold */
+ .current.reference.internal {
+     font-weight: bold;
+ }
\ No newline at end of file