css variables with light and dark variants

src/Text.js

@@ -85,7 +85,7 @@ export function extractMentions(fragments, tags, users) {
                             }
                         }
                     }
-                    return <b style={{ color: "red" }}>{matchTag[0]}?</b>;
+                    return <b style={{ color: "var(--error)" }}>{matchTag[0]}?</b>;
                 } else {
                     return match;
                 }

src/element/Copy.css

@@ -1,14 +1,15 @@
 .copy {
     user-select: none;
     cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
 }
 
 .copy .body {
     font-family: monospace;
     font-size: 14px;
-    margin: 0;
-    width: 18em;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
+    background: var(--gray-secondary);
+    color: var(--font-color);
+    padding: 2px 4px;
+    border-radius: 10px;
+    margin: 0 4px 0 0;
+}

src/element/Copy.js

@@ -3,19 +3,21 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCopy, faCheck } from "@fortawesome/free-solid-svg-icons";
 import { useCopy } from "../useCopy";
 
-export default function Copy(props) {
-
+export default function Copy({ text, maxSize = 32 }) {
     const { copy, copied, error } = useCopy();
+    const sliceLength = maxSize / 2
+    const trimmed = text.length > maxSize ? `${text.slice(0, sliceLength)}:${text.slice(-sliceLength)}` : text
+
     return (
-        <div className="flex flex-row copy" onClick={() => copy(props.text)}>
+        <div className="flex flex-row copy" onClick={() => copy(text)}>
+            <span className="body">
+                {trimmed}
+            </span>
             <FontAwesomeIcon
                 icon={copied ? faCheck : faCopy}
                 size="xs"
-                style={{ color: copied ? 'green' : 'currentColor', marginRight: '2px' }}
+                style={{ color: copied ? 'var(--success)' : 'currentColor', marginRight: '2px' }}
             />
-            <p className="body">
-                {props.text}
-            </p>
         </div>
     )
-}
+}

src/element/Invoice.css

@@ -1,6 +1,7 @@
 .note-invoice {
+    background: var(--bg-color);
     border-radius: 10px;
-    border: 1px solid #444;
+    border: 1px solid var(--gray-tertiary);
     padding: 10px;
 }
 
@@ -9,5 +10,5 @@
 }
 
 .note-invoice small {
-    color: #666;
-}
+    color: var(--gray-medium);
+}

src/element/LNURLTip.css

@@ -1,5 +1,5 @@
 .lnurl-tip {
-    background-color: #222;
+    background-color: var(--gray-secondary);
     padding: 10px;
     border-radius: 10px;
     width: 500px;
@@ -12,7 +12,7 @@
 }
 
 .lnurl-tip .btn:hover {
-    background-color: #333;
+    background-color: var(--gray);
 }
 
 .lnurl-tip .invoice {
@@ -39,4 +39,4 @@
     .lnurl-tip .invoice .actions {
         text-align: center;
     }
-}
+}

src/element/Modal.css

@@ -4,8 +4,8 @@
     position: fixed;
     top: 0;
     left: 0;
-    background-color: rgba(0,0,0, 0.8);
+    background-color: var(--modal-bg-color);
     display: flex;
     justify-content: center;
     align-items: center;
-}
+}

src/element/Note.css

@@ -1,10 +1,15 @@
 .note {
     margin-bottom: 10px;
-    border-bottom: 1px solid #333;
+    border-bottom: 1px solid var(--gray);
+}
+
+.note.thread {
+    border-bottom: none;
 }
 
 .note.active {
-    background-color: #222;
+    background-color: var(--gray-secondary);
+    border-left: 3px solid var(--highlight);
 }
 
 .note > .header > .pfp {
@@ -13,13 +18,13 @@
 
 .note > .header .reply {
     font-size: small;
-    color: #999;
+    color: var(--gray-light);
 }
 
 .note > .header > .info {
     font-size: small;
     white-space: nowrap;
-    color: #999;
+    color: var(--gray-light);
 }
 
 .note > .body {
@@ -48,6 +53,14 @@
 }
 
 .indented {
-    border-left: 3px solid #444;
+    border-left: 3px solid var(--gray-tertiary);
     padding-left: 2px;
-}
+}
+.indented .note {
+    border-bottom: none;
+    padding: 0 4px;
+}
+
+.note .body a {
+    color: var(--highlight);
+}

src/element/Note.js

@@ -12,12 +12,9 @@ import NoteTime from "./NoteTime";
 
 export default function Note(props) {
     const navigate = useNavigate();
-    const data = props.data;
     const opt = props.options;
     const dataEvent = props["data-ev"];
-    const reactions = props.reactions;
-    const deletion = props.deletion;
-    const hightlight = props.hightlight;
+    const { data, isThread, reactions, deletion, hightlight } = props
 
     const users = useSelector(s => s.users?.users);
     const ev = dataEvent ?? Event.FromObject(data);
@@ -81,7 +78,7 @@ export default function Note(props) {
     }
 
     return (
-        <div className={`note ${hightlight ? "active" : ""}`}>
+        <div className={`note ${hightlight && "active"} ${isThread && "thread"}`}>
             {options.showHeader ?
                 <div className="header flex">
                     <ProfileImage pubkey={ev.RootPubKey} subHeader={replyTag()} />

src/element/NoteCreator.css

@@ -1,6 +1,6 @@
 .note-creator {
     margin-bottom: 10px;
-    background-color: #333;
+    background-color: var(--gray);
     border-radius: 10px;
     overflow: hidden;
 }

src/element/NoteReaction.css

@@ -4,7 +4,7 @@
 
 .reaction > .note {
     margin: 5px;
-    border: 1px solid #333;
+    border: 1px solid var(--gray);
     border-radius: 10px;
     padding: 5px;
 }
@@ -20,4 +20,4 @@
 .reaction > .header > .info {
     color: #999;
     font-size: small;
-}
+}

src/element/Relay.css

@@ -1,10 +1,10 @@
 .relay {
     margin-bottom: 10px;
-    background-color: #222;
+    background-color: var(--gray-secondary);
     border-radius: 5px;
     text-align: start;
 }
 
 .relay > div {
     padding: 5px;
-}
+}

src/element/Relay.js

@@ -24,7 +24,7 @@ export default function Relay(props) {
         <>
             <div className="flex relay w-max">
                 <div>
-                    <FontAwesomeIcon icon={faPlug} color={state?.connected ? "green" : "red"} />
+                    <FontAwesomeIcon icon={faPlug} color={state?.connected ? "var(--success)" : "var(--error)"} />
                 </div>
                 <div className="f-grow f-col">
                     <b>{name}</b>
@@ -47,4 +47,4 @@ export default function Relay(props) {
             </div>
         </>
     )
-}
+}

