more dark mode changes

public/styles.css

@@ -1464,6 +1464,8 @@ video {
   --background: #f8f6f3;
   --primary: #33e;
   --primary-rgb: 51, 51, 238;
+  --primary-dark: #1E7898;
+  --primary-dark-grey: #2e3235;
   --text: #000;
   --text-rgb: 0, 0, 0;
   --background: #fff;

src/components/CloudFilesModal.tsx

@@ -25,17 +25,28 @@ export default function() {
     loadCodeFromString(file.content);
     closeModal();
   }
+  const { theme } = getStore()
+  let css = "bg-[var(--primary)]"
+  let css2 = "bg-gray-100"
+  let css3 = ""
+  let css4 = "bg-white"
+  if(theme == "dark"){
+    css = "bg-dark-mode-blue"
+    css2 = "bg-dark-mode-grey text-white"
+    css3 = "bg-dark-mode-grey text-white"
+    css4 = "bg-black"
+  }
 
   return <>
-    <div class="absolute top-20 z-[9999999] left-[50%] overflow-hidden translate-x-[-50%] border-black w-[40rem] shadow-lg rounded-md bg-white">
-      <div class="bg-[var(--primary)] p-3 text-white overflow">
+    <div class={"absolute top-20 z-[9999999] left-[50%] overflow-hidden translate-x-[-50%] border-black w-[40rem] shadow-lg rounded-md \n" + css4}>
+      <div class={" p-3 text-white overflow \n"+ css}>
         <div class="flex justify-between">
           Open a file from the cloud
           <span class="cursor-pointer hover:text-red-500" onClick={closeModal}>x</span>
         </div>
       </div>
 
-      <div class="width-[90%] border-2 border-stone-400 h-[20rem] bg-gray-100 rounded mx-4 mt-4 overflow-auto">
+      <div class={"width-[90%] border-2 border-stone-400 h-[20rem] rounded mx-4 mt-4 overflow-auto \n" + css2}>
         {sortFilesByTime(files).map((file, i) => <>
           <div class={`${i%2 === 1 && selectedFile !== i ? "bg-gray-200" : ""} ${selectedFile === i ? "bg-[var(--primary)] text-white" : ""} px-2 py-1` + " " + `flex flex-row justify-between`} onClick={e => selectFile(i)}>
             <div>{file.name ? file.name : "anon"}</div>
@@ -46,7 +57,7 @@ export default function() {
         </>)}
       </div>
 
-      <pre class="width-[90%] border-2 border-stone-400 h-[8rem] bg-gray-100 rounded mx-4 mt-4 p-1 overflow-auto font-mono">
+      <pre class={"width-[90%] border-2 border-stone-400 h-[8rem] rounded mx-4 mt-4 p-1 overflow-auto font-mono \n"+css2}>
         {files[selectedFile] ? files[selectedFile].content : ""}
       </pre>
 

src/components/Help.module.css

@@ -4,7 +4,7 @@
   font-family: var(--font-sans);
 }
 body[data-theme='dark'] .helpSectionTab{
-  background-color:rgb(30, 120, 152);
+  background-color:var(--primary-dark);
 }
 body[data-theme='dark'] .helpSectionTab:hover {
   background:rgba(15, 57, 77, 0.89);
@@ -114,26 +114,26 @@ body[data-theme='dark'] .h1, .h2, .h3 {
 
 
 body[data-theme='dark'] .helpContent {
-  background-color: rgb(32, 32, 32);
+  background-color: var(--primary-dark-grey);
   color: white;
 }
 
 body[data-theme='dark'] .helpContent a {
   color: white;
 }
 body[data-theme='dark'] .helpContent pre {
-  background-color: rgba(46,50,53,255);
+  background-color: rgba(32,32,32,255);
 }
 
 body[data-theme='dark'] .helpContent hr {
-  background-color: rgba(255, 255, 255, 0.25);
+  background-color: rgba(32, 32, 32, 0.25);
 }
 
 body[data-theme='dark'] .helpContent img {
   background-color: white;
 }
 body[data-theme='dark'] .helpContent code {
-  background: rgba(46,50,53,255);
+  background: rgba(32,32,32,255);
 }
 
 

src/components/LoginModal.tsx

@@ -110,10 +110,19 @@ export default function LoginModal() {
     //   patchStore({ loginModalOpen: false });
     // }
   };
+  const { theme } = getStore()
+  let css = "bg-[var(--primary)]"
+  let css2 = ""
+  let css3 = ""
+  if(theme == "dark"){
+    css = "bg-dark-mode-blue"
+    css2 = "bg-dark-mode-grey"
+    css3 = "text-white"
+  }
 
   return (
     <div class={`absolute top-20 z-[9999999] left-[50%] overflow-hidden translate-x-[-50%] border-black w-96 shadow-lg rounded-md bg-white`}>
-      <div class="bg-[var(--primary)] p-3 text-white overflow">
+      <div class={"p-3 text-white overflow \n " + css}>
         <div class="flex justify-between">
           <span>{state.headerText}</span>
           <span class="cursor-pointer hover:text-red-500" onClick={() => { reset(); patchStore({ loginModalOpen: false }); }}>x</span>
@@ -136,8 +145,8 @@ export default function LoginModal() {
         }
       </div>
       { !state.loggedIn &&
-        <div class="w-full flex p-2 items-center justify-center flex-col">
-          <input value={state.inputValue} onKeyDown={handleKeyPress} onInput={(e) => updateState({ isError: false, msg: "", inputValue: e.target.value })} class="p-1 w-[70%] border"/>
+        <div class={"w-full flex p-2 items-center justify-center flex-col \n " + css2}>
+          <input value={state.inputValue} onKeyDown={handleKeyPress} onInput={(e) => updateState({ isError: false, msg: "", inputValue: e.target.value })} class={"p-1 w-[70%] border \n" + css2 +"\n"+css3}/>
           <button onClick={handleSendOrSubmitCode} class="m-3 p-2 w-[50%] text-center cursor-pointer bg-gray-700 hover:bg-gray-500 text-white rounded">
             {state.codeSent ? "submit code" : "send code"}
           </button>

src/components/SaveToCloudModal.tsx

@@ -56,16 +56,27 @@ export default function() {
     patchStore({ needsSaving: false, files: json.files, cloudFileId: res.id });
     closeModal();
   }
+  const { theme } = getStore()
+  let css = "bg-[var(--primary)]"
+  let css2 = "bg-gray-100"
+  let css3 = ""
+  let css4 = "bg-white"
+  if(theme == "dark"){
+    css = "bg-dark-mode-blue"
+    css2 = "bg-dark-mode-grey text-white"
+    css3 = "bg-dark-mode-grey text-white"
+    css4 = "bg-black"
+  }
 
   return (
-    <div class="absolute top-20 z-[9999999] left-[50%] overflow-hidden translate-x-[-50%] border-black w-[40rem] shadow-lg rounded-md bg-white">
-      <div class="bg-[var(--primary)] p-3 text-white overflow">
+    <div class={"absolute top-20 z-[9999999] left-[50%] overflow-hidden translate-x-[-50%] border-black w-[40rem] shadow-lg rounded-md \n " + css4}>
+      <div class= {"p-3 text-white overflow \n" + css}>
         <div class="flex justify-between">
           Save new file or overwrite existing file
           <span class="cursor-pointer hover:text-red-500" onClick={closeModal}>x</span>
         </div>
       </div>
-      <div class="width-[80%] border-2 border-stone-400 h-[20rem] bg-gray-100 rounded mx-4 mt-4 overflow-auto">
+      <div class={"width-[80%] border-2 border-stone-400 h-[20rem] rounded mx-4 mt-4 overflow-auto \n" + css2}>
         {sortFilesByTime(files).map((file, i) => <>
           <div class={`${i%2 === 1 && selectedFile !== i ? "bg-gray-200" : ""} ${selectedFile === i ? "bg-[var(--primary)] text-white" : ""} px-2 py-1` + " " + `flex flex-row justify-between`} onClick={e => selectFile(i)}>
             <div>{file.name ? file.name : "anon"}</div>
@@ -76,12 +87,12 @@ export default function() {
         </>)}
       </div>
 
-      <pre class="width-[90%] border-2 border-stone-400 h-[8rem] bg-gray-100 rounded mx-4 mt-4 p-1 overflow-auto font-mono">
+      <pre class= {"width-[90%] border-2 border-stone-400 h-[8rem] rounded mx-4 mt-4 p-1 overflow-auto font-mono \n" + css2}>
         {files[selectedFile] ? files[selectedFile].content : ""}
       </pre>
 
       <div class={`w-full flex p-2 items-center justify-between flex-row`}>
-        <input id="file-name" class="m-2 p-2 w-[60%] border-2 border-stone-400 rounded" disabled={selectedFile >= 0} placeholder={selectedFile < 0 ? "write file name here" : files[selectedFile].name} />
+        <input id="file-name" class={"m-2 p-2 w-[60%] border-2 border-stone-400 rounded \n" + css3} disabled={selectedFile >= 0} placeholder={selectedFile < 0 ? "write file name here" : files[selectedFile].name} />
         <button class="m-3 p-2 w-40 text-center cursor-pointer bg-gray-700 hover:bg-gray-500 text-white rounded" onClick={onSave}>
           {selectedFile < 0 ? "save new file" : "overwrite file"}
         </button>

src/components/Toolbar.module.css

@@ -4,11 +4,11 @@
   margin-right: 0.5rem;
 }
 body[data-theme='dark'] .root{
-  background-color:#1E7898
+  background-color:var(--primary-dark)
 }
 
 body[data-theme = 'dark'] .dropdownClasses{
-  background-color:#1E7898
+  background-color:var(--primary-dark)
 }
 .heading a {
   color: inherit;

src/createShareLink.js

@@ -2,8 +2,11 @@ import { patchStore, getStore } from "./state.ts";
 import { post } from "./post.js";
 
 export async function createShareLink(content) {
-  const { loginName, sessionKey } = getStore();
-
+  const { loginName, sessionKey ,theme} = getStore();
+  let text = 'color:blue;'
+  if(theme=="dark"){
+    text = ' color:#1E7898;'
+  }
   if (loginName === "") {
     alert("Log in to create share links.");
     return;
@@ -18,10 +21,11 @@ export async function createShareLink(content) {
   const link = `${window.location.href}?shareId=${res.id}`;
 
   customAlert(`
+  
     <div>Share the file at:</div>
     <br/>
     <div style="font-size: .75rem;">
-      <a href="${link}" target="_blank" style="color: blue;">${link}</a>
+      <a href=${link} target="_blank" style=${text}>${link}</a>
     </div>
     <br/>
     <div>Share links last for 1 week.</div>
@@ -31,7 +35,11 @@ export async function createShareLink(content) {
 }
 
 function customAlert(html) {
-
+  const {theme} = getStore()
+  let bg = 'background: #f4f4f4;'
+  if(theme=="dark"){
+    bg = 'background: var(--primary-dark-grey); color: white'
+  }
   const el = document.createElement("div");
   const style = `
     z-index: 999999999999;
@@ -41,11 +49,12 @@ function customAlert(html) {
     left: 50%;
     top: 100px;
     transform: translate(-50%, 0%);
-    background: #f4f4f4;
+   
     border-radius: 10px;
     border: 1px solid black;
     padding: 8px;
-  `
+    \n
+  `+bg
 
   el.innerHTML = `
     <div style="${style}">

src/ui/editor-theme.css

@@ -3,6 +3,7 @@
 :root {
   --primary: #33e;
   --primary-rgb: 51, 51, 238;
+  --primary-dark: #1E7898;
   --text: #000;
   --text-rgb: 0, 0, 0;
   --background: #fff;

styles.css

@@ -8,6 +8,8 @@
   --background: #f8f6f3;
   --primary: #33e;
   --primary-rgb: 51, 51, 238;
+  --primary-dark: #1E7898;
+  --primary-dark-grey: #2e3235;
   --text: #000;
   --text-rgb: 0, 0, 0;
   --background: #fff;

tailwind.config.js

@@ -5,6 +5,7 @@ export default {
     extend: {
       colors: {
         'dark-mode-blue': '#1E7898',
+        'dark-mode-grey' : '#2e3235'
       },
     },
   },