First pass at #1 - dark mode support.

By default, no changes to program behavior unless you use the new `-style` arg.

Author: jrnewton

README.md

@@ -15,7 +15,9 @@ Usage: npx github-readme-to-html [options]
 
 Options:
   -i, --input <filename>   The input readme/markdown file (default: "README.md")
+  -d, --dir <dirname>      The output directory (default: "./dist")
   -o, --output <filename>  The output HTML file (default: "index.html")
+  -s, --style <mode>       The style mode to use, either 'light' or 'dark' (default: "light")
   -t, --title <title>      The page title (default: "Read Me")
   -h, --help               display help for command
 ```
@@ -33,12 +35,18 @@ All output goes to ./dist
     - .
 ```
 
-### Example
+### Example - Default Light Mode
 
 Input: [ORIGINAL.md](ORIGINAL.md)
 
 Output: https://github-readme-to-html.netlify.app/
 
+### Example - Dark Mode
+
+Input: [ORIGINAL.md](ORIGINAL.md)
+
+Output: https://github-readme-to-html-darkmode.netlify.app/
+
 ### Testing
 To test local changes:
 ```

index.js

@@ -6,30 +6,49 @@ const { program } = require('commander');
 const footnotes = require('showdown-footnotes');
 const highlight = require("showdown-highlight");
 
-const distDir = './dist';
-
-const cssFile = __dirname + '/style.css'; //inside our module
-
-const hljsCssFile = require.resolve('highlight.js/styles/github.css')
-
 program
   .option(
     '-i, --input <filename>',
     'The input readme/markdown file',
     'README.md'
   )
+  .option(
+    '-d, --dir <dirname>',
+    'The output directory',
+    "./dist"
+  )
   .option('-o, --output <filename>', 'The output HTML file', 'index.html')
+  .option(
+    '-s, --style <mode>',
+    'The style mode to use, either \'light\' or \'dark\'',
+    "light"
+  )
   .option('-t, --title <title>', 'The page title', 'Read Me');
 
 program.parse(process.argv);
 const options = program.opts();
 
 const readmeFile = './' + options.input;
+const styleMode = options.style;
 const pageTitle = options.title;
+const distDir = options.dir;
 const outputFile = distDir + '/' + options.output;
 const assetsDirSource = './assets/';
 const assetsDirTarget = distDir + '/assets';
 
+
+// style defaults to 'light'
+let cssFileName = 'style-light.css';
+let hljsCssFileName = 'github.css';
+
+if (styleMode === "dark") {
+  cssFileName = 'style-dark.css';
+  hljsCssFileName = 'github-dark-dimmed.css';
+}
+
+const cssFile = __dirname + '/' + cssFileName; //inside our module
+const hljsCssFile = require.resolve('highlight.js/styles/' + hljsCssFileName);
+
 const converter = new showdown.Converter({
   ghCompatibleHeaderId: true,
   simpleLineBreaks: true,

package.json

@@ -20,7 +20,8 @@
     "prettier": "^2.2.1"
   },
   "scripts": {
-    "start": "node index.js -i ORIGINAL.md -o index.html -t \"Read Me\"",
+    "light": "node index.js -i ORIGINAL.md -o index.html -t \"Read Me\"",
+    "dark": "node index.js -i ORIGINAL.md -o index.html -t \"Read Me\" -s \"dark\" -d \"dist-dark\"",
     "test": "node index.js -i HLJS-TEST.md"
   },
   "repository": {

style-dark.css

@@ -0,0 +1,199 @@
+body {
+  font: 400 16px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  color: #f0f6fc;
+  background-color: #0d1117;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-feature-settings: 'kern' 1;
+  -moz-font-feature-settings: 'kern' 1;
+  -o-font-feature-settings: 'kern' 1;
+  font-feature-settings: 'kern' 1;
+  font-kerning: normal;
+  padding: 30px;
+}
+
+@media only screen and (max-width: 600px) {
+  body {
+    padding: 5px;
+  }
+
+  main {
+    padding: 0px 20px 20px 20px !important;
+  }
+}
+
+main {
+  margin: 0px;
+  max-width: 900px;
+  border: 1px solid rgba(61, 68, 77, 0.7);
+  padding: 10px 40px;
+  padding-bottom: 20px;
+  border-radius: 2px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+hr {
+  color: rgba(61, 68, 77, 0.7);
+  background-color: rgba(61, 68, 77, 0.7);
+  height: 1px;
+  flex: 0 1 auto;
+  margin: 1em 0;
+  padding: 0;
+  border: none;
+}
+
+/**
+ * Links
+ */
+a {
+  color: #0366d6;
+  text-decoration: none;
+}
+a:visited {
+  color: #0366d6;
+}
+a:hover {
+  color: #0366d6;
+  text-decoration: underline;
+}
+
+pre {
+  /* in light mode, this has a background-color 
+     but that looks janky in dark mode */
+  border-radius: 3px;
+  font-size: 85%;
+  line-height: 1.45;
+  overflow: auto;
+  padding: 16px;
+}
+
+/**
+  * Code blocks
+  */
+
+code {
+  background-color: #151b23;
+  border-radius: 3px;
+  font-size: 85%;
+  margin: 0;
+  word-wrap: break-word;
+  padding: 0.2em 0.4em;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
+    monospace;
+}
+
+pre > code {
+  background-color: transparent;
+  border: 0;
+  display: inline;
+  line-height: inherit;
+  margin: 0;
+  overflow: visible;
+  padding: 0;
+  word-wrap: normal;
+  font-size: 100%;
+}
+
+/**
+ * Blockquotes
+ */
+blockquote {
+  margin-left: 30px;
+  margin-top: 0px;
+  margin-bottom: 16px;
+  border-left-width: 3px;
+  padding: 0 1em;
+  color: #828282;
+  border-left: 4px solid #3d444d;
+  padding-left: 15px;
+  font-size: 18px;
+  letter-spacing: -1px;
+  font-style: italic;
+}
+blockquote * {
+  font-style: normal !important;
+  letter-spacing: 0;
+  color: #6a737d !important;
+}
+
+/**
+ * Tables
+ */
+table {
+  border-spacing: 2px;
+  display: block;
+  font-size: 14px;
+  overflow: auto;
+  width: 100%;
+  margin-bottom: 16px;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+td {
+  padding: 6px 13px;
+  border: 1px solid #3d444d;
+}
+
+th {
+  font-weight: 600;
+  padding: 6px 13px;
+  border: 1px solid #3d444d;
+}
+
+tr {
+  background-color: #0d1117;
+  border-top: 1px solid #c6cbd1;
+}
+
+table tr:nth-child(2n) {
+  background-color: #151b23;
+}
+
+/**
+ * Others
+ */
+
+img {
+  max-width: 100%;
+}
+
+p {
+  line-height: 24px;
+  font-weight: 400;
+  font-size: 16px;
+  color: #f0f6fc;
+}
+
+ul {
+  margin-top: 0;
+}
+
+li {
+  color: #f0f6fc;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+li + li {
+  margin-top: 0.25em;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  color: #f0f6fc;
+}
+
+a:visited {
+  color: #0366d6;
+}
+
+h1,
+h2,
+h3 {
+  border-bottom: 1px solid rgba(61, 68, 77, 0.7);
+  color: #f0f6fc;
+  /* Darker */
+}