fix background color

www/css/style.css

@@ -0,0 +1,3 @@
+body {
+  background-color: var(--theme-bg);
+}

www/css/themes/README.md

@@ -0,0 +1,3 @@
+We're exploiting the fact that css variables are computed lazily.
+That way we only have to write one file in `./maps/` for all the
+theme variants we need. **Way** less boilerplate.

www/css/themes/core.css

@@ -0,0 +1,16 @@
+.theme-tty-prompt {
+    color: var(--theme-tty-prompt);
+}
+
+.theme-tty-command {
+    color: var(--theme-tty-command);
+}
+
+.theme-tty-warning {
+    color: var(--theme-tty-warning);
+}
+
+.theme-tty-error {
+    color: var(--theme-tty-error);
+}
+

www/css/themes/maps/rose-pine.css

@@ -0,0 +1,29 @@
+/*
+Variables:
+    --palette-rose-pine-base
+    --palette-rose-pine-surface
+    --palette-rose-pine-overlay
+    --palette-rose-pine-muted
+    --palette-rose-pine-subtle
+    --palette-rose-pine-text
+    --palette-rose-pine-love
+    --palette-rose-pine-gold
+    --palette-rose-pine-rose
+    --palette-rose-pine-pine
+    --palette-rose-pine-foam
+    --palette-rose-pine-iris
+    --palette-rose-pine-highlight-low
+    --palette-rose-pine-highlight-med
+    --palette-rose-pine-highlight-high
+*/
+
+:root {
+    --theme-base: var(--palette-rose-pine-base);
+    --theme-bg: var(--palette-rose-pine-base);
+        
+    --theme-tty-prompt: var(--palette-rose-pine-foam);
+    --theme-tty-command: var(--palette-rose-pine-iris);
+    --theme-tty-warning: var(--palette-rose-pine-gold);
+    --theme-tty-errror: var(--palette-rose-pine-love);
+    /* --theme-tty-: var(--palette-rose-pine-); */
+}

www/css/themes/palettes/rose-pine-dawn.css

@@ -0,0 +1,17 @@
+:root {
+    --palette-rose-pine-base: hsl(32deg, 57%, 95%);
+    --palette-rose-pine-surface: hsl(35deg, 100%, 98%);
+    --palette-rose-pine-overlay: hsl(33deg, 43%, 91%);
+    --palette-rose-pine-muted: hsl(257deg, 9%, 61%);
+    --palette-rose-pine-subtle: hsl(248deg, 12%, 52%);
+    --palette-rose-pine-text: hsl(248deg, 19%, 40%);
+    --palette-rose-pine-love: hsl(343deg, 35%, 55%);
+    --palette-rose-pine-gold: hsl(35deg, 81%, 56%);
+    --palette-rose-pine-rose: hsl(3deg, 53%, 67%);
+    --palette-rose-pine-pine: hsl(197deg, 53%, 34%);
+    --palette-rose-pine-foam: hsl(189deg, 30%, 48%);
+    --palette-rose-pine-iris: hsl(268deg, 21%, 57%);
+    --palette-rose-pine-highlight-low: hsl(25deg, 35%, 93%);
+    --palette-rose-pine-highlight-med: hsl(10deg, 9%, 86%);
+    --palette-rose-pine-highlight-high: hsl(315deg, 4%, 80%);
+}

www/css/themes/palettes/rose-pine-moon.css

