Improve css themes (#2921)

This pr:
- Removes the light `ayu` theme.
- Adds the light `latte` theme (this now becomes the default theme).
- Adds the dark `frappe` theme.
- Adds the dark `moccha` theme.
- Refactor all source themes to use css variables instead of inlined
color definitions. This makes it much easier to maintain.

app/Commands/Html/Options.hs

@@ -47,7 +47,7 @@ parseHtml = do
       (eitherReader parseTheme)
       ( long "theme"
           <> metavar "THEME"
-          <> value Ayu
+          <> value Latte
           <> showDefault
           <> help ("Theme for syntax highlighting. " <> availableStr)
           <> completeWith (map show allThemes)

assets/css/source-frappe.css

@@ -0,0 +1,106 @@
+/* Color palette based on https://github.com/catppuccin/catppuccin#-palette */
+
+:root {
+  --ctp-frappe-rosewater: #f2d5cf;
+  --ctp-frappe-flamingo: #eebebe;
+  --ctp-frappe-pink: #f4b8e4;
+  --ctp-frappe-mauve: #ca9ee6;
+  --ctp-frappe-red: #e78284;
+  --ctp-frappe-maroon: #ea999c;
+  --ctp-frappe-peach: #ef9f76;
+  --ctp-frappe-yellow: #e5c890;
+  --ctp-frappe-green: #a6d189;
+  --ctp-frappe-teal: #81c8be;
+  --ctp-frappe-sky: #99d1db;
+  --ctp-frappe-sapphire: #85c1dc;
+  --ctp-frappe-blue: #8caaee;
+  --ctp-frappe-lavender: #babbf1;
+  --ctp-frappe-text: #c6d0f5;
+  --ctp-frappe-subtext1: #b5bfe2;
+  --ctp-frappe-subtext0: #a5adce;
+  --ctp-frappe-overlay2: #949cbb;
+  --ctp-frappe-overlay1: #838ba7;
+  --ctp-frappe-overlay0: #737994;
+  --ctp-frappe-surface2: #626880;
+  --ctp-frappe-surface1: #51576d;
+  --ctp-frappe-surface0: #414559;
+  --ctp-frappe-base: #303446;
+  --ctp-frappe-mantle: #292c3c;
+  --ctp-frappe-crust: #232634;
+}
+
+body {
+    background-color: var(--ctp-frappe-base);
+}
+
+.ju-inductive {
+    color: var(--ctp-frappe-green);
+}
+
+.ju-constructor {
+    color: var(--ctp-frappe-mauve);
+}
+
+.ju-function {
+    color: var(--ctp-frappe-yellow);
+}
+
+.ju-axiom {
+    color: var(--ctp-frappe-red);
+}
+
+.ju-string {
+    color: var(--ctp-frappe-flamingo);
+}
+
+.ju-keyword {
+    color: var(--ctp-frappe-sky);
+}
+
+.ju-delimiter {
+    color: var(--ctp-frappe-overlay2);
+}
+
+.ju-var {
+    color: var(--ctp-frappe-text);
+}
+
+.ju-fixity {
+    color: var(--ctp-frappe-sapphire);
+}
+
+.ju-comment {
+    color: var(--ctp-frappe-rosewater);
+}
+
+.ju-judoc {
+    color: var(--ctp-frappe-teal);
+}
+
+.ju-number {
+    color: var(--ctp-frappe-subtext1);
+}
+
+.ju-define {
+    font-weight: bold;
+}
+
+a:link,
+a:visited {
+    text-decoration: none;
+}
+
+a:hover,
+a.hover-highlight {
+    background-color: var(--ctp-frappe-mantle);
+}
+
+footer {
+    color: var(--ctp-frappe-subtext1);
+}
+
+footer a {
+    color: var(--ctp-frappe-subtext1);
+    font-size: small;
+    font-weight: bold;
+}

assets/css/source-latte.css

@@ -0,0 +1,106 @@
+/* Color palette based on https://github.com/catppuccin/catppuccin#-palette */
+
+:root {
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+}
+
+body {
+    background-color: var(--ctp-latte-base);
+}
+
+.ju-inductive {
+    color: var(--ctp-latte-green);
+}
+
+.ju-constructor {
+    color: var(--ctp-latte-mauve);
+}
+
+.ju-function {
+    color: var(--ctp-latte-yellow);
+}
+
+.ju-axiom {
+    color: var(--ctp-latte-red);
+}
+
+.ju-string {
+    color: var(--ctp-latte-flamingo);
+}
+
+.ju-keyword {
+    color: var(--ctp-latte-sky);
+}
+
+.ju-delimiter {
+    color: var(--ctp-latte-overlay2);
+}
+
+.ju-var {
+    color: var(--ctp-latte-text);
+}
+
+.ju-fixity {
+    color: var(--ctp-latte-sapphire);
+}
+
+.ju-comment {
+    color: var(--ctp-latte-rosewater);
+}
+
+.ju-judoc {
+    color: var(--ctp-latte-teal);
+}
+
+.ju-number {
+    color: var(--ctp-latte-subtext1);
+}
+
+.ju-define {
+    font-weight: bold;
+}
+
+a:link,
+a:visited {
+    text-decoration: none;
+}
+
+a:hover,
+a.hover-highlight {
+    background-color: var(--ctp-latte-mantle);
+}
+
+footer {
+    color: var(--ctp-latte-subtext1);
+}
+
+footer a {
+    color: var(--ctp-latte-subtext1);
+    font-size: small;
+    font-weight: bold;
+}