feat: add Tokyo Night Storm theme

frontend/src/style/CSS Themes/Highlighting styles/tokyonight_day.css

@@ -0,0 +1,26 @@
+/*!
+This Highlight theme is based on:
+Tokyo Night Day - https://github.com/tokyo-night/tokyo-night-vscode-theme
+
+Custom Highlight theme made by @MarkoSagadin, 2025
+ */
+
+:root, .card{
+    --background: #e6e7ed;
+    --foreground: #343b58;
+    --black:   #e6e7ed;
+    --red:     #8c4351;
+    --green:   #33635c;
+    --yellow:  #8f5e15;
+    --blue:    #2959aa;
+    --magenta: #5a3e8e;
+    --cyan:    #0f4b6e;
+    --white:   #343b58;
+    --bright_black:   #6c6e75;
+    --bright_white:   #343b58;
+    --constant: #965027;
+    --string: #385f0d;
+    --code-text: #343b58;
+    --code-comment: #6c6e75;
+    --code-background: #e6e7ed
+}

frontend/src/style/CSS Themes/Highlighting styles/tokyonight_day_and_storm_tokens.css

@@ -0,0 +1,85 @@
+/*!
+This Highlight tokens should be used with:
+- Tokyo Night Day
+- Tokyo Night Storm
+ */
+
+
+/* Guide to the tokens: https://pygments.org/docs/tokens/ */
+.highlight .hll { background-color: var(--yellow) }
+.highlight__code  { background: var(--code-background); color: var(--code-text); }
+.highlight .c { color: var(--code-comment) } /* Comment */
+.highlight .err { color: var(--red) } /* Error */
+.highlight .g { color: var(--code-text) } /* Generic */
+.highlight .k { color: var(--blue); font-weight: bold; } /* Keyword */
+.highlight .l { color: var(--code-text) } /* Literal */
+.highlight .n { color: var(--constant) } /* Name */
+.highlight .o { color: var(--blue); font-weight: bold; } /* Operator */
+.highlight .x { color: var(--code-text) } /* Other */
+.highlight .p { color: var(--magenta) } /* Punctuation */
+.highlight .ch { color: var(--code-comment) } /* Comment.Hashbang */
+.highlight .cm { color: var(--code-comment) } /* Comment.Multiline */
+.highlight .cp { color: var(--yellow) } /* Comment.Preproc */
+.highlight .cpf { color: var(--code-comment) } /* Comment.PreprocFile */
+.highlight .c1 { color: var(--code-comment) } /* Comment.Single */
+.highlight .cs { color: var(--code-comment) } /* Comment.Special */
+.highlight .gd { color: var(--red) } /* Generic.Deleted */
+.highlight .ge { color: var(--code-text); text-decoration: underline } /* Generic.Emph */
+.highlight .gr { color: var(--code-text) } /* Generic.Error */
+.highlight .gh { color: var(--code-text); font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: var(--code-text); font-weight: bold } /* Generic.Inserted */
+.highlight .go { color: var(--code-text) } /* Generic.Output */
+.highlight .gp { color: var(--code-text) } /* Generic.Prompt */
+.highlight .gs { color: var(--code-text) } /* Generic.Strong */
+.highlight .gu { color: var(--code-text); font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: var(--code-text) } /* Generic.Traceback */
+.highlight .kc { color: var(--constant) } /* Keyword.Constant */
+.highlight .kd { color: var(--magenta) } /* Keyword.Declaration */
+.highlight .kn { color: var(--red) } /* Keyword.Namespace */
+.highlight .kp { color: var(--red) } /* Keyword.Pseudo */
+.highlight .kr { color: var(--red) } /* Keyword.Reserved */
+.highlight .kt { color: var(--red) } /* Keyword.Type */
+.highlight .ld { color: var(--code-text) } /* Literal.Date */
+.highlight .m { color: var(--magenta) } /* Literal.Number */
+.highlight .s { color: var(--green) } /* Literal.String */
+.highlight .na { color: var(--green) } /* Name.Attribute */
+.highlight .nb { color: var(--cyan); font-style: italic } /* Name.Builtin */
+.highlight .nc { color: var(--yellow) } /* Name.Class */
+.highlight .no { color: var(--blue); font-style: italic } /* Name.Constant */
+.highlight .nd { color: var(--code-text) } /* Name.Decorator */
+.highlight .ni { color: var(--code-text) } /* Name.Entity */
+.highlight .ne { color: var(--red) } /* Name.Exception */
+.highlight .nf { color: var(--blue) } /* Name.Function */
+.highlight .nl { color: var(--green); font-style: italic } /* Name.Label */
+.highlight .nn { color: var(--code-text) } /* Name.Namespace */
+.highlight .nx { color: var(--blue) } /* Name.Other */
+.highlight .py { color: var(--green) } /* Name.Property */
+.highlight .nt { color: var(--red) } /* Name.Tag */
+.highlight .nv { color: var(--white); font-style: italic } /* Name.Variable */
+.highlight .ow { color: var(--magenta); font-weight: bold; } /* Operator.Word */
+.highlight .w { color: var(--code-text) } /* Text.Whitespace */
+.highlight .mb { color: var(--magenta) } /* Literal.Number.Bin */
+.highlight .mf { color: var(--magenta) } /* Literal.Number.Float */
+.highlight .mh { color: var(--magenta) } /* Literal.Number.Hex */
+.highlight .mi { color: var(--magenta) } /* Literal.Number.Integer */
+.highlight .mo { color: var(--magenta) } /* Literal.Number.Oct */
+.highlight .sa { color: var(--string) } /* Literal.String.Affix */
+.highlight .sb { color: var(--string) } /* Literal.String.Backtick */
+.highlight .sc { color: var(--string) } /* Literal.String.Char */
+.highlight .dl { color: var(--string) } /* Literal.String.Delimiter */
+.highlight .sd { color: var(--string) } /* Literal.String.Doc */
+.highlight .s2 { color: var(--string) } /* Literal.String.Double */
+.highlight .se { color: var(--string) } /* Literal.String.Escape */
+.highlight .sh { color: var(--string) } /* Literal.String.Heredoc */
+.highlight .si { color: var(--string) } /* Literal.String.Interpol */
+.highlight .sx { color: var(--string) } /* Literal.String.Other */
+.highlight .sr { color: var(--string) } /* Literal.String.Regex */
+.highlight .s1 { color: var(--string) } /* Literal.String.Single */
+.highlight .ss { color: var(--string) } /* Literal.String.Symbol */
+.highlight .bp { color: var(--code-text); font-style: italic } /* Name.Builtin.Pseudo */
+.highlight .fm { color: var(--green) } /* Name.Function.Magic */
+.highlight .vc { color: var(--yellow); font-style: italic } /* Name.Variable.Class */
+.highlight .vg { color: var(--code-text); font-style: italic } /* Name.Variable.Global */
+.highlight .vi { color: var(--yellow); font-style: italic } /* Name.Variable.Instance */
+.highlight .vm { color: var(--green); font-style: italic } /* Name.Variable.Magic */
+.highlight .il { color: var(--magenta) } /* Literal.Number.Integer.Long */