@@ -0,0 +1,17 @@
+:root {
+    --palette-rose-pine-base: hsl(246deg, 24%, 17%);
+    --palette-rose-pine-surface: hsl(248deg, 24%, 20%);
+    --palette-rose-pine-overlay: hsl(248deg, 21%, 26%);
+    --palette-rose-pine-muted: hsl(249deg, 12%, 47%);
+    --palette-rose-pine-subtle: hsl(248deg, 15%, 61%);
+    --palette-rose-pine-text: hsl(245deg, 50%, 91%);
+    --palette-rose-pine-love: hsl(343deg, 76%, 68%);
+    --palette-rose-pine-gold: hsl(35deg, 88%, 72%);
+    --palette-rose-pine-rose: hsl(2deg, 66%, 75%);
+    --palette-rose-pine-pine: hsl(197deg, 48%, 47%);
+    --palette-rose-pine-foam: hsl(189deg, 43%, 73%);
+    --palette-rose-pine-iris: hsl(267deg, 57%, 78%);
+    --palette-rose-pine-highlight-low: hsl(245deg, 22%, 20%);
+    --palette-rose-pine-highlight-med: hsl(247deg, 16%, 30%);
+    --palette-rose-pine-highlight-high: hsl(249deg, 15%, 38%);
+}

www/css/themes/palettes/rose-pine.css

@@ -0,0 +1,17 @@
+:root {
+    --palette-rose-pine-base: hsl(249deg, 22%, 12%);
+    --palette-rose-pine-surface: hsl(247deg, 23%, 15%);
+    --palette-rose-pine-overlay: hsl(248deg, 25%, 18%);
+    --palette-rose-pine-muted: hsl(249deg, 12%, 47%);
+    --palette-rose-pine-subtle: hsl(248deg, 15%, 61%);
+    --palette-rose-pine-text: hsl(245deg, 50%, 91%);
+    --palette-rose-pine-love: hsl(343deg, 76%, 68%);
+    --palette-rose-pine-gold: hsl(35deg, 88%, 72%);
+    --palette-rose-pine-rose: hsl(2deg, 55%, 83%);
+    --palette-rose-pine-pine: hsl(197deg, 49%, 38%);
+    --palette-rose-pine-foam: hsl(189deg, 43%, 73%);
+    --palette-rose-pine-iris: hsl(267deg, 57%, 78%);
+    --palette-rose-pine-highlight-low: hsl(244deg, 18%, 15%);
+    --palette-rose-pine-highlight-med: hsl(249deg, 15%, 28%);
+    --palette-rose-pine-highlight-high: hsl(248deg, 13%, 36%);
+}

www/css/themes/themes/rose-pine-dawn.css

@@ -0,0 +1,6 @@
+@import url('../palettes/rose-pine-dawn.css');
+@import url('../maps/rose-pine.css');
+
+:root {
+  --theme-name: "Rosé Pine Dawn";
+}

www/css/themes/themes/rose-pine-moon.css

@@ -0,0 +1,6 @@
+@import url('../palettes/rose-pine.css');
+@import url('../maps/rose-pine.css');
+
+:root {
+  --theme-name: "Rosé Pine Moon";
+}

www/css/themes/themes/rose-pine.css

@@ -0,0 +1,6 @@
+@import url('../palettes/rose-pine.css');
+@import url('../maps/rose-pine.css');
+
+:root {
+  --theme-name: "Rosé Pine";
+}

www/index.html

@@ -4,14 +4,17 @@
   <head>
     <meta charset="utf-8" />
     <title>have you tried crying more?</title>
-     <!-- <script -->
-      <!-- src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js" -->
-      <!-- integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ==" -->
-      <!-- crossorigin="anonymous" -->
-      <!-- defer></script> -->
+
     <script src="js/main.js" type="module"></script>
-    <link rel="stylesheet" href="css/shader-style.css">
-    <link rel="stylesheet" href="css/typing.css">
+
+    <!-- Theming -->
+    <link type="text/css" rel="stylesheet" href="css/themes/core.css" media="all">
+    <link type="text/css" rel="stylesheet" href="css/themes/themes/rose-pine.css" media="all" id="theme_css">
+
+    <!-- Styling -->
+    <link type="text/css" rel="stylesheet" href="css/style.css">    
+    <link type="text/css" rel="stylesheet" href="css/shader-style.css">
+    <link type="text/css" rel="stylesheet" href="css/typing.css">
   </head>
 
   <body>