ObsiViewer/src/app/editor/components/block/blocks/code-themes.css

/* Code Block Themes for Nimbus Editor */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500;600&family=Source+Code+Pro:wght@300;400;500;600&family=Ubuntu+Mono:wght@400;700&display=swap');

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}


/* Base styles */
.theme-default {
  background-color: #f5f5f5;
  color: #333;
}

.theme-default code {
  color: #333;
}

:host-context(.dark) .theme-default {
  background-color: #1e1e1e;
  color: #d4d4d4;
}

:host-context(.dark) .theme-default code {
  color: #d4d4d4;
}

/* Darcula Theme */
.theme-darcula {
  background-color: #2b2b2b;
  color: #a9b7c6;
}

.theme-darcula code {
  color: #a9b7c6;
}

/* MBO Theme */
.theme-mbo {
  background-color: #2c2c2c;
  color: #f8f8f2;
}

.theme-mbo code {
  color: #f8f8f2;
}

/* MDN Theme */
.theme-mdn {
  background-color: #f9f9fa;
  color: #4d4e53;
}

.theme-mdn code {
  color: #4d4e53;
}

:host-context(.dark) .theme-mdn {
  background-color: #2d2d2d;
  color: #e4e4e7;
}

/* Monokai Theme */
.theme-monokai {
  background-color: #272822;
  color: #f8f8f2;
}

.theme-monokai code {
  color: #f8f8f2;
}

/* Neat Theme */
.theme-neat {
  background-color: #ffffff;
  color: #333333;
}

.theme-neat code {
  color: #333333;
}

:host-context(.dark) .theme-neat {
  background-color: #1a1a1a;
  color: #e5e5e5;
}

/* NEO Theme */
.theme-neo {
  background-color: #ffffff;
  color: #2973b7;
}

.theme-neo code {
  color: #2973b7;
}

:host-context(.dark) .theme-neo {
  background-color: #1b1b1b;
  color: #61afef;
}

/* Nord Theme */
.theme-nord {
  background-color: #2e3440;
  color: #d8dee9;
}

.theme-nord code {
  color: #d8dee9;
}

/* Yeti Theme */
.theme-yeti {
  background-color: #eceeef;
  color: #5d646d;
}

.theme-yeti code {
  color: #5d646d;
}

:host-context(.dark) .theme-yeti {
  background-color: #2a2a2a;
  color: #b5bbc4;
}

/* Yonce Theme */
.theme-yonce {
  background-color: #1c1c1c;
  color: #c5c8c6;
}

.theme-yonce code {
  color: #c5c8c6;
}

/* Zenburn Theme */
.theme-zenburn {
  background-color: #3f3f3f;
  color: #dcdccc;
}

.theme-zenburn code {
  color: #dcdccc;
}

/* Line numbers styling */
.with-line-numbers {
  padding-left: 3.5rem !important;
}

/* Font Families */
.font-fira {
  font-family: 'Fira Code', 'Fira Mono', monospace;
}

.font-jetbrains {
  font-family: 'JetBrains Mono', monospace;
}

.font-consolas {
  font-family: 'Consolas', 'Monaco', monospace;
}

.font-source {
  font-family: 'Source Code Pro', monospace;
}

.font-ubuntu {
  font-family: 'Ubuntu Mono', monospace;
}

/* Highlight.js Syntax Coloring */

/* Keywords, Tags */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-link {
  font-weight: bold;
}

/* Darcula Theme Syntax */
.theme-darcula .hljs-keyword {
  color: #cc7832;
}

.theme-darcula .hljs-string {
  color: #6a8759;
}

.theme-darcula .hljs-number {
  color: #6897bb;
}

.theme-darcula .hljs-comment {
  color: #808080;
  font-style: italic;
}

.theme-darcula .hljs-function {
  color: #ffc66d;
}

.theme-darcula .hljs-class {
  color: #a9b7c6;
}

.theme-darcula .hljs-variable {
  color: #9876aa;
}

.theme-darcula .hljs-built_in {
  color: #8888c6;
}

/* Default Theme Syntax */
.theme-default .hljs-keyword {
  color: #0000ff;
}

.theme-default .hljs-string {
  color: #a31515;
}

.theme-default .hljs-number {
  color: #098658;
}

.theme-default .hljs-comment {
  color: #008000;
  font-style: italic;
}

.theme-default .hljs-function {
  color: #795e26;
}

:host-context(.dark) .theme-default .hljs-keyword {
  color: #569cd6;
}

:host-context(.dark) .theme-default .hljs-string {
  color: #ce9178;
}

:host-context(.dark) .theme-default .hljs-number {
  color: #b5cea8;
}

:host-context(.dark) .theme-default .hljs-comment {
  color: #6a9955;
  font-style: italic;
}

:host-context(.dark) .theme-default .hljs-function {
  color: #dcdcaa;
}

/* Monokai Theme Syntax */
.theme-monokai .hljs-keyword {
  color: #f92672;
}

.theme-monokai .hljs-string {
  color: #e6db74;
}

.theme-monokai .hljs-number {
  color: #ae81ff;
}

.theme-monokai .hljs-comment {
  color: #75715e;
  font-style: italic;
}

.theme-monokai .hljs-function {
  color: #a6e22e;
}

.theme-monokai .hljs-class {
  color: #a6e22e;
}

.theme-monokai .hljs-built_in {
  color: #66d9ef;
}

/* Nord Theme Syntax */
.theme-nord .hljs-keyword {
  color: #81a1c1;
}

.theme-nord .hljs-string {
  color: #a3be8c;
}

.theme-nord .hljs-number {
  color: #b48ead;
}

.theme-nord .hljs-comment {
  color: #616e88;
  font-style: italic;
}

.theme-nord .hljs-function {
  color: #88c0d0;
}

.theme-nord .hljs-built_in {
  color: #8fbcbb;
}

/* Zenburn Theme Syntax */
.theme-zenburn .hljs-keyword {
  color: #f0dfaf;
}

.theme-zenburn .hljs-string {
  color: #cc9393;
}

.theme-zenburn .hljs-number {
  color: #8cd0d3;
}

.theme-zenburn .hljs-comment {
  color: #7f9f7f;
  font-style: italic;
}

.theme-zenburn .hljs-function {
  color: #efef8f;
}

/* Generic styles for all themes */
.hljs-attr,
.hljs-attribute {
  color: inherit;
  opacity: 0.9;
}

.hljs-meta {
  color: inherit;
  opacity: 0.7;
  font-style: italic;
}

.hljs-title {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}