Add auto theme

cmd/root.go

@@ -2,6 +2,7 @@ package cmd
 
 import (
 	"os"
+	"strings"
 
 	"github.com/chrishrb/go-grip/pkg"
 	"github.com/spf13/cobra"
@@ -12,7 +13,7 @@ var rootCmd = &cobra.Command{
 	Short: "Render markdown document as html",
 	Args:  cobra.MatchAll(cobra.OnlyValidArgs),
 	Run: func(cmd *cobra.Command, args []string) {
-		dark, _ := cmd.Flags().GetBool("dark")
+		theme, _ := cmd.Flags().GetString("theme")
 		browser, _ := cmd.Flags().GetBool("browser")
 		openReadme, _ := cmd.Flags().GetBool("readme")
 		host, _ := cmd.Flags().GetString("host")
@@ -20,7 +21,7 @@ var rootCmd = &cobra.Command{
 		boundingBox, _ := cmd.Flags().GetBool("bounding-box")
 
 		client := pkg.Client{
-			Dark:        dark,
+			Theme:       strings.ToLower(theme),
 			OpenBrowser: browser,
 			Host:        host,
 			Port:        port,
@@ -45,7 +46,7 @@ func Execute() {
 }
 
 func init() {
-	rootCmd.Flags().BoolP("dark", "d", false, "Activate darkmode")
+	rootCmd.Flags().String("theme", "auto", "Select css theme [light/dark/auto]")
 	rootCmd.Flags().BoolP("browser", "b", true, "Open new browser tab")
 	rootCmd.Flags().BoolP("readme", "r", true, "Open readme if no file provided")
 	rootCmd.Flags().StringP("host", "H", "localhost", "Host to use")

defaults/templates/layout.html

@@ -4,10 +4,12 @@
   <meta charset="utf-8">
 	<title>go-grip - markdown preview</title>
   <link rel="icon" type="image/x-icon" href="/static/images/favicon.ico">
-  {{if .Darkmode }}
+  {{if eq .Theme "dark" }}
   <link rel="stylesheet" href="/static/css/github-markdown-dark.css">
-  {{else}}
+  {{else if eq .Theme "light" }}
   <link rel="stylesheet" href="/static/css/github-markdown-light.css">
+  {{else}}
+  <link rel="stylesheet" href="/static/css/github-markdown-auto.css">
   {{end}}
   <link rel="stylesheet" href="/static/css/github-print.css" media="print">
 </head>

defaults/templates/mermaid/mermaid.html

@@ -4,13 +4,21 @@
   </div>
 
   <script src="/static/js/mermaid.min.js"></script>
-  {{if .Darkmode }}
+  {{if eq .Theme "dark" }}
   <script>
     mermaid.initialize({startOnLoad:true, theme: 'dark'});
   </script>
-  {{else}}
+  {{else if eq .Theme "light" }}
   <script>
     mermaid.initialize({startOnLoad:true, theme: 'default'});
   </script>
+  {{else}}
+  <script>
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      mermaid.initialize({startOnLoad:true, theme: 'dark'});
+    } else {
+      mermaid.initialize({startOnLoad:true, theme: 'default'});
+    }
+  </script>
   {{end}}
 </div>

pkg/client.go

@@ -1,7 +1,7 @@
 package pkg
 
 type Client struct {
-	Dark        bool
+	Theme       string
 	OpenBrowser bool
 	Host        string
 	Port        int

pkg/parser.go

@@ -41,25 +41,24 @@ func (client *Client) renderHook(w io.Writer, node ast.Node, entering bool) (ast
 	case *ast.ListItem:
 		return renderHookListItem(w, node, entering)
 	case *ast.CodeBlock:
-		return renderHookCodeBlock(w, node, client.Dark)
+		return renderHookCodeBlock(w, node, client.Theme)
 	}
 
 	return ast.GoToNext, false
 }
 
-func renderHookCodeBlock(w io.Writer, node ast.Node, dark bool) (ast.WalkStatus, bool) {
+func renderHookCodeBlock(w io.Writer, node ast.Node, theme string) (ast.WalkStatus, bool) {
 	block := node.(*ast.CodeBlock)
 
 	var style string
-	switch dark {
-	case true:
+	if theme == "dark" {
 		style = "github-dark"
-	default:
+	} else {
 		style = "github"
 	}
 
 	if string(block.Info) == "mermaid" {
-		m, err := renderMermaid(string(block.Literal), dark)
+		m, err := renderMermaid(string(block.Literal), theme)
 		if err != nil {
 			log.Println("Error:", err)
 		}
@@ -233,13 +232,13 @@ func createBlockquoteStart(alert string) (string, error) {
 
 type mermaid struct {
 	Content  string
-	Darkmode bool
+	Theme    string
 }
 
-func renderMermaid(content string, darkmode bool) (string, error) {
+func renderMermaid(content string, theme string) (string, error) {
 	m := mermaid{
 		Content:  content,
-		Darkmode: darkmode,
+		Theme: theme,
 	}
 	lp := path.Join("templates/mermaid/mermaid.html")
 	tmpl, err := template.ParseFS(defaults.Templates, lp)

pkg/webserver.go

@@ -17,7 +17,7 @@ import (
 
 type htmlStruct struct {
 	Content     string
-	Darkmode    bool
+	Theme       string
 	BoundingBox bool
 }
 
@@ -28,6 +28,13 @@ func (client *Client) Serve(file string) error {
 	reload := reload.New(directory)
 	reload.Log = log.New(io.Discard, "", 0)
 
+	validThemes := map[string]bool{"light": true, "dark": true, "auto": true}
+
+	if !validThemes[client.Theme] {
+		log.Println("Warning: Unknown theme ", client.Theme, ", defaulting to 'auto'")
+		client.Theme = "auto"
+	}
+
 	dir := http.Dir(directory)
 	chttp := http.NewServeMux()
 	chttp.Handle("/static/", http.FileServer(http.FS(defaults.StaticFiles)))
@@ -53,7 +60,7 @@ func (client *Client) Serve(file string) error {
 			htmlContent := client.MdToHTML(bytes)
 
 			// Serve
-			err = serveTemplate(w, htmlStruct{Content: string(htmlContent), Darkmode: client.Dark, BoundingBox: client.BoundingBox})
+			err = serveTemplate(w, htmlStruct{Content: string(htmlContent), Theme: client.Theme, BoundingBox: client.BoundingBox})
 			if err != nil {
 				log.Fatal(err)
 				return