Visual theme adjustments (#1)

.gitignore

@@ -1,12 +1,10 @@
-###############
-#    folder   #
-###############
-/**/DROP/
-/**/TEMP/
-/**/packages/
-/**/bin/
-/**/obj/
-_site
+obj/
+_site/
+.sass-cache
 docfx/*.dll
 docfx/docfx.exe
 docfx/docfx.exe.config
+
+# CSS file is built from SASS source (see Makefile)
+darkerfx/styles/main.css
+darkerfx/styles/main.css.map

.vscode/settings.json

@@ -2,6 +2,10 @@
     "cSpell.words": [
         "Steffen",
         "Wilke",
-        "darkerfx"
+        "darkerfx",
+        "darkfx",
+        "hljs",
+        "pscommand",
+        "sidetoc"
     ]
 }

Makefile

@@ -3,9 +3,12 @@
 
 all: docs
 
-docs: docfx/docfx.exe
+docs: docfx/docfx.exe darkerfx/styles/main.css
 	./docfx/docfx.exe docs/docfx.json
 
+darkerfx/styles/main.css: darkerfx/styles/main.scss
+	sass $< $(@)
+
 docs-screenshot:
 	wkhtmltoimage --crop-h 768 http://localhost:8080/articles/intro.html docs/images/darkfx-screenshots.png
 

README.md

@@ -26,7 +26,23 @@ You can view a demo DocFX project with this template [HERE](https://perlun.githu
     }
     ```
 
-## Acknowledgement
+## Acknowledgements
 The theme is based on the great [darkFX](https://github.com/steffen-wilke/darkfx) theme by Steffen Wilke. Many thanks to you!
 
+The main changes in this theme compared to darkfx are as follows:
+
+- The light theme follows more closely the default docfx theme. For example, we specifically avoid overwriting non-color-related CSS attributes. The idea is to make this theme "lean and mean", and avoid messing with upstream styles when not absolutely _necessary_.
+
+- The light theme does not use a liquid container, but instead follows the same limited-width as the default docfx theme.
+
+- The dark theme has different colors, more resembling https://docs.microsoft.com.
+
+- The hljs (highlightjs) colors for both the dark theme and the light theme was adjusted to use the following hljs styles:
+  - https://github.com/highlightjs/highlight.js/blob/main/src/styles/vs.css (light)
+  - https://github.com/highlightjs/highlight.js/blob/main/src/styles/vs2015.css (dark)
+
+- The CSS variables were renamed to `--theme-*`, again similar to how `docs.microsoft.com` has done it.
+
+- The CSS stylesheet was converted to SASS, which simplifies some things greatly.
+
 darkFX in turn has the following acknowledgement: Many thanks to [Oscar Vásquez](https://github.com/ovasquez) from which I borrowed the example pages and repository structure of his [Material Theme for DocFX](https://github.com/ovasquez/docfx-material).