diff --git a/src/dot.ts b/src/dot.ts
index 11c413b..ff80dff 100644
--- a/src/dot.ts
+++ b/src/dot.ts
@@ -11,7 +11,13 @@ export function generateDot(graph: CallHierarchyNode, path: string) {
     const getNode = (n: CallHierarchyNode) => {
         return {
             name: `"${n.item.uri.path}#${n.item.name}@${n.item.range.start.line}:${n.item.range.start.character}"`,
-            attr: { label: n.item.name },
+            attr: {
+                label: n.item.name,
+                color: '$callGraphSecondaryColor',
+                fillcolor: '$callGraphPrimaryColor',
+                style: 'filled',
+                fontcolor: '$callGraphSecondaryColor',
+            },
             subgraph: {
                 name: n.item.uri.path,
                 attr: { label: n.item.uri.path.replace(root, '${workspace}') },
@@ -77,7 +83,12 @@ class Graph {
     private _subgraphs = new Map<string, string>()
     private _nodes = new Set<Node>()
     constructor(title?: string) {
-        this._dot = 'digraph' + ` ${title ?? ''} {\n`
+        this._dot =
+            'digraph' +
+            ` ${title ?? ''} {\n` +
+            'bgcolor="$callGraphBackgroundColor"\n' +
+            'color="$callGraphSecondaryColor"\n' +
+            'fontcolor="$callGraphSecondaryColor"\n'
     }
     addAttr(attr: Attr) {
         this._dot += this.getAttr(attr, true)
@@ -104,7 +115,7 @@ class Graph {
                         return child.name + this.getAttr(child.attr)
                     })
                     .join(' ')
-                s += `{${name}} -> {${children}}\n`
+                s += `{${name}} -> {${children}} [color="$callGraphSecondaryColor"]\n`
             } else s += name + '\n'
             this._dot += s
             this.addNode(
diff --git a/static/index.html b/static/index.html
index abe6b9e..e1c9591 100644
--- a/static/index.html
+++ b/static/index.html
@@ -30,15 +30,32 @@
                 .attr('viewBox', [0, 0, width, height].join(' '))
         }
 
+        function getEditorColor(property) {
+            return document
+                .getElementsByTagName('html')[0]
+                .style.getPropertyValue(property)
+        }
+
         ;(async function () {
+            // --- Styling section ---
+            const BACKGROUND = getEditorColor('--vscode-editor-background')
+            const PRIMARY = getEditorColor(
+                '--vscode-list-activeSelectionBackground',
+            )
+            const SECONDARY = getEditorColor('--vscode-editor-foreground')
+
             const vscode = acquireVsCodeApi()
             // Inject dot file uri: $DOT_FILE_URI
             vscode.setState('$DOT_FILE_URI')
             const dot = await (await fetch('$DOT_FILE_URI')).text()
+            const styledDot = dot
+                .replaceAll('$callGraphBackgroundColor', BACKGROUND)
+                .replaceAll('$callGraphPrimaryColor', PRIMARY)
+                .replaceAll('$callGraphSecondaryColor', SECONDARY)
             const gv = d3
                 .select('#app')
                 .graphviz()
-                .renderDot(dot, () => {
+                .renderDot(styledDot, () => {
                     d3.select(window).on('resize.updatesvg', updateSvgViewBox)
                     updateSvgViewBox()
                 })
@@ -65,7 +82,7 @@
                 vscode.postMessage({
                     command: 'download',
                     type: 'dot',
-                    data: dot,
+                    data: styledDot,
                 })
             })
         })()