feat: add dark:matrix theme

README.md

@@ -1,3 +1,19 @@
+<h1 align="center">Matrix Inspired Theme</h1>
+
+I’ve added a custom theme inspired by **The Matrix**.
+You can preview it below:
+
+<p align="center">
+  <img src="./preview-matrix.png" alt="Matrix theme preview">
+</p>
+
+<b>Disclaimer</b>
+
+This theme is inspired by the visual style of *The Matrix* movie. It is not affiliated with, endorsed by, or associated with Warner Bros. or any official Matrix franchise rights holders. All trademarks and copyrights belong to their respective owners.
+
+<hr>
+
+<h1 align="center">Original README</h1>
 
 <p align="center">
   <img src="./preview.png">
@@ -64,7 +80,7 @@ However, the amount of effort needed to maintain and develop new features for th
 massCode allows you to organize snippets using multi-level folders as well as tags. Each snippet has fragments - tabs, which gives even greater level of organization.
 
 ### Editor
-massCode uses [Codemirror](https://github.com/codemirror/codemirror5) as the basis for the editor and `.tmLanguage` as the grammar for syntax highlighting. This tandem opens the door to over [600](https://github.com/github/linguist/blob/master/vendor/README.md) existing grammars. The application currently supports more than [160](https://github.com/massCodeIO/massCode/tree/master/src/renderer/components/editor) grammars. In addition to `.tmLanguage`, the application supports `.tmTheme` for themes. There is also support for [Prettier](https://prettier.io) for code formatting. 
+massCode uses [Codemirror](https://github.com/codemirror/codemirror5) as the basis for the editor and `.tmLanguage` as the grammar for syntax highlighting. This tandem opens the door to over [600](https://github.com/github/linguist/blob/master/vendor/README.md) existing grammars. The application currently supports more than [160](https://github.com/massCodeIO/massCode/tree/master/src/renderer/components/editor) grammars. In addition to `.tmLanguage`, the application supports `.tmTheme` for themes. There is also support for [Prettier](https://prettier.io) for code formatting.
 
 ### Real-time Render for HTML & CSS
 You can not only collect snippets, but also see the rendering result for HTML and CSS in real time. Test the idea or just view the result.
@@ -122,4 +138,4 @@ You can also [download](https://github.com/antonreshetov/massCode) massCode v1.
 
 [AGPL-3.0](https://github.com/massCodeIO/massCode/blob/master/LICENSE)
 
-Copyright (c) 2019-present, [Anton Reshetov](https://github.com/antonreshetov).
+Copyright (c) 2019-present, [Anton Reshetov](https://github.com/antonreshetov).

src/renderer/assets/scss/themes.scss

@@ -27,8 +27,8 @@
 
   --color-button: hsl(44, 60%, 85%);
   --color-button-hover: var(--color-contrast-low-alt);
-  --color-button-action-hover: var(--color-contrast-lower-alt3); 
-  
+  --color-button-action-hover: var(--color-contrast-lower-alt3);
+
   --color-checkbox: var(--color-contrast-lower-alt);
 
   --color-input: var(--color-contrast-lower-alt);
@@ -48,7 +48,7 @@
 
 [data-theme='dark:one'] {
   --color-primary: hsl(215, 69%, 45%);
-  
+
   --color-bg: hsl(220, 13%, 18%);
 
   --color-contrast-lower: hsl(220, 13%, 20%);
@@ -57,12 +57,12 @@
   --color-contrast-lower-alt3: hsl(220, 13%, 30%);
   --color-contrast-lower-low: hsl(220, 13%, 40%);
   --color-contrast-medium: hsl(220, 13%, 50%);
-  
+
   --color-border: var(--color-contrast-lower-alt2);
-  
+
   --color-snippet-list: var(--color-bg);
   --color-snippet-selected: var(--color-contrast-lower-alt);
-  
+
   --color-sidebar: var(--color-bg);
   --color-sidebar-item-selected: var(--color-contrast-lower-alt);
   --color-sidebar-icon: var(--color-text);
@@ -71,8 +71,8 @@
 
   --color-button: var(--color-contrast-lower-alt);
   --color-button-hover: var(--color-contrast-lower-alt2);
-  --color-button-action: var(--color-contrast-low); 
-  --color-button-action-hover: var(--color-contrast-lower-alt2); 
+  --color-button-action: var(--color-contrast-low);
+  --color-button-action-hover: var(--color-contrast-lower-alt2);
 
   --color-input: var(--color-bg);
 
@@ -85,7 +85,7 @@
   --color-primary: hsl(215, 69%, 45%);
 
   // при конвертации в hsl цвет отличается, поэтому оставляем в hex
-  --color-bg: #282A36; 
+  --color-bg: #282A36;
 
   --color-contrast-lower: hsl(231, 15%, 20%);
   --color-contrast-lower-alt: hsl(231, 15%, 22%);
@@ -107,7 +107,7 @@
 
   --color-button: var(--color-contrast-lower-alt);
   --color-button-hover: var(--color-contrast-lower-alt2);
-  --color-button-action: var(--color-contrast-low); 
+  --color-button-action: var(--color-contrast-low);
   --color-button-action-hover: var(--color-contrast-lower-alt2);
 
   --color-input: var(--color-bg);
@@ -143,7 +143,7 @@
 
   --color-button: var(--color-contrast-lower-alt);
   --color-button-hover: var(--color-contrast-lower-alt2);
-  --color-button-action: var(--color-contrast-low); 
+  --color-button-action: var(--color-contrast-low);
   --color-button-action-hover: var(--color-contrast-lower-alt2);
 
   --color-input: var(--color-bg);
@@ -178,7 +178,7 @@
 
   --color-button: var(--color-contrast-lower-alt);
   --color-button-hover: var(--color-contrast-lower-alt2);
-  --color-button-action: var(--color-contrast-low); 
+  --color-button-action: var(--color-contrast-low);
   --color-button-action-hover: var(--color-contrast-lower-alt2);
 
   --color-input: var(--color-bg);
@@ -214,7 +214,7 @@
 
   --color-button: var(--color-contrast-lower-alt);
   --color-button-hover: var(--color-contrast-lower-alt2);
-  --color-button-action: var(--color-contrast-low); 
+  --color-button-action: var(--color-contrast-low);
   --color-button-action-hover: var(--color-contrast-lower-alt2);
 
   --color-input: var(--color-bg);
@@ -252,7 +252,7 @@
 
   --color-button: var(--color-contrast-lower-alt);
   --color-button-hover: var(--color-contrast-lower-alt2);
-  --color-button-action: var(--color-contrast-low); 
+  --color-button-action: var(--color-contrast-low);
   --color-button-action-hover: var(--color-contrast-lower-alt2);
 
   --color-input: var(--color-bg);
@@ -289,7 +289,44 @@
 
   --color-button: var(--color-contrast-lower-alt);
   --color-button-hover: var(--color-contrast-lower-alt2);
-  --color-button-action: var(--color-contrast-low); 
+  --color-button-action: var(--color-contrast-low);
+  --color-button-action-hover: var(--color-contrast-lower-alt2);
+
+  --color-input: var(--color-bg);
+
+  --color-menu-selected: var(--color-contrast-lower-alt);
+
+  --color-tag-delete: var(--color-contrast-lower-alt3);
+}
+
+[data-theme='dark:matrix'] {
+  --color-primary: hsla(140, 100%, 50%, 0.414);
+
+  // при конвертации в hsl цвет отличается, поэтому оставляем в hex
+  --color-bg: #000000;
+
+
+  --color-contrast-lower: hsla(140, 100%, 50%, 0.250);
+  --color-contrast-lower-alt: hsla(140, 100%, 50%, 0.250);
+  --color-contrast-lower-alt2: hsla(140, 100%, 50%, 0.250);
+  --color-contrast-lower-alt3: #000000;
+  --color-contrast-lower-low: #000000;
+  --color-contrast-medium: #000000;
+
+  --color-snippet-list: var(--color-bg);
+  --color-snippet-selected: var(--color-contrast-lower-alt);
+
+  --color-sidebar: var(--color-bg);
+  --color-sidebar-item-selected: var(--color-contrast-lower-alt);
+  --color-sidebar-icon: var(--color-text);
+
+  --color-border: var(--color-contrast-lower-alt2);
+
+  --color-text: hsl(140, 100%, 50%);
+
+  --color-button: var(--color-contrast-lower-alt);
+  --color-button-hover: var(--color-contrast-lower-alt2);
+  --color-button-action: var(--color-contrast-low);
   --color-button-action-hover: var(--color-contrast-lower-alt2);
 
   --color-input: var(--color-bg);
@@ -306,4 +343,4 @@
       color: var(--color-text);
     }
   }
-}
+}

src/renderer/components/editor/themes.ts

@@ -84,6 +84,16 @@ export const themes: ThemeConfig[] = [
       divider: '#1C2029'
     }
   },
+  {
+    name: 'Matrix',
+    label: 'Matrix',
+    value: 'dark:matrix',
+    loader: () => import('./themes/matrix.tmTheme.json'),
+    gutterSettings: {
+      background: '#1C2029',
+      divider: '#1C2029'
+    }
+  },
   {
     name: 'GitHub',
     label: 'GitHub',