customize theme colors in vars-config

ci/release/changelogs/next.md

@@ -1,5 +1,6 @@
 #### Features 🚀
 
+- Themes can be customized via `d2-config` vars. [#1777](https://github.com/terrastruct/d2/pull/1777)
 - Icons can be added for special objects (sql_table, class, code, markdown, latex). [#1774](https://github.com/terrastruct/d2/pull/1774)
 
 #### Improvements 🧹

d2compiler/compile.go

@@ -1375,5 +1375,84 @@ func compileConfig(ir *d2ir.Map) *d2target.Config {
 		config.LayoutEngine = go2.Pointer(f.Primary().Value.ScalarString())
 	}
 
+	f = configMap.GetField("theme-overrides")
+	if f != nil {
+		config.ThemeOverrides = compileThemeOverrides(f.Map())
+	}
+	f = configMap.GetField("dark-theme-overrides")
+	if f != nil {
+		config.DarkThemeOverrides = compileThemeOverrides(f.Map())
+	}
+
 	return config
 }
+
+func compileThemeOverrides(m *d2ir.Map) *d2target.ThemeOverrides {
+	if m == nil {
+		return nil
+	}
+	themeOverrides := d2target.ThemeOverrides{}
+
+	if m.GetField("N1") != nil {
+		themeOverrides.N1 = go2.Pointer(m.GetField("N1").Primary().Value.ScalarString())
+	}
+	if m.GetField("B1") != nil {
+		themeOverrides.B1 = go2.Pointer(m.GetField("B1").Primary().Value.ScalarString())
+	}
+	if m.GetField("B2") != nil {
+		themeOverrides.B2 = go2.Pointer(m.GetField("B2").Primary().Value.ScalarString())
+	}
+	if m.GetField("B3") != nil {
+		themeOverrides.B3 = go2.Pointer(m.GetField("B3").Primary().Value.ScalarString())
+	}
+	if m.GetField("B4") != nil {
+		themeOverrides.B4 = go2.Pointer(m.GetField("B4").Primary().Value.ScalarString())
+	}
+	if m.GetField("B5") != nil {
+		themeOverrides.B5 = go2.Pointer(m.GetField("B5").Primary().Value.ScalarString())
+	}
+	if m.GetField("B6") != nil {
+		themeOverrides.B6 = go2.Pointer(m.GetField("B6").Primary().Value.ScalarString())
+	}
+	if m.GetField("AA2") != nil {
+		themeOverrides.AA2 = go2.Pointer(m.GetField("AA2").Primary().Value.ScalarString())
+	}
+	if m.GetField("AA4") != nil {
+		themeOverrides.AA4 = go2.Pointer(m.GetField("AA4").Primary().Value.ScalarString())
+	}
+	if m.GetField("AA5") != nil {
+		themeOverrides.AA5 = go2.Pointer(m.GetField("AA5").Primary().Value.ScalarString())
+	}
+	if m.GetField("AB4") != nil {
+		themeOverrides.AB4 = go2.Pointer(m.GetField("AB4").Primary().Value.ScalarString())
+	}
+	if m.GetField("AB5") != nil {
+		themeOverrides.AB5 = go2.Pointer(m.GetField("AB5").Primary().Value.ScalarString())
+	}
+	if m.GetField("N1") != nil {
+		themeOverrides.N1 = go2.Pointer(m.GetField("N1").Primary().Value.ScalarString())
+	}
+	if m.GetField("N2") != nil {
+		themeOverrides.N2 = go2.Pointer(m.GetField("N2").Primary().Value.ScalarString())
+	}
+	if m.GetField("N3") != nil {
+		themeOverrides.N3 = go2.Pointer(m.GetField("N3").Primary().Value.ScalarString())
+	}
+	if m.GetField("N4") != nil {
+		themeOverrides.N4 = go2.Pointer(m.GetField("N4").Primary().Value.ScalarString())
+	}
+	if m.GetField("N5") != nil {
+		themeOverrides.N5 = go2.Pointer(m.GetField("N5").Primary().Value.ScalarString())
+	}
+	if m.GetField("N6") != nil {
+		themeOverrides.N6 = go2.Pointer(m.GetField("N6").Primary().Value.ScalarString())
+	}
+	if m.GetField("N7") != nil {
+		themeOverrides.N7 = go2.Pointer(m.GetField("N7").Primary().Value.ScalarString())
+	}
+
+	if themeOverrides != (d2target.ThemeOverrides{}) {
+		return &themeOverrides
+	}
+	return nil
+}

d2ir/compile.go

@@ -169,7 +169,7 @@ func (c *compiler) validateConfigs(configs *Field) {
 	for _, f := range configs.Map().Fields {
 		var val string
 		if f.Primary() == nil {
-			if f.Name != "theme-colors" {
+			if f.Name != "theme-overrides" && f.Name != "dark-theme-overrides" {
 				c.errorf(f.LastRef().AST(), `"%s" needs a value`, f.Name)
 				continue
 			}
@@ -184,7 +184,7 @@ func (c *compiler) validateConfigs(configs *Field) {
 				c.errorf(f.LastRef().AST(), `expected a boolean for "%s", got "%s"`, f.Name, val)
 				continue
 			}
-		case "theme-colors":
+		case "theme-overrides", "dark-theme-overrides":
 			if f.Map() == nil {
 				c.errorf(f.LastRef().AST(), `"%s" needs a map`, f.Name)
 				continue

d2lib/d2.go

@@ -188,6 +188,8 @@ func applyConfigs(config *d2target.Config, compileOpts *CompileOptions, renderOp
 	if renderOpts.Center == nil {
 		renderOpts.Center = config.Center
 	}
+	renderOpts.ThemeOverrides = config.ThemeOverrides
+	renderOpts.DarkThemeOverrides = config.DarkThemeOverrides
 }
 
 func applyDefaults(compileOpts *CompileOptions, renderOpts *d2svg.RenderOpts) {

d2renderers/d2animate/d2animate.go

@@ -76,7 +76,7 @@ func Wrap(rootDiagram *d2target.Diagram, svgs [][]byte, renderOpts d2svg.RenderO
 
 	d2svg.EmbedFonts(buf, diagramHash, svgsStr, rootDiagram.FontFamily, rootDiagram.GetNestedCorpus())
 
-	themeStylesheet, err := d2svg.ThemeCSS(diagramHash, renderOpts.ThemeID, renderOpts.DarkThemeID)
+	themeStylesheet, err := d2svg.ThemeCSS(diagramHash, renderOpts.ThemeID, renderOpts.DarkThemeID, renderOpts.ThemeOverrides, renderOpts.DarkThemeOverrides)
 	if err != nil {
 		return nil, err
 	}

d2renderers/d2svg/d2svg.go

@@ -69,12 +69,14 @@ var grain string
 var paper string
 
 type RenderOpts struct {
-	Pad         *int64
-	Sketch      *bool
-	Center      *bool
-	ThemeID     *int64
-	DarkThemeID *int64
-	Font        string
+	Pad                *int64
+	Sketch             *bool
+	Center             *bool
+	ThemeID            *int64
+	DarkThemeID        *int64
+	ThemeOverrides     *d2target.ThemeOverrides
+	DarkThemeOverrides *d2target.ThemeOverrides
+	Font               string
 	// the svg will be scaled by this factor, if unset the svg will fit to screen
 	Scale *float64
 
@@ -1854,7 +1856,7 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 	upperBuf := &bytes.Buffer{}
 	if opts.MasterID == "" {
 		EmbedFonts(upperBuf, diagramHash, buf.String(), diagram.FontFamily, diagram.GetCorpus()) // EmbedFonts *must* run before `d2sketch.DefineFillPatterns`, but after all elements are appended to `buf`
-		themeStylesheet, err := ThemeCSS(diagramHash, &themeID, darkThemeID)
+		themeStylesheet, err := ThemeCSS(diagramHash, &themeID, darkThemeID, opts.ThemeOverrides, opts.DarkThemeOverrides)
 		if err != nil {
 			return nil, err
 		}
@@ -2016,17 +2018,17 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 }
 
 // TODO include only colors that are being used to reduce size
-func ThemeCSS(diagramHash string, themeID *int64, darkThemeID *int64) (stylesheet string, err error) {
+func ThemeCSS(diagramHash string, themeID *int64, darkThemeID *int64, overrides, darkOverrides *d2target.ThemeOverrides) (stylesheet string, err error) {
 	if themeID == nil {
 		themeID = &d2themescatalog.NeutralDefault.ID
 	}
-	out, err := singleThemeRulesets(diagramHash, *themeID)
+	out, err := singleThemeRulesets(diagramHash, *themeID, overrides)
 	if err != nil {
 		return "", err
 	}
 
 	if darkThemeID != nil {
-		darkOut, err := singleThemeRulesets(diagramHash, *darkThemeID)
+		darkOut, err := singleThemeRulesets(diagramHash, *darkThemeID, darkOverrides)
 		if err != nil {
 			return "", err
 		}
@@ -2036,9 +2038,10 @@ func ThemeCSS(diagramHash string, themeID *int64, darkThemeID *int64) (styleshee
 	return out, nil
 }
 
-func singleThemeRulesets(diagramHash string, themeID int64) (rulesets string, err error) {
+func singleThemeRulesets(diagramHash string, themeID int64, overrides *d2target.ThemeOverrides) (rulesets string, err error) {
 	out := ""
 	theme := d2themescatalog.Find(themeID)
+	theme.ApplyOverrides(overrides)
 
 	// Global theme colors
 	for _, property := range []string{"fill", "stroke", "background-color", "color"} {

d2target/d2target.go

@@ -39,18 +39,35 @@ const (
 var BorderOffset = geo.NewVector(5, 5)
 
 type Config struct {
-	Sketch         *bool           `json:"sketch"`
-	ThemeID        *int64          `json:"themeID"`
-	DarkThemeID    *int64          `json:"darkThemeID"`
-	Pad            *int64          `json:"pad"`
-	Center         *bool           `json:"center"`
-	LayoutEngine   *string         `json:"layoutEngine"`
-	ThemeOverrides *ThemeOverrides `json:"themeOverrides"`
+	Sketch             *bool           `json:"sketch"`
+	ThemeID            *int64          `json:"themeID"`
+	DarkThemeID        *int64          `json:"darkThemeID"`
+	Pad                *int64          `json:"pad"`
+	Center             *bool           `json:"center"`
+	LayoutEngine       *string         `json:"layoutEngine"`
+	ThemeOverrides     *ThemeOverrides `json:"themeOverrides,omitempty"`
+	DarkThemeOverrides *ThemeOverrides `json:"darkThemeOverrides,omitempty"`
 }
 
 type ThemeOverrides struct {
-	N1 *string `json:"n1"`
-	// TODO
+	N1  *string `json:"n1"`
+	N2  *string `json:"n2"`
+	N3  *string `json:"n3"`
+	N4  *string `json:"n4"`
+	N5  *string `json:"n5"`
+	N6  *string `json:"n6"`
+	N7  *string `json:"n7"`
+	B1  *string `json:"b1"`
+	B2  *string `json:"b2"`
+	B3  *string `json:"b3"`
+	B4  *string `json:"b4"`
+	B5  *string `json:"b5"`
+	B6  *string `json:"b6"`
+	AA2 *string `json:"aa2"`
+	AA4 *string `json:"aa4"`
+	AA5 *string `json:"aa5"`
+	AB4 *string `json:"ab4"`
+	AB5 *string `json:"ab5"`
 }
 
 type Diagram struct {

d2themes/d2themes.go

@@ -2,7 +2,10 @@
 // Color codes: darkest (N1) -> lightest (N7)
 package d2themes
 
-import "oss.terrastruct.com/d2/lib/color"
+import (
+	"oss.terrastruct.com/d2/d2target"
+	"oss.terrastruct.com/d2/lib/color"
+)
 
 type Theme struct {
 	ID     int64        `json:"id"`
@@ -26,6 +29,70 @@ func (t *Theme) IsDark() bool {
 	return t.ID >= 200 && t.ID < 300
 }
 
+func (t *Theme) ApplyOverrides(overrides *d2target.ThemeOverrides) {
+	if overrides == nil {
+		return
+	}
+
+	if overrides.B1 != nil {
+		t.Colors.B1 = *overrides.B1
+	}
+	if overrides.B2 != nil {
+		t.Colors.B2 = *overrides.B2
+	}
+	if overrides.B3 != nil {
+		t.Colors.B3 = *overrides.B3
+	}
+	if overrides.B4 != nil {
+		t.Colors.B4 = *overrides.B4
+	}
+	if overrides.B5 != nil {
+		t.Colors.B5 = *overrides.B5
+	}
+	if overrides.B5 != nil {
+		t.Colors.B5 = *overrides.B5
+	}
+	if overrides.B6 != nil {
+		t.Colors.B6 = *overrides.B6
+	}
+	if overrides.AA2 != nil {
+		t.Colors.AA2 = *overrides.AA2
+	}
+	if overrides.AA4 != nil {
+		t.Colors.AA4 = *overrides.AA4
+	}
+	if overrides.AA5 != nil {
+		t.Colors.AA5 = *overrides.AA5
+	}
+	if overrides.AB4 != nil {
+		t.Colors.AB4 = *overrides.AB4
+	}
+	if overrides.AB5 != nil {
+		t.Colors.AB5 = *overrides.AB5
+	}
+	if overrides.N1 != nil {
+		t.Colors.Neutrals.N1 = *overrides.N1
+	}
+	if overrides.N2 != nil {
+		t.Colors.Neutrals.N2 = *overrides.N2
+	}
+	if overrides.N3 != nil {
+		t.Colors.Neutrals.N3 = *overrides.N3
+	}
+	if overrides.N4 != nil {
+		t.Colors.Neutrals.N4 = *overrides.N4
+	}
+	if overrides.N5 != nil {
+		t.Colors.Neutrals.N5 = *overrides.N5
+	}
+	if overrides.N6 != nil {
+		t.Colors.Neutrals.N6 = *overrides.N6
+	}
+	if overrides.N7 != nil {
+		t.Colors.Neutrals.N7 = *overrides.N7
+	}
+}
+
 type Neutral struct {
 	N1 string `json:"n1"`
 	N2 string `json:"n2"`