Modern theme

docs/commandline.md

@@ -85,24 +85,22 @@ report an error (e.g. "Problem loading...", "Connection was reset").
 
 ## Searchable docs
 
-When using the command-line tool a Lunr search index is automatically generated in `index.json`.
-
-A search box is included in the default template.  To add a search box
-to your own `_template.html`, include `fsdocs-search.js`, which is added to the `content`
-by default.
-
-    [lang=text]
-    ...
-    <div id="header">
-      <div class="searchbox">
-        <label for="search-by">
-          <i class="fas fa-search"></i>
-        </label>
-        <input data-search-input="" id="search-by" type="search" placeholder="Search..." />
-        <span data-search-clear="">
-          <i class="fas fa-times"></i>
-        </span>
-      </div>
+When using the command-line tool a [Fuse](https://www.fusejs.io/) search index is automatically generated in `index.json`. 
+A search box is included in the default template via an [HTML Dialog element](https://developer.mozilla.org/docs/Web/HTML/Element/dialog).  
+To add search to your own `_template.html`:
+
+- include an HTML element with id `search-btn`
+- include a `dialog` element
+- include `fsdocs-search.js` script
+
+```html
+<button id="search-btn">Open search dialog</button>
+<dialog>
+    <input type="search" placeholder="Search docs" />
+    <div class="results">
+        <ul></ul>
+        <p class="empty">Type something to start searching.</p>
     </div>
-    ...
-
+</dialog>
+<script type="module" src="{`{root}}content/fsdocs-search.js"></script>
+```

docs/content.fsx

@@ -60,7 +60,7 @@ Content that is not `*.fsx` or `*.md` is copied across.
 
 ## Default Styling Content
 
-By default additional content such as `fsdocs-search.js`, `fsdocs-tips.js` and `fsdocs-styles.css` are included in the
+By default additional content such as `fsdocs-search.js`, `fsdocs-tips.js` and `fsdocs-default.css` are included in the
 the `content` directory of the output.  This can be suppressed with `--nodefaultcontent` or by having your own
 copy of this content in your `content` directory.
 

docs/content/fsdocs-default.css

@@ -110,7 +110,7 @@
     --text-color: #F7F7F7;
     --text-hover: #FFF;
     --heading-color: rgb(229, 231, 235);
-    --code-background: #3e3e42;
+    --code-background: #28282D;
     --code-color: #f5f5f6;
     --header-background: #0c1318;
     --header-border: #9b9b9b;
@@ -119,26 +119,26 @@
     --link-color: #c5eff7;
     --search-background: #020202;
     --nav-category: rgb(207, 211, 215);
-    --code-strings-color: #5adfec;
+    --code-strings-color: #86b4b9;
     --code-printf-color: #6B2FBA;
     --code-escaped-color: #EA8675;
     --code-identifiers-color: #d1b3f5;
     --code-module-color: #15e1e1;
-    --code-reference-color: #7a9cee;
-    --code-value-color: #66d73d;
+    --code-reference-color: #40fddd;
+    --code-value-color: #ffb4e9;
     --code-interface-color: #43AEC6;
     --code-typearg-color: #43AEC6;
     --code-disposable-color: #6dd6f1;
     --code-property-color: #6acfe7;
     --code-punctuation-color: #43AEC6;
     --code-punctuation2-color: var(--text-color);
     --code-function-color: #6B2FBA;
-    --code-function2-color: #da9d9d;
+    --code-function2-color: #cbda9d;
     --code-activepattern-color: #4ec9b0;
     --code-unioncase-color: #4ec9b0;
     --code-enumeration-color: #8C6C41;
     --code-keywords-color: #a7c2f8;
-    --code-comment-color: #dcd8d8;
+    --code-comment-color: #84d16e;
     --code-operators-color: #b4c6ee;
     --code-numbers-color: #009999;
     --code-linenumbers-color: #80b0b0;

docs/content/fsdocs-search.js

@@ -21,10 +21,10 @@ function debounce(mainFunction, delay) {
             mainFunction(...args);
         }, delay);
     };
-};
+}
 
 const root = document.documentElement.getAttribute("data-root");
-if (root) {
+if (root && searchBtn) {
     let fuse = null;
     const searchIndexUrl = `${root}/index.json`;
     fetch(searchIndexUrl, {})
@@ -114,7 +114,7 @@ if (root) {
 
     window.addEventListener('keyup', ev => {
         if (ev.key === 'Escape' && searchDialog.open) {
-            searchDialog.closeModal();
+            searchDialog.close();
         }
 
         if (ev.key === '/' && !searchDialog.open) {