2 files changed, 62 insertions, 8 deletions
diff --git a/docs/src/components/ClassPropertyRef.tsx b/docs/src/components/ClassPropertyRef.tsx
new file mode 100644
index 00000000..7246663b
--- /dev/null
+++ b/docs/src/components/ClassPropertyRef.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+
+interface ClassPropertyRefProps {
+  name: string;
+  details: string;
+  required: boolean;
+  default: string;
+}
+
+const PYTHON_TYPES = {
+  string: "str",
+  integer: "int",
+};
+
+export default function ClassPropertyRef(props: ClassPropertyRefProps) {
+  const details = JSON.parse(props.details);
+
+  return (
+    <>
+      <div>
+        <h4 style={{ display: "inline-block", marginRight: "10px" }}>
+          {props.name}
+        </h4>
+        {props.required && (
+          <span
+            style={{
+              color: "red",
+              fontSize: "11px",
+              marginRight: "4px",
+              borderRadius: "4px",
+              border: "1px solid red",
+              padding: "1px 2px",
+            }}
+          >
+            REQUIRED
+          </span>
+        )}
+        <span>
+          {details.type && `(${PYTHON_TYPES[details.type] || details.type})`}
+        </span>
+
+        {props.default && (
+          <span>
+            {" "}
+            = {details.type === "string" && '"'}
+            {props.default}
+            {details.type === "string" && '"'}
+          </span>
+        )}
+      </div>
+      <p>{details.description}</p>
+    </>
+  );
+}
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 794febaf..3a7178dd 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -18,13 +18,13 @@
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
-  --ifm-color-primary: #be1b55ff;
-  --ifm-color-primary-dark: #be1b55ff;
-  --ifm-color-primary-darker: #be1b55ff;
-  --ifm-color-primary-darkest: #be1b55ff;
-  --ifm-color-primary-light: #be1b55ff;
-  --ifm-color-primary-lighter: #be1b55ff;
-  --ifm-color-primary-lightest: #be1b55ff;
+[data-theme="dark"] {
+  --ifm-color-primary: #59bc89ff;
+  --ifm-color-primary-dark: #59bc89ff;
+  --ifm-color-primary-darker: #59bc89ff;
+  --ifm-color-primary-darkest: #59bc89ff;
+  --ifm-color-primary-light: #59bc89ff;
+  --ifm-color-primary-lighter: #59bc89ff;
+  --ifm-color-primary-lightest: #59bc89ff;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }