From 552ff73d6045be2f39c320057ede8523dae79df0 Mon Sep 17 00:00:00 2001
From: Jack <jack20220723@gmail.com>
Date: Sun, 26 Nov 2023 09:30:16 +0800
Subject: [PATCH] Document neo4j-arc theming customization

---
 docs/modules/ROOT/content-nav.adoc            |  1 +
 docs/modules/ROOT/pages/neo4j-arc/themes.adoc | 41 +++++++++++++++++++
 .../GraphVisualizer/styled.tsx                |  2 +
 src/neo4j-arc/package.json                    |  2 +-
 4 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 docs/modules/ROOT/pages/neo4j-arc/themes.adoc

diff --git a/docs/modules/ROOT/content-nav.adoc b/docs/modules/ROOT/content-nav.adoc
index acfabad3832..b9f1a5c7c58 100644
--- a/docs/modules/ROOT/content-nav.adoc
+++ b/docs/modules/ROOT/content-nav.adoc
@@ -31,5 +31,6 @@
 
 * xref:neo4j-arc/index.adoc[Neo4J Arc]
 ** xref:neo4j-arc/i18n.adoc[]
+** xref:neo4j-arc/themes.adoc[]
 ** xref:neo4j-arc/graph-modelling.adoc[]
 ** xref:neo4j-arc/graph-interactions.adoc[]
diff --git a/docs/modules/ROOT/pages/neo4j-arc/themes.adoc b/docs/modules/ROOT/pages/neo4j-arc/themes.adoc
new file mode 100644
index 00000000000..99fda0fd89d
--- /dev/null
+++ b/docs/modules/ROOT/pages/neo4j-arc/themes.adoc
@@ -0,0 +1,41 @@
+:description: This section describes how styling is implemented in neo4j-arc and how to customize it
+
+[[neo4j-arc-themes]]
+= Theming
+
+neo4j-arc has full theming support via
+https://qubitpi.github.io/styled-components-website/docs/advanced#theming[styled-component] , which provides a theme to
+all neo4j-arc components underneath itself via the context API. In the render tree all styled-components will have
+access to the provided theme, even when they are multiple levels deep.
+
+Themes are passed down to a component using the `theme` prop
+
+Create a file named *themes.ts*:
+
+[source,typescript]
+----
+export const theme = {
+  frameSidebarBackground: "transparent",
+};
+----
+
+Load the themes:
+
+[source,typescript]
+----
+import { ThemeProvider } from "styled-components";
+import { theme } from "./themes";
+
+export default function MyGraphComponent(): JSX.Element {
+
+  const themeData = theme;
+
+  return (
+    <ThemeProvider theme={themeData}>
+      <GraphVisualizer
+      ...
+      />
+    </ThemeProvider>
+  );
+}
+----
diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/styled.tsx b/src/neo4j-arc/graph-visualization/GraphVisualizer/styled.tsx
index a3690937dfc..1b690e603ec 100644
--- a/src/neo4j-arc/graph-visualization/GraphVisualizer/styled.tsx
+++ b/src/neo4j-arc/graph-visualization/GraphVisualizer/styled.tsx
@@ -46,6 +46,8 @@ export const StyledNodeInspectorContainer = styled.div<{
 export const StyledNodeInspectorTopMenuChevron = styled.button<{
   expanded: boolean
 }>`
+  border: none;
+  outline: none;
   background-color: ${props => props.theme.frameSidebarBackground};
   cursor: pointer;
   position: absolute;
diff --git a/src/neo4j-arc/package.json b/src/neo4j-arc/package.json
index f6560e72c03..81a44299ce2 100644
--- a/src/neo4j-arc/package.json
+++ b/src/neo4j-arc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "neo4j-devtools-arc",
-  "version": "0.0.68",
+  "version": "0.0.69",
   "main": "dist/neo4j-arc.js",
   "author": "Neo4j Inc.",
   "license": "GPL-3.0",