src/element/Thread.js

@@ -47,7 +47,7 @@ export default function Thread(props) {
 
     function renderRoot() {
         if (root) {
-            return <Note data-ev={root} reactions={reactions(root.Id)} deletion={reactions(root.Id, EventKind.Deletion)} />
+            return <Note data-ev={root} reactions={reactions(root.Id)} deletion={reactions(root.Id, EventKind.Deletion)} isThread />
         } else {
             return <NoteGhost>
                 Loading thread root.. ({notes.length} notes loaded)

src/index.css

@@ -1,12 +1,38 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
 
+:root {
+    --font-color: #fff;
+    --bg-color: #000;
+    --modal-bg-color: rgba(0,0,0, 0.8);
+    --gray-superlight: #eee;
+    --gray-light: #999;
+    --gray-medium: #666;
+    --gray: #333;
+    --gray-secondary: #222;
+    --gray-tertiary: #444;
+    --highlight: #bada55;
+    --error: red;
+    --success: green;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+     --font-color: #000;
+     --bg-color: #fff;
+     --highlight: #ff9900;
+     --gray: #ccc;
+     --gray-secondary: #ddd;
+     --gray-tertiary: #eee;
+  }
+}
+
 body {
   margin: 0;
   font-family: 'Montserrat', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #000;
-  color: #fff;
+  background-color: var(--bg-color);
+  color: var(--font-color);
 }
 
 code {
@@ -42,19 +68,20 @@ code {
   border-radius: 5px;
   cursor: pointer;
   user-select: none;
-  background-color: #000;
+  background-color: var(--bg-color);
   border: 1px solid;
   display: inline-block;
 }
 
 .btn.active {
   border: 2px solid;
-  background-color: #222;
+  background-color: var(--gray-secondary);
+  color:  var(--font-color);
   font-weight: bold;
 }
 
 .btn:hover {
-  background-color: #333;
+  background-color: var(--gray);
 }
 
 .btn-sm {
@@ -73,8 +100,12 @@ input[type="text"], input[type="password"], input[type="number"], textarea {
   padding: 10px;
   border-radius: 5px;
   border: 0;
-  background-color: #333;
-  color: #eee;
+  background-color: var(--gray);
+  color: var(--font-color);
+}
+
+textarea:placeholder {
+  color: var(--gray-superlight);
 }
 
 .flex {
@@ -122,7 +153,7 @@ a {
 
 span.pill {
   display: inline-block;
-  background-color: #333;
+  background-color: var(--gray);
   padding: 2px 10px;
   border-radius: 10px;
   user-select: none;
@@ -130,7 +161,8 @@ span.pill {
 }
 
 span.pill.active {
-  background-color: #444;
+  background-color: var(--gray-tertiary);
+  color:  var(--font-color);
   font-weight: bold;
 }
 
@@ -186,7 +218,7 @@ div.form-group > div:nth-child(2) input {
 .modal .modal-content > div {
   padding: 10px;
   border-radius: 10px;
-  background-color: #333;
+  background-color: var(--gray);
   margin-top: 5vh;
 }
 
@@ -225,10 +257,9 @@ body.scroll-lock {
 }
 
 .tabs > div.active {
-  background-color: #222;
   font-weight: bold;
 }
 
 .error {
-  color: red;
-}
+  color: var(--error);
+}

src/pages/ProfilePage.css

@@ -19,7 +19,7 @@
 }
 
 .profile .avatar-wrapper {
-  margin: 10px;
+    margin: auto 10px;
 }
 
 .profile .avatar {
@@ -32,10 +32,12 @@
 .profile .details {
     margin-top: auto;
     margin-bottom: auto;
+    overflow: hidden;
 }
 
 .profile .website {
     margin-bottom: 10px;
+    color: var(--highlight);
 }
 
 .profile .website::before {
@@ -53,3 +55,10 @@
         width: 100%;
     }
 }
+
+@media(max-width: 420px) {
+      .profile .name { flex-direction: column; }
+      .profile .name .btn {
+          margin-top: 5px;
+      }
+}

src/pages/ProfilePage.js

@@ -78,4 +78,4 @@ export default function ProfilePage() {
             <Timeline pubkeys={id} />
         </>
     )
-}
+}

src/pages/Root.css

@@ -1,5 +1,5 @@
 .root-tabs > div {
   padding: 5px 0;
-  background-color: #333;
+  background-color: var(--gray);
   border-radius: 10px;
 }

src/pages/SettingsPage.css

@@ -1,4 +1,3 @@
-
 .settings .avatar {
     width: 256px;
     height: 256px;
@@ -15,7 +14,7 @@
     width: 100%;
     height: 100%;
     opacity: 0;
-    background-color: black;
+    background-color: var(--bg-color);
 }
 
 .settings .avatar .edit:hover {