frontend/src/style/CSS Themes/Highlighting styles/tokyonight_storm.css

@@ -0,0 +1,26 @@
+/*!
+This Highlight theme is based on:
+Tokyo Night Storm - https://github.com/tokyo-night/tokyo-night-vscode-theme
+
+Custom Highlight theme made by @MarkoSagadin, 2025
+ */
+
+:root, .card.nightMode{
+    --background: #1a1b26;
+    --foreground: #a9b1d6;
+    --black:   #414868;
+    --red:     #f7768e;
+    --green:   #73daca;
+    --yellow:  #e0af68;
+    --blue:    #7aa2f7;
+    --magenta: #bb9af7;
+    --cyan:    #7dcfff;
+    --white:   #c0caf5;
+    --bright_black:   #414868;
+    --bright_white:   #c0caf5;
+    --constant: #ff9e64;
+    --string: #9ece6a;
+    --code-text: #c0caf5;
+    --code-comment: #565f89;
+    --code-background: #1a1b26
+}

frontend/src/style/CSS Themes/UI Themes/tokyonight_day.css

@@ -0,0 +1,24 @@
+/*!
+This UI theme is based on:
+Tokyo Night Day theme - https://github.com/tokyo-night/tokyo-night-vscode-theme
+
+Custom Ui theme made by @MarkoSagadin, 2025
+ */
+:root, .card.nightMode{
+    --main-background: #e6e7ed;
+    --secondary-background: #cdced4;
+    --tabs-label-background: #b3b4ba;
+    --accent-background: #8c4351;
+    --cloze-background: #5a3e8e;
+    --codeline-hover-background: rgba(108,110,117, 0.2);
+    --main-color: #0f4b6e;
+    --secondary-color: #6c6e75;
+    --accent-color: #2959aa;
+    --cloze-color: #e6e7ed;
+    --h1: #2959aa;
+    --h2: #5a3e8e;
+    --h3: #8c4351;
+    --h4: #8f5e15;
+    --h5: #385f0d;
+    --h6: #0f4b6e;
+}

