Added new theme: Space Grey

web/www/assets/js/app.js

@@ -374,8 +374,8 @@ async function newPost() {
 async function showPosts() {
   let outerContainer = document.createElement("div");
   outerContainer.className = "posts-container";
-  const result = await getPosts();
-  const posts = result.data;
+  // const result = await getPosts();
+  // const posts = result.data;
   // const date = new Date(); // debug !!!
   // const posts = [ // debug !!!
   //   {

web/www/assets/themes-css/space-grey.css

@@ -0,0 +1,96 @@
+:root {
+    --pitch-black: #373B41;
+    --pitch-darker-black: #1D1F21;
+    --pitch-dark-black: #212121;
+    --pitch-light-black: #8C8C8C;
+    --pitch-lighter-black: #C8CDCA;
+    --pitch-highlight-black: #F1F2F6;
+}
+
+body .body-section,
+.modal-content,
+.text-area,
+#infoHeading,
+.modal-content input,
+.prompt,
+.prompt-content input,
+.prompt-text {
+    background: linear-gradient(0deg, var(--pitch-dark-black) 0%, var(--pitch-black) 100%);
+}
+
+.main .topbar,
+.navigation,
+#appScreen,
+.post-info > div,
+.info-heading {
+    background: linear-gradient(0deg, var(--pitch-dark-black) 0%, var(--pitch-black) 100%);
+}
+
+.button1, 
+#loginBtn,
+button,
+.dropdown-item,
+.navigation.active a .icon,
+.popup {
+    color: var(--pitch-darker-black);
+    background-color: unset;
+    background: linear-gradient(0deg, var(--pitch-black) 0%, var(--pitch-lighter-black) 100%);
+}
+
+button:hover,
+.navigation ul li:hover,
+.dropdown-item:hover {
+    color: var(--pitch-darker-black);
+    background-color: unset;
+    background: linear-gradient(0deg, var(--pitch-light-black) 0%, var(--pitch-lighter-black) 100%);
+}
+
+.post {
+    background: linear-gradient(0deg, var(--pitch-light-black) 0%, var(--pitch-lighter-black) 100%);
+}
+
+.navigation ul li a,
+.toggle .icon,
+.userimg .fa-solid,
+.fa-search::before,
+.prompt-text,
+.prompt-content p,
+label, p,
+.modal-content,
+#infoHeading,
+.modal-content input,
+.drop-btn,
+.modal-content p,
+.info-heading,
+.post p,
+.popup p {
+    color: var(--pitch-highlight-black);
+}
+
+.button1,
+.search label input,
+.search label input::placeholder {
+    color: var(--pitch-dark-black);
+}
+
+
+.search label input,
+.account,
+.navigation ul li:first-child,
+.accounts-view,
+.text-area,
+.drop-btn,
+.post,
+.prompt-content input {
+    border-color: var(--pitch-lighter-black);
+}
+
+.modal-content,
+.post-info > div,
+#appScreen {
+    box-shadow: var(--pitch-darker-black) 7px 7px 20px;
+}
+
+.footer {
+    background-color: var(--pitch-darker-black);
+}

web/www/settings.php

@@ -31,6 +31,11 @@
                 <label for="pearl-white">Pearl White</label>
                 <input type="radio" id="pearl-white" name="theme" value="pearl-white">
             </div>
+            <div class="theme-option">
+                <label for="space-grey">Space Grey</label>
+                <input type="radio" id="space-grey" name="theme" value="space-grey">
+            </div>
+
             <button type="button" id="change-theme-submit">Change Theme</button>
           </div>
       </div>