Merge pull request #98 from MohLovesCode/add-crimson-carbon-theme

Add crimson-carbon theme
streetwriters · Aug 3, 2024 · a74d594 · a74d594
2 parents 6b52485 + 65c96cb
commit a74d594
Show file tree

Hide file tree

Showing 2 changed files with 269 additions and 0 deletions.
diff --git a/themes/crimson-carbon/v1/code-block.css b/themes/crimson-carbon/v1/code-block.css
@@ -0,0 +1,156 @@
+code[class*="language-"],
+pre[class*="language-"] {
+    background: #1E1E1E; /* Matches the background color */
+    color: #D9D9D9; /* Light text color for readability */
+    font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    line-height: 1.5;
+    -moz-tab-size: 2;
+    -o-tab-size: 2;
+    tab-size: 2;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+pre[class*="language-"] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    border-radius: 0.3em;
+    border: 1px solid #3E3E3E; /* Slight border to differentiate code blocks */
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+    background: #2D2D2D; /* Slightly lighter background for inline code */
+    padding: 0.2em 0.3em;
+    border-radius: 0.3em;
+    white-space: normal;
+}
+
+/* Token styles */
+.token.comment,
+.token.prolog,
+.token.cdata {
+    color: #6A6A6A; /* Dark grey for comments */
+}
+
+.token.doctype,
+.token.punctuation,
+.token.entity {
+    color: #D9D9D9;
+}
+
+.token.attr-name,
+.token.class-name,
+.token.boolean,
+.token.constant,
+.token.number,
+.token.atrule {
+    color: #FF5370; /* Accent color */
+}
+
+.token.keyword {
+    color: #C3E88D; /* Success color */
+}
+
+.token.property,
+.token.tag,
+.token.symbol,
+.token.deleted,
+.token.important {
+    color: #FF5370; /* Error or important highlights */
+}
+
+.token.selector,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted,
+.token.regex,
+.token.attr-value,
+.token.attr-value>.token.punctuation {
+    color: #C3E88D; /* Matches success accent */
+}
+
+.token.variable,
+.token.operator,
+.token.function {
+    color: #82AAFF; /* Secondary accent color */
+}
+
+.token.url {
+    color: #82AAFF; /* URL color matching secondary accent */
+}
+
+/* General */
+.token.bold {
+    font-weight: bold;
+}
+
+.token.comment,
+.token.italic {
+    font-style: italic;
+}
+
+.token.entity {
+    cursor: help;
+}
+
+.token.namespace {
+    opacity: 0.8;
+}
+
+/* Line Highlight plugin overrides */
+.line-highlight.line-highlight {
+    background: rgba(255, 83, 112, 0.15); /* Highlight with transparent accent */
+}
+
+.line-highlight.line-highlight:before,
+.line-highlight.line-highlight[data-end]:after {
+    background: #1E1E1E;
+    color: #D9D9D9;
+    padding: 0.1em 0.6em;
+    border-radius: 0.3em;
+    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
+}
+
+/* Line Numbers and Command Line plugins overrides */
+.line-numbers.line-numbers .line-numbers-rows,
+.command-line .command-line-prompt {
+    border-right-color: rgba(255, 83, 112, 0.2);
+}
+
+.line-numbers .line-numbers-rows>span:before,
+.command-line .command-line-prompt>span:before {
+    color: #8A8A8A; /* Line number color */
+}
+
+/* Toolbar plugin overrides */
+div.code-toolbar>.toolbar.toolbar>.toolbar-item>button,
+div.code-toolbar>.toolbar.toolbar>.toolbar-item>a,
+div.code-toolbar>.toolbar.toolbar>.toolbar-item>span {
+    background: #2D2D2D;
+    color: #D9D9D9;
+    padding: 0.1em 0.4em;
+    border-radius: 0.3em;
+}
+
+div.code-toolbar>.toolbar.toolbar>.toolbar-item>button:hover,
+div.code-toolbar>.toolbar.toolbar>.toolbar-item>button:focus,
+div.code-toolbar>.toolbar.toolbar>.toolbar-item>a:hover,
+div.code-toolbar>.toolbar.toolbar>.toolbar-item>a:focus,
+div.code-toolbar>.toolbar.toolbar>.toolbar-item>span:hover,
+div.code-toolbar>.toolbar.toolbar>.toolbar-item>span:focus {
+    background: #3A3A3A;
+    color: #FFFFFF;
+}
+
+/* Plugin overrides */
+/* For various other plugins and overrides, you can adapt the colors similarly */
diff --git a/themes/crimson-carbon/v1/theme.json b/themes/crimson-carbon/v1/theme.json
@@ -0,0 +1,113 @@
+{
+  "$schema": "https://raw.githubusercontent.com/streetwriters/notesnook-themes/main/schemas/v1.schema.json",
+  "name": "Crimson Carbon",
+  "id": "crimson-carbon",
+  "version": 1,
+  "license": "GPL-3.0-or-later",
+  "homepage": "https://notesnook.com",
+  "description": "A dark mode theme inspired by the Carbon look.",
+  "colorScheme": "dark",
+  "compatibilityVersion": 1,
+  "authors": [
+    {
+      "name": "MohLovesCode"
+    }
+  ],
+  "scopes": {
+    "base": {
+      "primary": {
+        "accent": "#FF5370",
+        "paragraph": "#D9D9D9",
+        "background": "#1E1E1E",
+        "border": "#3E3E3E",
+        "heading": "#FFFFFF",
+        "icon": "#D9D9D9",
+        "separator": "#3E3E3E",
+        "placeholder": "#8A8A8A",
+        "hover": "#2E2E2E",
+        "accentForeground": "#FFFFFF",
+        "backdrop": "#00000080"
+      },
+      "secondary": {
+        "accent": "#82AAFF",
+        "paragraph": "#B0B0B0",
+        "background": "#252526",
+        "border": "#3E3E3E",
+        "heading": "#D9D9D9",
+        "icon": "#B0B0B0",
+        "separator": "#3E3E3E",
+        "placeholder": "#6A6A6A",
+        "hover": "#323232",
+        "accentForeground": "#FFFFFF",
+        "backdrop": "#00000080"
+      },
+      "disabled": {
+        "accent": "#484848",
+        "paragraph": "#4A4A4A",
+        "background": "#2D2D2D",
+        "border": "#3E3E3E",
+        "heading": "#6A6A6A",
+        "icon": "#6A6A6A",
+        "separator": "#3E3E3E",
+        "placeholder": "#4A4A4A",
+        "hover": "#3A3A3A",
+        "accentForeground": "#4A4A4A",
+        "backdrop": "#00000080"
+      },
+      "selected": {
+        "accent": "#FF5370",
+        "paragraph": "#FFFFFF",
+        "background": "#333333",
+        "border": "#FF5370",
+        "heading": "#FFFFFF",
+        "icon": "#FFFFFF",
+        "separator": "#FF5370",
+        "placeholder": "#FFFFFF",
+        "hover": "#444444",
+        "accentForeground": "#FFFFFF",
+        "backdrop": "#00000080"
+      },
+      "error": {
+        "accent": "#FF5370",
+        "paragraph": "#FF5370",
+        "background": "#2D2D2D",
+        "border": "#FF5370",
+        "heading": "#FF5370",
+        "icon": "#FF5370",
+        "separator": "#FF5370",
+        "placeholder": "#FF5370",
+        "hover": "#FF5370",
+        "accentForeground": "#FFFFFF",
+        "backdrop": "#00000080"
+      },
+      "success": {
+        "accent": "#C3E88D",
+        "paragraph": "#C3E88D",
+        "background": "#2D2D2D",
+        "border": "#C3E88D",
+        "heading": "#C3E88D",
+        "icon": "#C3E88D",
+        "separator": "#C3E88D",
+        "placeholder": "#C3E88D",
+        "hover": "#C3E88D",
+        "accentForeground": "#1E1E1E",
+        "backdrop": "#00000080"
+      }
+    },
+    "statusBar": {
+      "primary": {
+        "accent": "#FF5370",
+        "paragraph": "#D9D9D9",
+        "background": "#1E1E1E",
+        "border": "#3E3E3E",
+        "heading": "#FFFFFF",
+        "icon": "#D9D9D9",
+        "separator": "#3E3E3E",
+        "placeholder": "#8A8A8A",
+        "hover": "#2E2E2E",
+        "accentForeground": "#FFFFFF",
+        "backdrop": "#00000080"
+      }
+    }
+  }
+}