From 0fd7d636c9cda77e0aae9e338ad209f45a054887 Mon Sep 17 00:00:00 2001
From: MengT <meng.tang@canonical.com>
Date: Tue, 12 Dec 2023 14:29:42 +0800
Subject: [PATCH] add mermaid css for accessbility

---
 docs/.sphinx/_static/checkbox-doc.css | 44 +++++++++++++++++++++++++++
 docs/conf.py                          |  1 +
 2 files changed, 45 insertions(+)
 create mode 100644 docs/.sphinx/_static/checkbox-doc.css

diff --git a/docs/.sphinx/_static/checkbox-doc.css b/docs/.sphinx/_static/checkbox-doc.css
new file mode 100644
index 0000000000..3e6e4edc8a
--- /dev/null
+++ b/docs/.sphinx/_static/checkbox-doc.css
@@ -0,0 +1,44 @@
+.mermaid {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 0.5rem;
+    font-family: Ubuntu, sans-serif;
+}
+
+.mermaid .node rect,
+.mermaid .node circle,
+.mermaid .node ellipse,
+.mermaid .node polygon,
+.mermaid .node path,
+.mermaid rect.actor,
+.mermaid .labelBox polygon
+{
+    fill: var(--color-background-item) !important;
+    stroke: var(--color-background-border) !important;
+}
+
+
+.mermaid .label text,
+.mermaid span,
+.mermaid p
+{
+    color: var(--color-content-foreground) !important;
+}
+
+.mermaid .actor tspan,
+.mermaid text.messageText
+{
+    fill: var(--color-content-foreground) !important;
+}
+
+.mermaid .flowchart-link,
+.mermaid line
+{
+    stroke: var(--color-content-foreground) !important;
+}
+
+.mermaid .marker
+{
+    fill: var(--color-content-foreground) !important;
+    stroke: var(--color-content-foreground) !important;
+}
\ No newline at end of file
diff --git a/docs/conf.py b/docs/conf.py
index 4f8c96e167..ce6f927d6c 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -153,6 +153,7 @@
 html_css_files = [
     'custom.css',
     'github_issue_links.css',
+    'checkbox-doc.css'
 ]
 html_js_files = [
     'github_issue_links.js',