Document neo4j-arc theming customization

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[]

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>
+  );
+}
+----

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;

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",