frontend/src/style/CSS Themes/UI Themes/tokyonight_storm.css

@@ -0,0 +1,24 @@
+/*!
+This UI theme is based on:
+Tokyo Night Storm theme - https://github.com/tokyo-night/tokyo-night-vscode-theme
+
+Custom Ui theme made by @MarkoSagadin, 2025
+ */
+:root, .card.nightMode{
+    --main-background: #1a1b26;
+    --secondary-background: #565f89;
+    --tabs-label-background: #414868;
+    --accent-background: #f7768e;
+    --cloze-background: #7dcfff;
+    --codeline-hover-background: rgba(41, 46, 66, .8);
+    --main-color: #c0caf5;
+    --secondary-color: #a9b1d6;
+    --accent-color: #7aa2f7;
+    --cloze-color: #1a1b26;
+    --h1: #7aa2f7;
+    --h2: #bb9af7;
+    --h3: #f7768e;
+    --h4: #e0af68;
+    --h5: #9ece6a;
+    --h6: #7dcfff;
+}

frontend/src/style/CSS Themes/full_themes/tokyonight_day.css

@@ -0,0 +1,6 @@
+@import url("../UI\ Themes/tokyonight_day.css");
+@import url("../Highlighting styles/tokyonight_day.css");
+
+@import url("../Highlighting styles/tokyonight_day_and_storm_tokens.css");
+
+@import url("../../themeless_main.sass");

frontend/src/style/CSS Themes/full_themes/tokyonight_day_and_storm.css

@@ -0,0 +1,9 @@
+@import url("../UI\ Themes/tokyonight_day.css");
+@import url("../Highlighting styles/tokyonight_day.css");
+
+@import url("../UI\ Themes/tokyonight_storm.css");
+@import url("../Highlighting styles/tokyonight_storm.css");
+
+@import url("../Highlighting styles/tokyonight_day_and_storm_tokens.css");
+
+@import url("../../themeless_main.sass");

frontend/src/style/CSS Themes/full_themes/tokyonight_storm.css

@@ -0,0 +1,6 @@
+@import url("../UI\ Themes/tokyonight_storm.css");
+@import url("../Highlighting styles/tokyonight_storm.css");
+
+@import url("../Highlighting styles/tokyonight_day_and_storm_tokens.css");
+
+@import url("../../themeless_main.sass");

themes/README.md

@@ -6,6 +6,7 @@
 
 - [Rose Pine and Dawn](#Rose-Pine-and-Dawn)
 - [Catpuccin Latte and Macchiato](#Catpuccin-Latte-and-Macchiato)
+- [Tokyo Night Day and Storm](#Tokyo-Night-Day-and-Storm)
 
 All dual themes are also available in individual Light and Dark versions.
 
@@ -28,7 +29,14 @@ Inspired by: https://rosepinetheme.com/
 Inspired by: https://github.com/catppuccin/catppuccin
 ![A demo image of the catpuccin latte theme](./docs/catpuccin-latte.webp)
 
-### Catpuccin Macchiato
+## Tokyo Night Day and Storm
 
-Inspired by: https://github.com/catppuccin/catppuccin
-![A demo image of the catpuccin macchiato theme](./docs/catpuccin-macchiato.webp)
+Inspired by: https://github.com/tokyo-night/tokyo-night-vscode-theme
+
+## Tokyo Night Day
+
+![A demo image of the tokyo night day theme](./docs/tokyo-night-day.webp)
+
+## Tokyo Night Storm
+
+![A demo image of the toko night storm theme](./docs/tokyo-night-storm.webp)