Add optional dark theme for the docs

telethon_generator/data/html/core.html

@@ -4,7 +4,16 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>Telethon API</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="css/docs.css" rel="stylesheet">
+    <link id="style" href="css/docs.light.css" rel="stylesheet">
+    <script>
+    try {
+        which = document.cookie.split('=')[1].split(';')[0];
+        if (which) {
+            document.getElementById("style").href = "css/" + which;
+        }
+    } catch (e) {
+    }
+    </script>
     <link href="https://fonts.googleapis.com/css?family=Nunito|Source+Code+Pro" rel="stylesheet">
     <style>
         body {
@@ -21,7 +30,7 @@
     on what the methods, constructors and types mean. Nevertheless, this
     page aims to provide easy access to all the available methods, their
     definition and parameters.</p>
-
+    <p id="themeSelect"></p>
     <p>Please note that when you see this:</p>
     <pre>---functions---
 users.getUsers#0d91a548 id:Vector&lt;InputUser&gt; = Vector&lt;User&gt;</pre>
@@ -145,5 +154,17 @@ users.getUsers#0d91a548 id:Vector&lt;InputUser&gt; = Vector&lt;User&gt;</pre>
     </p>
 </div>
 <script src="js/search.js"></script>
+<script>
+document.getElementById("themeSelect").innerHTML = `
+Select
+<a href="#" onclick="setTheme('docs.light.css')">light</a> /
+<a href="#" onclick="setTheme('docs.dark.css')">dark</a> theme.
+`;
+
+function setTheme(which) {
+    style.href = "css/" + which;
+    document.cookie = "css=" + which + "; path=/";
+}
+</script>
 </body>
 </html>

telethon_generator/data/html/css/docs.dark.css

@@ -0,0 +1,185 @@
+body {
+    font-family: 'Nunito', sans-serif;
+    color: #bbb;
+    background-color:#000;
+    font-size: 16px;
+}
+
+a {
+    color: #42aaed;
+    text-decoration: none;
+}
+
+pre {
+    font-family: 'Source Code Pro', monospace;
+    padding: 8px;
+    color: #567;
+    background: #080a0c;
+    border-radius: 0;
+    overflow-x: auto;
+}
+
+a:hover {
+    color: #64bbdd;
+    text-decoration: underline;
+}
+
+table {
+    width: 100%;
+    max-width: 100%;
+}
+
+table td {
+    border-top: 1px solid #111;
+    padding: 8px;
+}
+
+.horizontal {
+    margin-bottom: 16px;
+    list-style: none;
+    background: #080a0c;
+    border-radius: 4px;
+    padding: 8px 16px;
+}
+
+.horizontal li {
+    display: inline-block;
+    margin: 0 8px 0 0;
+}
+
+.horizontal img {
+    display: inline-block;
+    margin: 0 8px -2px 0;
+}
+
+h1, summary.title {
+    font-size: 24px;
+}
+
+h3 {
+    font-size: 20px;
+}
+
+#main_div {
+  padding: 20px 0;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+pre::-webkit-scrollbar {
+    visibility: visible;
+    display: block;
+    height: 12px;
+}
+
+pre::-webkit-scrollbar-track:horizontal {
+    background: #222;
+    border-radius: 0;
+    height: 12px;
+}
+
+pre::-webkit-scrollbar-thumb:horizontal {
+    background: #444;
+    border-radius: 0;
+    height: 12px;
+}
+
+:target {
+    border: 2px solid #149;
+    background: #246;
+    padding: 4px;
+}
+
+/* 'sh' stands for Syntax Highlight */
+span.sh1 {
+    color: #f93;
+}
+
+span.tooltip {
+    border-bottom: 1px dashed #ddd;
+}
+
+#searchBox {
+    width: 100%;
+    border: none;
+    height: 20px;
+    padding: 8px;
+    font-size: 16px;
+    border-radius: 2px;
+    border: 2px solid #222;
+    background: #000;
+    color: #eee;
+}
+
+#searchBox:placeholder-shown {
+    color: #bbb;
+    font-style: italic;
+}
+
+button {
+    border-radius: 2px;
+    font-size: 16px;
+    padding: 8px;
+    color: #bbb;
+    background-color: #111;
+    border: 2px solid #146;
+    transition-duration: 300ms;
+}
+
+button:hover {
+    background-color: #146;
+    color: #fff;
+}
+
+/* https://www.w3schools.com/css/css_navbar.asp */
+ul.together {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+ul.together li {
+    float: left;
+}
+
+ul.together li a {
+    display: block;
+    border-radius: 8px;
+    background: #111;
+    padding: 4px 8px;
+    margin: 8px;
+}
+
+/* https://stackoverflow.com/a/30810322 */
+.invisible {
+    left: 0;
+    top: -99px;
+    padding: 0;
+    width: 2em;
+    height: 2em;
+    border: none;
+    outline: none;
+    position: fixed;
+    box-shadow: none;
+    color: transparent;
+    background: transparent;
+}
+
+@media (max-width: 640px) {
+    h1, summary.title {
+        font-size: 18px;
+    }
+    h3 {
+        font-size: 16px;
+    }
+
+    #dev_page_content_wrap {
+        padding-top: 12px;
+    }
+
+    #dev_page_title {
+        margin-top: 10px;
+        margin-bottom: 20px;
+    }
+}

