feat: create syntax highlighting theme with dark/light support

1 files changed, 132 insertions, 0 deletions

diff --git a/themes/danix-xyz-hacker/assets/css/chroma-custom.css b/themes/danix-xyz-hacker/assets/css/chroma-custom.css
new file mode 100644
index 0000000..2b4423f
--- /dev/null
+++ b/themes/danix-xyz-hacker/assets/css/chroma-custom.css
@@ -0,0 +1,132 @@
+/* Chroma Syntax Highlighting Theme */
+/* Dark/Light theme support with custom properties */
+
+:root {
+  /* Dark theme colors */
+  --chroma-bg-dark: #0c1520;
+  --chroma-bg-light: #f0f4f8;
+  --chroma-text-dark: #c4d6e8;
+  --chroma-text-light: #0d1b2a;
+  --chroma-keyword: #a855f7;
+  --chroma-string: #00ff88;
+  --chroma-number: #38bdf8;
+  --chroma-comment: #7a9bb8;
+  --chroma-error: #ff6b6b;
+}
+
+/* Default dark theme for .highlight */
+.highlight {
+  background-color: var(--chroma-bg-dark);
+  color: var(--chroma-text-dark);
+  padding: 1rem;
+  border-radius: 0.375rem;
+  overflow-x: auto;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+/* Light theme override */
+html.theme-light .highlight {
+  background-color: var(--chroma-bg-light);
+  color: var(--chroma-text-light);
+}
+
+/* Keyword tokens - purple */
+.highlight .k,
+.highlight .kc,
+.highlight .kd,
+.highlight .kn,
+.highlight .kp,
+.highlight .kr,
+.highlight .kt {
+  color: var(--chroma-keyword);
+  font-weight: 500;
+}
+
+/* String tokens - green */
+.highlight .s,
+.highlight .sb,
+.highlight .sc,
+.highlight .sd,
+.highlight .s1,
+.highlight .s2,
+.highlight .se,
+.highlight .sh,
+.highlight .si,
+.highlight .sx {
+  color: var(--chroma-string);
+}
+
+/* Number tokens - cyan */
+.highlight .m,
+.highlight .mb,
+.highlight .mf,
+.highlight .mh,
+.highlight .mi,
+.highlight .il,
+.highlight .mo {
+  color: var(--chroma-number);
+}
+
+/* Comment tokens - gray, italic */
+.highlight .c,
+.highlight .c1,
+.highlight .cm {
+  color: var(--chroma-comment);
+  font-style: italic;
+}
+
+/* Name tokens - default text color */
+.highlight .n,
+.highlight .na,
+.highlight .nb,
+.highlight .nc,
+.highlight .no,
+.highlight .nd,
+.highlight .ni,
+.highlight .nl,
+.highlight .nn,
+.highlight .nt,
+.highlight .nv {
+  color: inherit;
+}
+
+/* Error tokens - red */
+.highlight .err {
+  color: var(--chroma-error);
+}
+
+/* Line numbers styling */
+.highlight .ln {
+  color: var(--chroma-comment);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Inline code styling */
+code {
+  background-color: var(--chroma-bg-dark);
+  color: var(--chroma-text-dark);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  font-size: 0.875em;
+}
+
+/* Light theme inline code override */
+html.theme-light code {
+  background-color: var(--chroma-bg-light);
+  color: var(--chroma-text-light);
+}
+
+/* Code block styling for pre tag */
+pre {
+  margin: 0;
+}
+
+pre code {
+  background-color: transparent;
+  color: inherit;
+  padding: 0;
+}