chore: switch to catppuccin theme, update readme

README.md

@@ -12,7 +12,7 @@ Libretrix has a big advantage, as it is built with the most awesome technology a
 - pnpm
 - SvelteKit
 - UnoCSS
-- Tauri (soon<sup>TM</sup>)
+- Tauri
 - Turborepo
 
 ## 📜 Licensing

services/frontend/src/lib/components/message/MessageEvent.svelte

@@ -18,12 +18,12 @@
 <div class="flex flex-row gap-4 w-full px-4 py-2">
   <img
     src={$sender?.avatarUrl ? client.mxcUrlToHttp($sender?.avatarUrl) : undefined} alt="{$sender?.displayName}"
-    class="w-12 h-12 aspect-square rounded-full overflow-hidden flex items-center justify-center bg-gray-600 shrink-0"
+    class="w-12 h-12 aspect-square rounded-full overflow-hidden flex items-center justify-center bg-surface2 shrink-0"
   />
   <div class="flex-col w-full">
     <p class="inline-flex items-center w-full">
       <span class="font-500">{$sender?.displayName}</span>
-      <span class="ml-auto text-gray-600">{ $date(events[0]?.getDate() ?? new Date(), {
+      <span class="ml-auto text-subtext0">{ $date(events[0]?.getDate() ?? new Date(), {
         dateStyle: 'medium',
         timeStyle: 'short'
       }) }</span>

services/frontend/src/lib/components/message/MessageFormatted.svelte

@@ -101,15 +101,15 @@
 }
 
 .formatted-style :global(code) {
-  @apply bg-gray-700 rounded-sm px-0.5 py-0.25 leading-6;
+  @apply bg-surface0 rounded-sm px-0.5 py-0.25 leading-6;
 }
 
 .formatted-style :global(pre) {
   @apply mb-4;
 }
 
 .formatted-style :global(pre) > :global(code) {
-  @apply bg-gray-700 rounded-sm px-4 py-2 max-w-[70ch] block overflow-auto;
+  @apply bg-surface0 rounded-md p-2 max-w-[90ch] block overflow-auto;
 }
 
 .formatted-style :global(blockquote) {

services/frontend/src/lib/components/nav/NavBar.svelte

@@ -8,10 +8,10 @@
   export let extraClass = ''
 </script>
 
-<nav class="p-4 bg-gray-700 flex flex-col gap-2 {extraClass}">
+<nav class="p-4 bg-surface0 flex flex-col gap-2 {extraClass}">
   <nav class="flex flex-col h-full">
     {#each $roomsStore.filter(r => r.getType() === undefined) as room (room.roomId)}
-      <button class="bg-transparent hover:bg-gray-800 px-2 py-0.25 rounded w-full text-left duration-300 transition-colors"
+      <button class="bg-transparent hover:bg-surface1 px-2 py-0.25 rounded w-full text-left duration-300 transition-colors"
         on:click={() => dispatch('routeSwitch', {
           roomId: room.roomId
         })}>
@@ -21,7 +21,7 @@
 
     <button class="
       flex items-center gap-2 mt-auto
-      text-red bg-transparent hover:bg-gray-800 px-2 py-1 rounded w-full text-left transition-colors duration-300
+      text-red bg-transparent hover:bg-surface1 px-2 py-1 rounded w-full text-left transition-colors duration-300
     " on:click={matrixLogout}>
       <span class="inline-block i-bx:log-out"></span>
       <span>Log out</span>

services/frontend/src/routes/+layout.svelte

@@ -7,6 +7,6 @@ import { t } from 'svelte-i18n'
   <meta name="og:description" content="{ $t('seo.description') }"/>
 </svelte:head>
 
-<div class="min-h-screen w-full h-full flex flex-col bg-gray-900 text-gray-100">
+<div class="min-h-screen w-full h-full flex flex-col bg-base text-text">
   <slot />
 </div>

services/frontend/unocss.config.ts

@@ -12,5 +12,20 @@ export default defineConfig({
     'h-screen',
     'sticky',
     'top-0'
-  ]
+  ],
+  theme: {
+    colors: {
+      mauve: '#cba6f7',
+      red: '#f38ba8',
+      text: '#cdd6f4',
+      subtext1: '#bac2de',
+      subtext0: '#a6adc8',
+      surface2: '#585b70',
+      surface1: '#45475a',
+      surface0: '#313244',
+      base: '#1e1e2e',
+      mantle: '#181825',
+      crust: '#11111b'
+    }
+  }
 })