telethon_generator/data/html/css/docs.light.css

@@ -95,19 +95,6 @@ span.sh1 {
     color: #f70;
 }
 
-span.sh2 {
-    color: #0c7;
-}
-
-span.sh3 {
-    color: #aaa;
-    font-style: italic;
-}
-
-span.sh4 {
-    color: #06c;
-}
-
 span.tooltip {
     border-bottom: 1px dashed #444;
 }

telethon_generator/docs_writer.py

@@ -31,7 +31,7 @@ class DocsWriter:
         self._script = ''
 
     # High level writing
-    def write_head(self, title, relative_css_path):
+    def write_head(self, title, relative_css_path, default_css):
         """Writes the head part for the generated document,
            with the given title and CSS
         """
@@ -45,11 +45,24 @@ class DocsWriter:
 
         self.write('''</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="''')
+    <link id="style" href="''')
 
         self.write(relative_css_path)
+        self.write('/')
+        self.write(default_css)
 
         self.write('''" rel="stylesheet">
+    <script>
+    try {
+        which = document.cookie.split('=')[1].split(';')[0];
+        if (which) {
+            document.getElementById("style").href = "''')
+        self.write(relative_css_path)
+        self.write('''/" + which;
+        }
+    } catch (e) {
+    }
+    </script>
     <link href="https://fonts.googleapis.com/css?family=Nunito|Source+Code+Pro" rel="stylesheet">
 </head>
 <body>

telethon_generator/generators/docs.py

@@ -114,7 +114,9 @@ def _generate_index(folder, original_paths, root):
     filename = os.path.join(folder, 'index.html')
     with DocsWriter(filename, type_to_path=_get_path_for_type) as docs:
         # Title should be the current folder name
-        docs.write_head(folder.title(), relative_css_path=paths['css'])
+        docs.write_head(folder.title(),
+                        relative_css_path=paths['css'],
+                        default_css=original_paths['default_css'])
 
         docs.set_menu_separator(paths['arrow'])
         _build_menu(docs, filename, root,
@@ -206,7 +208,8 @@ def _write_html_pages(tlobjects, errors, layer, input_res, output_dir):
     # * Generating the types documentation, showing available constructors.
     # TODO Tried using 'defaultdict(list)' with strange results, make it work.
     original_paths = {
-        'css': 'css/docs.css',
+        'css': 'css',
+        'default_css': 'docs.light.css',
         'arrow': 'img/arrow.svg',
         'search.js': 'js/search.js',
         '404': '404.html',
@@ -251,7 +254,8 @@ def _write_html_pages(tlobjects, errors, layer, input_res, output_dir):
 
         with DocsWriter(filename, type_to_path=path_for_type) as docs:
             docs.write_head(title=tlobject.class_name,
-                            relative_css_path=paths['css'])
+                            relative_css_path=paths['css'],
+                            default_css=original_paths['default_css'])
 
             # Create the menu (path to the current TLObject)
             docs.set_menu_separator(paths['arrow'])
@@ -392,9 +396,9 @@ def _write_html_pages(tlobjects, errors, layer, input_res, output_dir):
                  for k, v in original_paths.items()}
 
         with DocsWriter(filename, type_to_path=path_for_type) as docs:
-            docs.write_head(
+            docs.write_head(title=snake_to_camel_case(name),
-                title=snake_to_camel_case(name),
+                            relative_css_path=paths['css'],
-                relative_css_path=paths['css'])
+                            default_css=original_paths['default_css'])
 
             docs.set_menu_separator(paths['arrow'])
             _build_menu(docs, filename, output_dir,
@@ -570,7 +574,8 @@ def _write_html_pages(tlobjects, errors, layer, input_res, output_dir):
 
 
 def _copy_resources(res_dir, out_dir):
-    for dirname, files in [('css', ['docs.css']), ('img', ['arrow.svg'])]:
+    for dirname, files in [('css', ['docs.light.css', 'docs.dark.css']),
+                           ('img', ['arrow.svg'])]:
         dirpath = os.path.join(out_dir, dirname)
         os.makedirs(dirpath, exist_ok=True)
         for file in files: