Added "pretty odd" theme

Author: ashprids

index.html

@@ -23,7 +23,7 @@ <h1><a href="/">fridge</a></h1>
     <a href="/music">music</a>
 </center>
 <br><br>
-<a href="/resources/cover.png"><img id="avatar"></a><br>
+<a href="/resources/cover.png"><img src=id="avatar"></a><br>
 <span id="downloadtext"><a href="https://discord.gg/dwKgXhbVY4"><i class="fab fa-discord"></i></a></span>
 </div>
 </body>

theme.js

@@ -38,6 +38,7 @@ document.addEventListener('DOMContentLoaded', function() {
     { id: 'dracula', title: 'Dracula', icon: 'fa-ghost', file: 'dracula.css' },
     { id: 'partyattack', title: 'Disco Panic', icon: 'fa-star', file: 'discopanic.css' },
     { id: 'kumo', title: 'Kumo', icon: 'fa-cloud', file: 'kumo.css' },
+    { id: 'prettyodd', title: 'Pretty Odd', icon: 'fa-fan', file: 'prettyodd.css' },
   ];
 
   // glow colors per theme for hover effect
@@ -49,7 +50,8 @@ document.addEventListener('DOMContentLoaded', function() {
     gruvbox: '#d4a373',
     catppuccin: '#b4befe',
     partyattack: '#7a2424ff',
-    kumo: '#923878ff'
+    kumo: '#923878ff',
+    prettyodd: '#977D63ff',
   };
 
   // create / locate appended style element

themes/prettyodd.css

@@ -0,0 +1,148 @@
+/* === Pretty Odd — standalone theme (append to end of style.css) === */
+:root{
+  /* Core */
+  --dr-bg:        #341d26; /* background */
+  --dr-surface:   #532F40; /* slightly lifted surface */
+  --dr-surface2:  #56384C; /* cards */
+  --dr-hover:     #613F53; /* current line / hover */
+  --dr-text:      #987E5F; /* foreground */
+  --dr-subtext:   #A2AE9F; /* softened text */
+  --dr-muted:     #728075; /* comments-ish */
+
+  /* Accents (mapped from album palette) */
+  --dr-cyan:   #728075;
+  --dr-green:  #A2AE9F;
+  --dr-orange: #B58829;
+  --dr-pink:   #C96D54;
+  --dr-purple: #977D63;
+  --dr-red:    #A95C36;
+  --dr-yellow: #AC6D2E;
+
+  /* Site mapping */
+  --bg-page:      var(--dr-bg);
+  --bg-container: var(--dr-surface);
+  --bg-elev:      var(--dr-surface2);
+  --bg-hover:     var(--dr-hover);
+  --fg:           var(--dr-text);
+  --fg-weak:      var(--dr-subtext);
+  --fg-muted:     var(--dr-muted);
+
+  --link:         var(--dr-purple);
+  --link-visited: var(--dr-pink);
+  --link-hover:   var(--dr-orange);
+}
+
+/* base */
+body{
+  background: var(--bg-page);
+  color: var(--fg);
+}
+::selection{
+  background: var(--dr-hover);
+  color: #A2AE9F;
+}
+
+/* links */
+a{ color: var(--link); }
+a:visited{ color: var(--link-visited); }
+a:hover{ color: var(--link-hover); }
+
+/* container shell */
+.container{
+  background: var(--bg-container);
+  color: var(--fg);
+  /*box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 10px 40px rgba(0,0,0,.55);*/
+  border-radius: 12px;
+  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
+}
+
+/* headings: neon sweep */
+h1 a{
+  background-image: linear-gradient(
+    90deg,
+    var(--dr-purple),
+    var(--dr-pink),
+    var(--dr-red),
+    var(--dr-orange),
+    var(--dr-yellow),
+    var(--dr-green),
+    var(--dr-cyan)
+  );
+}
+h4{ color: var(--fg-muted); }
+
+/* rss */
+.rss{ background: var(--bg-elev); color: var(--fg); }
+.rss:hover{ background: var(--bg-hover); }
+
+/* posts/cards */
+.post{
+  background: var(--bg-elev);
+  color: var(--fg);
+  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
+}
+.post:hover{
+  background: color-mix(in oklch, var(--dr-purple) 18%, var(--bg-elev));
+}
+#date{ color: var(--fg-muted); }
+
+/* code */
+code{
+  background: #532F40;
+  color: var(--dr-green);
+  border: 1px solid var(--bg-hover);
+  border-radius: 6px;
+}
+pre code{
+  display:block; padding:.75rem 1rem; overflow:auto;
+}
+
+/* tabs */
+.tab{ background: var(--bg-hover); border-bottom-color: var(--bg-hover); }
+.tab button{ color: var(--fg); }
+.tab button:hover{ background: var(--bg-elev); }
+.tab button.active{ background: var(--bg-container); color: var(--fg); }
+.tabcontent{ background: var(--bg-container); color: var(--fg-weak); }
+
+/* gallery */
+.grid-container{ background: var(--bg-container); }
+.grid-item img{ outline-color: var(--bg-hover); }
+.grid-item img:hover{ outline-color: var(--dr-pink); }
+.grid-item p{ color: var(--fg-weak); }
+#subp{ color: var(--fg-muted); }
+
+/* audio player */
+.audio-player button{ color: var(--fg-weak); }
+.audio-player button:hover{ color: var(--dr-cyan); }
+.audio-player input[type="range"]::-webkit-slider-thumb{ background: var(--fg-weak); }
+
+/* avatar */
+#avatar{ border-color: var(--bg-hover); }
+
+/* contact form */
+.contact-form{ color: var(--fg); }
+.contact-form input,
+.contact-form textarea{
+  background: var(--bg-elev);
+  color: var(--fg);
+  border: 1px solid var(--bg-hover);
+}
+.contact-form button{
+  background: linear-gradient(90deg, var(--dr-purple), var(--dr-pink));
+  color: #502E3D;
+  border: none;
+}
+.contact-form button:hover{
+  background: linear-gradient(90deg, var(--dr-orange), var(--dr-yellow));
+  color: #502E3D;
+}
+
+/* microblog */
+.microblog-post{ background: var(--bg-elev); color: var(--fg); }
+#microblog-date{ color: var(--fg-muted); }
+
+/* confetti / misc */
+.confetti{ color: var(--fg-weak); }
+
+/* ascii fireworks (if present) */
+#fridge-ascii-fireworks{ color: var(--dr-yellow); }