feat: sign-in box

docs/components/builder/code-tabs/theme.ts

@@ -0,0 +1,79 @@
+import { PrismTheme } from "prism-react-renderer";
+
+const theme: PrismTheme = {
+	plain: {
+		color: "#d0d0d0",
+		backgroundColor: "#000000", // Changed to true black
+	},
+	styles: [
+		{
+			types: ["comment", "prolog", "doctype", "cdata"],
+			style: {
+				color: "#555555",
+				fontStyle: "italic",
+			},
+		},
+		{
+			types: ["namespace"],
+			style: {
+				opacity: 0.7,
+			},
+		},
+		{
+			types: ["string", "attr-value"],
+			style: {
+				color: "#8ab4f8", // Darker soft blue for strings
+			},
+		},
+		{
+			types: ["punctuation", "operator"],
+			style: {
+				color: "#888888",
+			},
+		},
+		{
+			types: [
+				"entity",
+				"url",
+				"symbol",
+				"number",
+				"boolean",
+				"variable",
+				"constant",
+				"property",
+				"regex",
+				"inserted",
+			],
+			style: {
+				color: "#a0a0a0",
+			},
+		},
+		{
+			types: ["atrule", "keyword", "attr-name", "selector"],
+			style: {
+				color: "#c5c5c5",
+				fontWeight: "bold",
+			},
+		},
+		{
+			types: ["function", "deleted", "tag"],
+			style: {
+				color: "#7aa2f7", // Darker soft blue for functions
+			},
+		},
+		{
+			types: ["function-variable"],
+			style: {
+				color: "#9e9e9e",
+			},
+		},
+		{
+			types: ["tag", "selector", "keyword"],
+			style: {
+				color: "#cccccc", // Adjusted to a slightly lighter gray for better contrast on true black
+			},
+		},
+	],
+};
+
+export default theme;