feat: introduce dual themes, make themes easier to apply

CHANGELOG.md

@@ -15,6 +15,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 the highlighted code blocks in generated Anki cards will be sideways scrollable. This 
 option is by default disabled, to ensure that it's addition doesn't break existing 
 users. (@MarkoSagadin)
+- Added Dual themes to the `themes` folder. Dual themes contain both light and dark versions of the
+  same theme. Users can switch between the two versions by changing the theming preference in the
+Anki clients. (@MarkoSagadin)
 
 ### Fixed
 - When reviewing card styles in Anki from its editor view, night mode now triggers the night-mode styles as expected. (@MarkoSagadin)

README.md

@@ -45,7 +45,7 @@ PyPi - https://pypi.org/project/markdown2anki
 - **Write and format cards in Markdown**: create cards in Markdown syntax and then import them into Anki while retaining their structure.
 - **Custom Note types** that support split-screen, tabs, keyboard shortcuts, and mobile devices.
 - **No addons needed**: The resulting cards are pure HTML and the note-type is CSS and JS, which work with vanilla Anki.
-- **Different themes**: themes for both day and night modes, which are easily customizable. You can [check them out here](https://github.com/Mochitto/Markdown2Anki/tree/master/themes)!
+- **Different themes**: themes containing both day and night modes, which are easily customizable. You can [check them out here](https://github.com/Mochitto/Markdown2Anki/tree/master/themes)!
 - **Code highlighting** (using [pygments](https://pygments.org/)).
 - **Support for clozes** including those in code blocks.
 - **Support for images** with automatic importing: the program can find the images you mention in your obsidian notes and copy them to your Anki's media folder.
@@ -304,15 +304,27 @@ my_list.{{C1::sort}}(True)
 ```
 
 ### Changing Themes
-The default theme is mochitto's Rosé Pine theme, but there is also a catpuccin theme.  
+
+The default theme is mochitto's Rosé Pine and Dawn theme, but there are also other themes available.
 You can find all the themes in the [themes folder](https://github.com/Mochitto/Markdown2Anki/tree/master/themes).  
-To use another theme, you can just copy the CSS from the file in the themes folder and paste it in your Note types' styling field.  
 
-This can be found by accessing `Tools>Manage Note Types>(select your note type)>Cards(on the right)>Styling(on the left)`. The `Tools` menu is found in the top-left part of Anki's main menu.   
+#### How to change the theme
+
+To use another theme, you can just copy the CSS from the file in the themes folder and paste it in your Note types' styling field.  
+This can be found by accessing `Tools -> Manage Note Types -> (select your note type) -> Cards(on the right) -> Styling(on the left)`. The `Tools` menu is found in the top-left part of Anki's main menu.   
 You can reference this: [Video Tutorial showing how to access a card's style](https://github.com/Mochitto/Markdown2Anki/blob/master/docs/How_to_find_styling.mp4)
 
 You can read more on how styling happens here: https://docs.ankiweb.net/templates/styling.html
 
+#### Dual themes
+
+Some themes contain two variants in the same CSS file: a light and a dark one.
+Themes [Rosé Pine and Dawn](themes/rose_pine_and_dawn.css), and [Catpuccin Latte and Macchiato](themes/catpuccin_latte_and_macchiato.css) are examples of this.
+
+To switch between light and dark theme in Anki:
+* Desktop Anki - `Tools -> Preferences -> Appearance -> Theme`
+* AnkiDroid - `Hamburger icon (top-left) -> Settings -> Appearance -> Theme`
+
 ### Navigating the UI
 The custom User Interface of the note-type that comes with this project is focused on the concept of tabs.  
 You can have side-by-side tabs and multiple tabs to toggle through.  

frontend/esbuild_themes.js

@@ -4,6 +4,7 @@
 // Themes between UI and Code highlighting.
 import esbuild from 'esbuild';
 import path from "path";
+import { sassPlugin } from "esbuild-sass-plugin";
 
 // Get the file path and filename from command line arguments
 const [themePath] = process.argv.slice(2);
@@ -14,6 +15,9 @@ esbuild.build({
   entryPoints: [themePath],
   bundle: true,
   minify: true,
+  plugins: [sassPlugin({
+    type: "css",
+    })],
   outfile: path.join("..", "themes", fileName),
 }).then(() => console.log(`⚡ ${fileName} built! ⚡`))
   .catch(() => process.exit(1));

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

@@ -1,7 +1,7 @@
 /*!
 This Highlight theme is based on:
 Catpuccin Theme Latte - https://github.com/catppuccin/catppuccin
-  
+
 Custom highlight theme made by @Mochitto, 2023
  */
 :root, .card{
@@ -23,82 +23,3 @@ Custom highlight theme made by @Mochitto, 2023
   --code-comment: #9ca0b0;
   --code-background: #eff1f5;
 }
-
-/* Guide to the tokens: https://pygments.org/docs/tokens/ */
-.highlight .hll { background-color: var(--peach) }
- .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(--sky); font-weight: bold; } /* Keyword */
- .highlight .l { color: var(--code-text) } /* Literal */
- .highlight .n { color: var(--blue) } /* Name */
- .highlight .o { color: var(--sky); font-weight: bold; } /* Operator */
- .highlight .x { color: var(--code-text) } /* Other */
- .highlight .p { color: var(--red) } /* Punctuation */
- .highlight .ch { color: var(--code-comment) } /* Comment.Hashbang */
- .highlight .cm { color: var(--code-comment) } /* Comment.Multiline */
- .highlight .cp { color: var(--peach) } /* 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(--teal) } /* Keyword.Constant */
- .highlight .kd { color: var(--red) } /* Keyword.Declaration */
- .highlight .kn { color: var(--red) } /* Keyword.Namespace */
- .highlight .kp { color: var(--red) } /* Keyword.Pseudo */
- .highlight .kr { color: var(--sky); font-weight: bold; } /* Keyword.Reserved */
- .highlight .kt { color: var(--mauve) } /* Keyword.Type */
- .highlight .ld { color: var(--code-text) } /* Literal.Date */
- .highlight .m { color: var(--mauve) } /* Literal.Number */
- .highlight .s { color: var(--green) } /* Literal.String */
- .highlight .na { color: var(--green) } /* Name.Attribute */
- .highlight .nb { color: var(--maroon); font-style: italic } /* Name.Builtin */
- .highlight .nc { color: var(--peach) } /* 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(--teal); font-style: italic } /* Name.Label */
- .highlight .nn { color: var(--code-text) } /* Name.Namespace */
- .highlight .nx { color: var(--code-text) } /* Name.Other */
- .highlight .py { color: var(--blue) } /* Name.Property */
- .highlight .nt { color: var(--red) } /* Name.Tag */
- .highlight .nv { color: var(--teal); font-style: italic } /* Name.Variable */
- .highlight .ow { color: var(--mauve); font-weight: bold; } /* Operator.Word */
- .highlight .w { color: var(--code-text) } /* Text.Whitespace */
- .highlight .mb { color: var(--mauve) } /* Literal.Number.Bin */
- .highlight .mf { color: var(--mauve) } /* Literal.Number.Float */
- .highlight .mh { color: var(--mauve) } /* Literal.Number.Hex */
- .highlight .mi { color: var(--mauve) } /* Literal.Number.Integer */
- .highlight .mo { color: var(--mauve) } /* Literal.Number.Oct */
- .highlight .sa { color: var(--green) } /* Literal.String.Affix */
- .highlight .sb { color: var(--green) } /* Literal.String.Backtick */
- .highlight .sc { color: var(--green) } /* Literal.String.Char */
- .highlight .dl { color: var(--green) } /* Literal.String.Delimiter */
- .highlight .sd { color: var(--green) } /* Literal.String.Doc */
- .highlight .s2 { color: var(--green) } /* Literal.String.Double */
- .highlight .se { color: var(--green) } /* Literal.String.Escape */
- .highlight .sh { color: var(--green) } /* Literal.String.Heredoc */
- .highlight .si { color: var(--green) } /* Literal.String.Interpol */
- .highlight .sx { color: var(--green) } /* Literal.String.Other */
- .highlight .sr { color: var(--green) } /* Literal.String.Regex */
- .highlight .s1 { color: var(--green) } /* Literal.String.Single */
- .highlight .ss { color: var(--green) } /* 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(--rosewater); font-style: italic } /* Name.Variable.Class */
- .highlight .vg { color: var(--code-text); font-style: italic } /* Name.Variable.Global */
- .highlight .vi { color: var(--rosewater); font-style: italic } /* Name.Variable.Instance */
- .highlight .vm { color: var(--teal); font-style: italic } /* Name.Variable.Magic */
- .highlight .il { color: var(--mauve) } /* Literal.Number.Integer.Long */

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

@@ -0,0 +1,84 @@
+/*!
+This Highlight tokens should be used with:
+- Catpuccin Theme Latte
+- Catpuccin Theme Macchiato
+ */
+
+/* Guide to the tokens: https://pygments.org/docs/tokens/ */
+.highlight .hll { background-color: var(--peach) }
+.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(--sky); font-weight: bold; } /* Keyword */
+.highlight .l { color: var(--code-text) } /* Literal */
+.highlight .n { color: var(--blue) } /* Name */
+.highlight .o { color: var(--sky); font-weight: bold; } /* Operator */
+.highlight .x { color: var(--code-text) } /* Other */
+.highlight .p { color: var(--red) } /* Punctuation */
+.highlight .ch { color: var(--code-comment) } /* Comment.Hashbang */
+.highlight .cm { color: var(--code-comment) } /* Comment.Multiline */
+.highlight .cp { color: var(--peach) } /* 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(--teal) } /* Keyword.Constant */
+.highlight .kd { color: var(--red) } /* Keyword.Declaration */
+.highlight .kn { color: var(--red) } /* Keyword.Namespace */
+.highlight .kp { color: var(--red) } /* Keyword.Pseudo */
+.highlight .kr { color: var(--sky); font-weight: bold; } /* Keyword.Reserved */
+.highlight .kt { color: var(--mauve) } /* Keyword.Type */
+.highlight .ld { color: var(--code-text) } /* Literal.Date */
+.highlight .m { color: var(--mauve) } /* Literal.Number */
+.highlight .s { color: var(--green) } /* Literal.String */
+.highlight .na { color: var(--green) } /* Name.Attribute */
+.highlight .nb { color: var(--maroon); font-style: italic } /* Name.Builtin */
+.highlight .nc { color: var(--peach) } /* 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(--teal); font-style: italic } /* Name.Label */
+.highlight .nn { color: var(--code-text) } /* Name.Namespace */
+.highlight .nx { color: var(--code-text) } /* Name.Other */
+.highlight .py { color: var(--blue) } /* Name.Property */
+.highlight .nt { color: var(--red) } /* Name.Tag */
+.highlight .nv { color: var(--teal); font-style: italic } /* Name.Variable */
+.highlight .ow { color: var(--mauve); font-weight: bold; } /* Operator.Word */
+.highlight .w { color: var(--code-text) } /* Text.Whitespace */
+.highlight .mb { color: var(--mauve) } /* Literal.Number.Bin */
+.highlight .mf { color: var(--mauve) } /* Literal.Number.Float */
+.highlight .mh { color: var(--mauve) } /* Literal.Number.Hex */
+.highlight .mi { color: var(--mauve) } /* Literal.Number.Integer */
+.highlight .mo { color: var(--mauve) } /* Literal.Number.Oct */
+.highlight .sa { color: var(--green) } /* Literal.String.Affix */
+.highlight .sb { color: var(--green) } /* Literal.String.Backtick */
+.highlight .sc { color: var(--green) } /* Literal.String.Char */
+.highlight .dl { color: var(--green) } /* Literal.String.Delimiter */
+.highlight .sd { color: var(--green) } /* Literal.String.Doc */
+.highlight .s2 { color: var(--green) } /* Literal.String.Double */
+.highlight .se { color: var(--green) } /* Literal.String.Escape */
+.highlight .sh { color: var(--green) } /* Literal.String.Heredoc */
+.highlight .si { color: var(--green) } /* Literal.String.Interpol */
+.highlight .sx { color: var(--green) } /* Literal.String.Other */
+.highlight .sr { color: var(--green) } /* Literal.String.Regex */
+.highlight .s1 { color: var(--green) } /* Literal.String.Single */
+.highlight .ss { color: var(--green) } /* 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(--rosewater); font-style: italic } /* Name.Variable.Class */
+.highlight .vg { color: var(--code-text); font-style: italic } /* Name.Variable.Global */
+.highlight .vi { color: var(--rosewater); font-style: italic } /* Name.Variable.Instance */
+.highlight .vm { color: var(--teal); font-style: italic } /* Name.Variable.Magic */
+.highlight .il { color: var(--mauve) } /* Literal.Number.Integer.Long */