From 175bd97c24af32f7902930628897b0c663942b8d Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Sat, 16 Dec 2023 12:13:14 +0100
Subject: [PATCH] more theming in documentation panes

---
 index.html                      |  8 +++----
 src/DomElements.ts              | 16 ++++++-------
 src/documentation/more/bonus.ts | 18 +++++++++++++++
 src/style.css                   | 40 +++++++++++++++++++++++++++++++++
 4 files changed, 70 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index 43a4102..19730fe 100644
--- a/index.html
+++ b/index.html
@@ -95,7 +95,7 @@
       <div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center bg-background">
         <a class="flex title-font font-medium items-center mb-0">
           <img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-selection_foreground p-2 rounded-full bg-foreground" alt="Topos Frog Logo"/>
-         <input id="universe-viewer" class="hidden transparent xl:block ml-4 text-2xl bg-background text-blue placeholder-blue" id="renamer" type="text" placeholder="Topos">
+         <input id="universe-viewer" class="hidden transparent xl:block ml-4 text-2xl bg-background text-brightwhite placeholder-brightwhite" id="renamer" type="text" placeholder="Topos">
         </a>
         <nav class="py-2 flex flex-wrap items-center text-base absolute right-0">
          <!-- Play Button -->
@@ -362,15 +362,15 @@
             <div class="rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
               <p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">File Management</p>
               <div class="flex flex-col space-y-2 pb-2">
-                <button id="download-universes" class="bg-blue font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
+                <button id="download-universes" class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
                   <svg class="fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
                   <span class="text-selection_foreground">Download universes</span>
                 </button>
-                <button id="upload-universes" class="bg-blue font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
+                <button id="upload-universes" class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
                   <svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
                   <span class="text-selection_foreground">Upload universes</span>
                 </button>
-                <button id="destroy-universes" class="bg-blue font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
+                <button id="destroy-universes" class="bg-brightwhite font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                   </svg>
diff --git a/src/DomElements.ts b/src/DomElements.ts
index 46e43da..2784767 100644
--- a/src/DomElements.ts
+++ b/src/DomElements.ts
@@ -79,23 +79,23 @@ export const createDocumentationStyle = (app: Editor) => {
     li: "list-disc lg:text-2xl text-base text-white lg:mx-4 mx-2 my-4 my-2 leading-normal",
     p: "lg:text-2xl text-base text-white lg:mx-6 mx-2 my-4 leading-normal",
     warning:
-      "animate-pulse lg:text-2xl font-bold text-rose-600 lg:mx-6 mx-2 my-4 leading-normal",
-    a: "lg:text-2xl text-base text-orange-300",
+      "animate-pulse lg:text-2xl font-bold text-brightred lg:mx-6 mx-2 my-4 leading-normal",
+    a: "lg:text-2xl text-base text-white",
     code: `lg:my-4 sm:my-1 text-base lg:text-xl block whitespace-pre overflow-x-hidden`,
     icode:
-      "lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600",
-    ic: "lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600",
-    blockquote: "text-neutral-200 border-l-4 border-neutral-500 pl-4 my-4 mx-4",
+      "lg:my-1 my-1 lg:text-xl sm:text-xs text-brightwhite font-mono bg-brightblack",
+    ic: "lg:my-1 my-1 lg:text-xl sm:text-xs text-brightwhite font-mono bg-brightblack",
+    blockquote: "text-brightwhite border-l-4 border-white pl-4 my-4 mx-4",
     details:
-      "lg:mx-20 py-2 px-6 lg:text-2xl text-white border-l-8 box-border bg-neutral-900",
+      "lg:mx-20 py-2 px-6 lg:text-2xl text-white border-l-8 box-border bg-selection_foreground",
     summary: "font-semibold text-xl",
     table:
       "justify-center lg:my-12 my-2 lg:mx-12 mx-2 lg:text-2xl text-base w-full text-left text-white border-collapse",
     thead:
-      "text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400",
+      "text-xs text-gray-700 uppercase",
     th: "",
     td: "",
     tr: "",
-    box: "border bg-red-500",
+    box: "border bg-red",
   };
 };
diff --git a/src/documentation/more/bonus.ts b/src/documentation/more/bonus.ts
index a262288..f78a709 100644
--- a/src/documentation/more/bonus.ts
+++ b/src/documentation/more/bonus.ts
@@ -9,6 +9,24 @@ export const bonus = (application: Editor): string => {
 
 Some features have been included as a bonus. These features are often about patterning over things that are not directly related to sound: pictures, video, etc.
 
+## Editor theme configuration
+
+The editor theme can be changed using the <ic>theme</ic> and <ic>randomTheme</ic> functions. The following example will use a random color scheme for every beat:
+
+${makeExample(
+  "Random theme on each beat",
+  `
+beat(1)::randomTheme()
+`, true)}
+
+You can also pick a theme using the <ic>theme</ic> function with a string as only argument:
+
+${makeExample(
+  "Picking a theme",
+  `
+beat(1)::theme("Batman")
+`, true)}
+
 ## Hydra Visual Live Coding
 
 <div class="mx-12 bg-neutral-600 rounded-lg flex flex-col items-center justify-center">
diff --git a/src/style.css b/src/style.css
index dfdf09d..4cedb23 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1382,6 +1382,16 @@ video {
   border-color: rgb(var(--selection_background) / 0.95);
 }
 
+.border-brightwhite {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--brightwhite) / var(--tw-border-opacity));
+}
+
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--white) / var(--tw-border-opacity));
+}
+
 .bg-background {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--background) / var(--tw-bg-opacity));
@@ -1657,6 +1667,21 @@ video {
   background-color: rgb(var(--selection_foreground) / var(--tw-bg-opacity));
 }
 
+.bg-brightwhite {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--brightwhite) / var(--tw-bg-opacity));
+}
+
+.bg-red {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--red) / var(--tw-bg-opacity));
+}
+
+.bg-brightblack {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--brightblack) / var(--tw-bg-opacity));
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -2172,6 +2197,11 @@ video {
   color: rgb(var(--white) / var(--tw-text-opacity));
 }
 
+.text-brightred {
+  --tw-text-opacity: 1;
+  color: rgb(var(--brightred) / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -2194,6 +2224,16 @@ video {
   color: rgb(var(--blue) / var(--tw-placeholder-opacity));
 }
 
+.placeholder-brightwhite::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(var(--brightwhite) / var(--tw-placeholder-opacity));
+}
+
+.placeholder-brightwhite::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(var(--brightwhite) / var(--tw-placeholder-opacity));
+}
+
 .opacity-50 {
   opacity: 0.5;
 }