save

d2renderers/d2svg/d2svg.go

@@ -1732,23 +1732,31 @@ func drawShape(writer, appendixWriter io.Writer, diagramHash string, targetShape
 			render = strings.ReplaceAll(render, "<hr>", "<hr />")
 
 			mdEl := d2themes.NewThemableElement("div", inlineTheme)
-			mdEl.ClassName = "md"
 			mdEl.Content = render
 
 			// We have to set with styles since within foreignObject, we're in html
 			// land and not SVG attributes
 			var styles []string
+			var classes []string = []string{"md"}
 			if targetShape.FontSize != textmeasure.MarkdownFontSize {
 				styles = append(styles, fmt.Sprintf("font-size:%vpx", targetShape.FontSize))
 			}
+
 			if targetShape.Fill != "" && targetShape.Fill != "transparent" {
-				styles = append(styles, fmt.Sprintf(`background-color:%s`, targetShape.Fill))
+				if color.IsThemeColor(targetShape.Fill) {
+					classes = append(classes, fmt.Sprintf("fill-%s", targetShape.Fill))
+				} else {
+					styles = append(styles, fmt.Sprintf(`background-color:%s`, targetShape.Fill))
+				}
 			}
+
 			if !color.IsThemeColor(targetShape.Color) {
 				styles = append(styles, fmt.Sprintf(`color:%s`, targetShape.Color))
-			} else if inlineTheme != nil {
+			} else {
-				styles = append(styles, fmt.Sprintf(`color:%s`, d2themes.ResolveThemeColor(*inlineTheme, targetShape.Color)))
+				classes = append(classes, fmt.Sprintf("color-%s", targetShape.Color))
 			}
+
+			mdEl.ClassName = strings.Join(classes, " ")
 			// When using dark theme, inlineTheme is nil and we rely on CSS variables
 
 			mdEl.Style = strings.Join(styles, ";")
@@ -1948,6 +1956,7 @@ func EmbedFonts(buf *bytes.Buffer, diagramHash, source string, fontFamily *d2fon
 			`class="text"`,
 			`class="text `,
 			`class="md"`,
+			`class="md `,
 		},
 		fmt.Sprintf(`
 .%s .text {
@@ -1967,7 +1976,10 @@ func EmbedFonts(buf *bytes.Buffer, diagramHash, source string, fontFamily *d2fon
 	appendOnTrigger(
 		buf,
 		source,
-		[]string{`class="md"`},
+		[]string{
+			`class="md"`,
+			`class="md `,
+		},
 		fmt.Sprintf(`
 @font-face {
 	font-family: %s-font-semibold;

d2renderers/d2svg/github-markdown.css

@@ -26,7 +26,6 @@
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   margin: 0;
-  color: var(--color-fg-default);
   background-color: transparent; /* we don't want to define the background color */
   font-family: "font-regular";
   font-size: 16px;

e2etests/testdata/txtar/c4-theme/dagre/board.exp.json

@@ -3,7 +3,7 @@
   "config": {
     "sketch": false,
     "themeID": 303,
-    "darkThemeID": null,
+    "darkThemeID": 200,
     "pad": null,
     "center": null,
     "layoutEngine": null

e2etests/testdata/txtar/c4-theme/elk/board.exp.json

@@ -3,7 +3,7 @@
   "config": {
     "sketch": false,
     "themeID": 303,
-    "darkThemeID": null,
+    "darkThemeID": 200,
     "pad": null,
     "center": null,
     "layoutEngine": null

e2etests/txtar.txt

@@ -1161,3 +1161,103 @@ customer4: |md
 | {
   shape: c4-person
 }
+
+-- c4-theme --
+vars: {
+  d2-config: {
+    theme-id: 303
+		dark-theme-id: 200
+  }
+}
+
+customer: |md
+  ## Personal Banking Customer
+  [person]
+
+  A customer of the bank, with personal bank accounts.
+| {
+  shape: c4-person
+}
+
+internet_banking_system: |md
+  ## Internet Banking System
+  [Software System]
+| {
+  shape: rectangle
+  label.near: bottom-left
+}
+
+internet_banking_system.web_app: |md
+  ## Web Application
+  [Container: Java and Spring MVC]
+
+  Delivers the static content and the Internet banking single page application.
+| {
+  shape: rectangle
+}
+
+internet_banking_system.spa: |md
+  ## Single-Page Application
+  [Container: JavaScript and Angular]
+
+  Provides all of the Internet banking functionality to customers via their web browser.
+| {
+  shape: rectangle
+}
+
+internet_banking_system.mobile_app: |md
+  ## Mobile App
+  [Container: Xamarin]
+
+  Provides a limited subset of the Internet banking functionality to customers via their mobile device.
+| {
+  shape: rectangle
+}
+
+internet_banking_system.api_app: |md
+  ## API Application
+  [Container: Java and Spring MVC]
+
+  Provides Internet banking functionality via a JSON/HTTPS API.
+| {
+  shape: rectangle
+}
+
+internet_banking_system.database: |md
+  ## Database
+  [Container: Oracle Database Schema]
+
+  Stores user registration information, hashed authentication credentials, access logs, etc.
+| {
+  shape: rectangle
+}
+
+email_system: |md
+  ## E-mail System
+  [Software System]
+
+  The internal Microsoft Exchange e-mail system.
+| {
+  shape: rectangle
+}
+
+mainframe: |md
+  ## Mainframe Banking System
+  [Software System]
+
+  Stores all of the core banking information about customers, accounts, transactions, etc.
+| {
+  shape: rectangle
+}
+
+# Connections
+customer -> internet_banking_system.web_app: "Visits bigbank.com/ib using\n[HTTPS]"
+internet_banking_system.web_app -> internet_banking_system.spa: "Delivers to the customer's web browser"
+customer -> internet_banking_system.spa: "Views account balances, and makes payments using"
+customer -> internet_banking_system.mobile_app: "Views account balances, and makes payments using"
+internet_banking_system.spa -> internet_banking_system.api_app: "Makes API calls to\n[JSON/HTTPS]"
+internet_banking_system.mobile_app -> internet_banking_system.api_app: "Makes API calls to\n[JSON/HTTPS]"
+internet_banking_system.api_app -> mainframe: "Makes API calls to\n[XML/HTTPS]"
+customer -> email_system: "Sends e-mails to"
+internet_banking_system.api_app -> email_system: "Sends e-mail using"
+internet_banking_system.database <-> internet_banking_system.api_app: "Reads from and writes to\n[SQL/TCP]"