new Themes and enhanced code

web/src/themes/amber.css

@@ -0,0 +1,380 @@
+/* Custom font */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+  @font-face {
+    font-family: 'Roboto';
+    src: url('./fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'PTSans';
+    src: url('./fonts/PTSans/PTSans-Regular.ttf') format('truetype');
+  }
+}
+
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+.display-none {
+  @apply hidden;
+}
+
+h1 { @apply text-4xl md:text-5xl font-bold text-gray-800 dark:text-gray-200 mb-6; }
+h2 {
+@apply text-3xl font-semibold text-gray-700 dark:text-gray-300 mb-4;
+}
+
+h3 {
+@apply text-2xl font-medium text-gray-600 dark:text-gray-400 mb-3;
+}
+
+h4 {
+@apply text-xl font-medium text-gray-500 dark:text-gray-500 mb-2;
+}
+
+/* Optional: Add a subtle bottom border to headers for added distinction */
+h1, h2{
+@apply border-b border-gray-200 dark:border-gray-700 pb-2;
+}
+
+p {
+  @apply text-base text-gray-600 dark:text-gray-400 break-words;
+}
+
+ul {
+  @apply list-disc ml-0;
+}
+
+li {
+  @apply list-disc ml-5;
+}
+
+ol {
+  @apply list-decimal ml-5;
+}
+
+:root {
+  --color-primary: #d97706;
+  --color-primary-light: #fbbf24;
+  --color-secondary: #b45309;
+  --color-accent: #92400e;
+  --color-light-text-panel: #fef3c7;
+  --color-dark-text-panel: #78350f;
+  --color-bg-light-panel: #fef3c7;
+  --color-bg-light: #fffbeb;
+  --color-bg-light-tone: #fde68a;
+  --color-bg-light-code-block: #fef3c7;
+  --color-bg-light-tone-panel: #fbbf24;
+  --color-bg-light-discussion: #fffbeb;
+  --color-bg-light-discussion-odd: #fef3c7;
+  --color-bg-dark: #292524;
+  --color-bg-dark-tone: #44403c;
+  --color-bg-dark-tone-panel: #57534e;
+  --color-bg-dark-code-block: #78350f;
+  --color-bg-dark-discussion: #44403c;
+  --color-bg-dark-discussion-odd: #292524;
+}
+
+/* For both textarea and input elements */
+textarea, input, select {
+  @apply bg-gray-100 dark:bg-gray-800;
+}
+
+.background-color {
+  @apply bg-gradient-to-br from-amber-50 to-amber-100 dark:from-gray-900 dark:to-gray-800 min-h-screen;
+}
+
+.toolbar-color {
+  @apply  text-gray-800 dark:text-gray-200 bg-gradient-to-r from-amber-100 to-amber-200 dark:from-gray-800 dark:to-gray-700 rounded-full shadow-lg
+}
+
+.panels-color {
+  @apply text-gray-800 dark:text-gray-200 bg-gradient-to-r from-amber-50 to-amber-100 dark:from-gray-800 dark:to-gray-700 rounded shadow-lg;
+}
+
+.unicolor-panels-color {
+  @apply bg-amber-100 dark:bg-gray-800
+}
+
+.chatbox-color {
+  @apply bg-gradient-to-br from-amber-100 to-amber-200 dark:from-gray-800 dark:to-gray-700
+}
+
+/* Base message styling */ 
+.message { @apply relative w-full rounded-lg m-2 shadow-lg border border-gray-200 dark:border-gray-700 flex flex-col flex-grow flex-wrap overflow-visible p-5 pb-3 text-lg; }
+.message:hover {
+@apply border-amber-300 dark:border-amber-700;
+}
+
+/* Light theme */
+.message {
+@apply bg-amber-50 text-gray-800;
+}
+
+/* Dark theme */
+.dark .message {
+@apply bg-gray-800 text-gray-200;
+}
+
+/* Alternating backgrounds for better distinction */
+.message:nth-child(even) {
+@apply bg-amber-100 dark:bg-gray-700;
+}
+
+.message:nth-child(odd) {
+@apply bg-amber-50 dark:bg-gray-800;
+}
+
+/* Additional styling for more professional look */
+.message-header {
+@apply text-xl font-semibold mb-2;
+}
+
+.message-content {
+@apply text-lg leading-relaxed;
+}
+
+/* Body styling */
+body {
+@apply bg-gradient-to-br from-amber-50 to-amber-100 dark:from-gray-900 dark:to-gray-800 min-h-screen text-base;
+}
+
+.discussion{
+  @apply mr-2 bg-gradient-to-r from-amber-200 to-amber-300 dark:from-gray-700 dark:to-gray-600 hover:from-amber-100 hover:to-amber-200 hover:dark:from-gray-600 hover:dark:to-gray-500
+}
+
+.discussion-hilighted{
+  @apply bg-gradient-to-r from-amber-100 to-amber-200 dark:from-gray-700 dark:to-gray-600 hover:from-amber-50 hover:to-amber-100 hover:dark:from-gray-600 hover:dark:to-gray-500
+}
+
+.bg-gradient-welcome {
+  @apply bg-gradient-to-br from-amber-50 to-amber-100 dark:from-gray-900 dark:to-gray-800;
+}
+
+.bg-gradient-progress {
+  @apply bg-gradient-to-r from-amber-100 to-amber-200 dark:from-gray-800 dark:to-gray-700;
+}
+
+.text-gradient-title {
+  @apply text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-amber-500 dark:from-amber-400 dark:to-amber-300;
+}
+
+.text-subtitle {
+  @apply text-gray-600 dark:text-gray-400;
+}
+
+.text-author {
+  @apply text-gray-500 dark:text-gray-500;
+}
+
+.text-loading {
+  @apply text-gray-700 dark:text-gray-300;
+}
+
+.text-progress {
+  @apply text-amber-600 dark:text-amber-400;
+}
+
+.btn-primary {
+  @apply bg-amber-500 hover:bg-amber-600 text-white font-bold py-2 px-4 rounded;
+}
+
+.btn-secondary {
+  @apply bg-amber-300 hover:bg-amber-400 text-gray-800 font-bold py-2 px-4 rounded;
+}
+
+.card {
+  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6;
+}
+
+.input {
+  @apply bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400;
+}
+
+.label {
+  @apply block text-sm font-medium text-gray-600 dark:text-gray-400 mb-1;
+}
+
+.link {
+  @apply text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300;
+}
+
+.navbar-container {
+  @apply  text-gray-800 dark:text-gray-200 bg-gradient-to-r from-amber-100 to-amber-200 dark:from-gray-800 dark:to-gray-700 rounded shadow-lg
+}
+
+.game-menu {
+  @apply flex justify-center items-center relative;
+}
+
+.text-shadow-custom {
+  text-shadow: 1px 1px 0px #fef3c7, -1px -1px 0px #fef3c7, 1px -1px 0px #fef3c7, -1px 1px 0px #fef3c7;
+}
+
+.menu-item {
+  @apply mb-2 px-4 py-2 text-gray-600 dark:text-gray-400 font-bold text-lg transition-all duration-300 ease-in-out;
+  @apply hover:text-amber-600 hover:dark:text-amber-300 hover:transform hover:-translate-y-1;
+}
+
+.menu-item.active-link {
+  @apply rounded-t-md border-amber-500 text-shadow-custom text-amber-700 font-bold text-lg transition-all duration-300 ease-in-out scale-105;
+  @apply hover:text-amber-800 hover:dark:text-amber-200 hover:transform hover:-translate-y-1;
+  /* Glow effect on text */
+  text-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
+}
+
+.menu-item.active-link::before {
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  background: linear-gradient(to right, #fbbf24, #f59e0b, #fbbf24); /* Softer amber colors */
+  border-radius: 10px;
+  animation: shimmer 2s infinite;
+}
+
+.dark .menu-item.active-link::before {
+  background: linear-gradient(to right, #92400e, #b45309, #92400e); /* Dark mode softer amber colors */
+}
+
+@keyframes shimmer {
+  0% { background-position: -100% 0; }
+  100% { background-position: 100% 0; }
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+
+.feather-emoji {
+  display: inline-block;
+  margin-left: 5px;
+  animation: bounce 2s infinite;
+}
+
+@keyframes lightsaber {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.app-card {
+  @apply transition-all duration-300 ease-in-out bg-gradient-to-br from-amber-50 to-amber-100 dark:from-gray-800 dark:to-gray-700 text-gray-800 dark:text-gray-200 shadow-md hover:shadow-lg;
+}
+
+.app-card:hover {
+  @apply transform -translate-y-1;
+}
+
+button {
+  @apply transition-all duration-300 ease-in-out;
+}
+
+button:hover {
+  @apply transform -translate-y-0.5;
+}
+
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: theme('colors.amber.300') theme('colors.amber.100');
+}
+
+.dark .scrollbar-thin {
+  scrollbar-color: theme('colors.gray.600') theme('colors.gray.800');
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  @apply w-2;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  @apply bg-amber-100 dark:bg-gray-800 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  @apply bg-amber-300 dark:bg-gray-600 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  @apply bg-amber-400 dark:bg-gray-500;
+}
+
+.btn {
+  @apply font-semibold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out shadow-md flex items-center;
+}
+
+.btn-primary {
+  @apply bg-amber-500 text-white hover:bg-amber-600 focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700;
+}
+
+.btn-secondary {
+  @apply bg-amber-200 text-gray-800 hover:bg-amber-300 focus:ring-4 focus:ring-amber-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-gray-600;
+}
+
+.search-input {
+  @apply w-full border-b-2 border-amber-200 dark:border-gray-700 py-2 px-4 pl-10 transition-colors duration-300 ease-in-out focus:outline-none focus:border-amber-500 dark:focus:border-amber-400 bg-transparent text-gray-800 dark:text-gray-200;
+}
+
+.scrollbar {
+  @apply scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary
+}
+
+.card-title {
+  @apply text-xl font-bold text-gray-800 dark:text-gray-200 mb-2;
+}
+
+.card-content {
+  @apply text-gray-600 dark:text-gray-400;
+}
+
+.card-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.card-footer-button {
+  @apply bg-amber-500 hover:bg-amber-600 text-white font-bold py-2 px-4 rounded;
+}
+
+/* Subcard styles */
+.subcard {
+  @apply bg-amber-50 dark:bg-gray-700 rounded-lg shadow-md p-4;
+}
+
+.subcard-title {
+  @apply text-lg font-bold text-gray-800 dark:text-gray-200 mb-2;
+}
+
+.subcard-content {
+  @apply text-gray-600 dark:text-gray-400;
+}
+
+.subcard-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.subcard-footer-button {
+  @apply bg-amber-500 hover:bg-amber-600 text-white font-bold py-2 px-4 rounded;
+}

web/src/themes/borg.css

@@ -0,0 +1,265 @@
+/* Borg Collective Theme */
+@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;500;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+  body {
+    font-family: 'Share Tech Mono', monospace;
+  }
+}
+
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+.display-none {
+  @apply hidden;
+}
+
+h1 { @apply text-4xl md:text-5xl font-bold text-green-400 font-['Orbitron'] mb-6; }
+h2 { @apply text-3xl font-semibold text-green-500 font-['Orbitron'] mb-4; }
+h3 { @apply text-2xl font-medium text-green-600 font-['Orbitron'] mb-3; }
+h4 { @apply text-xl font-medium text-green-400 font-['Orbitron'] mb-2; }
+
+h1, h2 { @apply border-b border-green-600 pb-2; }
+
+p { @apply text-base text-gray-300 break-words; }
+ul { @apply list-disc ml-0; }
+li { @apply list-disc ml-5; }
+ol { @apply list-decimal ml-5; }
+
+:root {
+  --color-primary: #00ff00;
+  --color-primary-light: #40ff40;
+  --color-secondary: #1a1a1a;
+  --color-accent: #00cc00;
+  --color-light-text-panel: #00ff00;
+  --color-dark-text-panel: #40ff40;
+  --color-bg-light-panel: #121212;
+  --color-bg-light: #0a0a0a;
+  --color-bg-light-tone: #1a1a1a;
+  --color-bg-light-code-block: #080808;
+  --color-bg-light-tone-panel: #151515;
+  --color-bg-light-discussion: #0f0f0f;
+  --color-bg-light-discussion-odd: #0d0d0d;
+  --color-bg-dark: #000000;
+  --color-bg-dark-tone: #0a0a0a;
+  --color-bg-dark-tone-panel: #101010;
+  --color-bg-dark-code-block: #080808;
+  --color-bg-dark-discussion: #050505;
+  --color-bg-dark-discussion-odd: #030303;
+}
+
+textarea, input, select {
+  @apply bg-gray-900 border-green-600 text-green-400;
+}
+
+.background-color {
+  @apply bg-gradient-to-br from-gray-900 to-black min-h-screen;
+}
+
+.toolbar-color {
+  @apply text-green-400 bg-gray-900 rounded-lg shadow-md border border-green-600;
+}
+
+.panels-color {
+  @apply text-green-400 bg-gray-900 border border-green-600;
+}
+
+.unicolor-panels-color {
+  @apply bg-gray-900 border border-green-600;
+}
+
+.chatbox-color {
+  @apply bg-black text-green-400;
+}
+
+.message {
+  @apply relative w-full rounded-lg border border-green-600 flex flex-col flex-grow flex-wrap overflow-visible p-5 pb-3 text-lg;
+  @apply bg-gray-900 text-green-400;
+}
+
+.message:hover {
+  @apply border-green-400;
+}
+
+.message:nth-child(even) {
+  @apply bg-gray-900;
+}
+
+.message:nth-child(odd) {
+  @apply bg-gray-800;
+}
+
+.message-header {
+  @apply text-xl font-['Orbitron'] font-semibold mb-2 text-green-400;
+}
+
+.message-content {
+  @apply text-lg leading-relaxed text-gray-300;
+}
+
+body {
+  @apply bg-black text-green-400 min-h-screen text-base;
+}
+
+.discussion {
+  @apply mr-2 text-xs text-green-400;
+}
+
+.discussion-hilighted {
+  @apply bg-gray-800 text-green-400 text-xs;
+}
+
+.bg-gradient-welcome {
+  @apply bg-gradient-to-br from-gray-900 to-black;
+}
+
+.bg-gradient-progress {
+  @apply bg-gradient-to-r from-green-900 to-green-700;
+}
+
+.text-gradient-title {
+  @apply text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-green-600;
+}
+
+.text-subtitle {
+  @apply text-green-500;
+}
+
+.text-author {
+  @apply text-green-400;
+}
+
+.text-loading {
+  @apply text-green-400;
+}
+
+.text-progress {
+  @apply text-green-500;
+}
+
+.btn-primary {
+  @apply bg-green-700 hover:bg-green-600 text-black font-bold py-2 px-4 rounded;
+}
+
+.btn-secondary {
+  @apply bg-gray-800 hover:bg-gray-700 text-green-400 font-bold py-2 px-4 rounded border border-green-600;
+}
+
+.card {
+  @apply bg-gray-900 rounded-lg shadow-md p-6 border border-green-600;
+}
+
+.input {
+  @apply bg-gray-900 border border-green-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-green-500 text-green-400;
+}
+
+.label {
+  @apply block text-sm font-medium text-green-400 mb-1;
+}
+
+.link {
+  @apply text-green-400 hover:text-green-300;
+}
+
+.navbar-container {
+  @apply text-green-400 bg-gray-900 rounded shadow-lg border border-green-600;
+}
+
+.game-menu {
+  @apply flex justify-center items-center relative;
+}
+
+.text-shadow-custom {
+  text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
+}
+
+.menu-item {
+  @apply mb-2 px-4 py-2 text-green-400 font-['Orbitron'] font-bold text-lg transition-all duration-300 ease-in-out;
+  @apply hover:text-green-300 hover:transform hover:-translate-y-1;
+}
+
+.menu-item.active-link {
+  @apply rounded-t-md border-green-500 text-green-300 font-['Orbitron'] font-bold text-lg transition-all duration-300 ease-in-out scale-105;
+  text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
+}
+
+.menu-item.active-link::before {
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  background: linear-gradient(to right, #00ff00, #40ff40, #00ff00);
+  border-radius: 10px;
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% { background-position: -100% 0; }
+  100% { background-position: 100% 0; }
+}
+
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: #00ff00 #1a1a1a;
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  @apply w-2;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  @apply bg-gray-900 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  @apply bg-green-600 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  @apply bg-green-500;
+}
+
+.btn {
+  @apply font-['Orbitron'] font-semibold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out shadow-md flex items-center;
+}
+
+.search-input {
+  @apply w-full border-b-2 border-green-600 py-2 px-4 pl-10 transition-colors duration-300 ease-in-out focus:outline-none focus:border-green-400 bg-transparent text-green-400;
+}
+
+.card-title {
+  @apply text-xl font-['Orbitron'] font-bold text-green-400 mb-2;
+}
+
+.card-content {
+  @apply text-gray-300;
+}
+
+.subcard {
+  @apply bg-gray-900 rounded-lg shadow-md p-4 border border-green-600;
+}
+
+.subcard-title {
+  @apply text-lg font-['Orbitron'] font-bold text-green-400 mb-2;
+}
+
+.subcard-content {
+  @apply text-gray-300;
+}

web/src/themes/default.css

@@ -0,0 +1,329 @@
+/* Soft Bluish Theme */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+  body {
+    font-family: 'Roboto', sans-serif;
+  }
+}
+
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+.display-none {
+  @apply hidden;
+}
+
+h1 { @apply text-4xl md:text-5xl font-bold text-blue-800 dark:text-blue-100 mb-6; }
+h2 { @apply text-3xl font-semibold text-blue-700 dark:text-blue-200 mb-4; }
+h3 { @apply text-2xl font-medium text-blue-600 dark:text-blue-300 mb-3; }
+h4 { @apply text-xl font-medium text-blue-500 dark:text-blue-400 mb-2; }
+
+h1, h2 { @apply border-b border-blue-300 dark:border-blue-600 pb-2; }
+
+p { @apply text-base text-blue-600 dark:text-blue-300 break-words; }
+ul { @apply list-disc ml-0; }
+li { @apply list-disc ml-5; }
+ol { @apply list-decimal ml-5; }
+
+:root {
+  --color-primary: #4a90e2;
+  --color-primary-light: #6ab7f1;
+  --color-secondary: #8ab8e0;
+  --color-accent: #3a7ca1;
+  --color-light-text-panel: #ffffff;
+  --color-dark-text-panel: #e0e0e0;
+  --color-bg-light-panel: #f0faff;
+  --color-bg-light: #ffffff;
+  --color-bg-light-tone: #e0f0ff;
+  --color-bg-light-code-block: #f5faff;
+  --color-bg-light-tone-panel: #d0e0f0;
+  --color-bg-light-discussion: #f8faff;
+  --color-bg-light-discussion-odd: #f0faff;
+  --color-bg-dark: #0a0a1a; /* Updated to a darker blue */
+  --color-bg-dark-tone: #151521; /* Updated to a darker blue */
+  --color-bg-dark-tone-panel: #1c1c2a; /* Updated to a darker blue */
+  --color-bg-dark-code-block: #151521; /* Updated to a darker blue */
+  --color-bg-dark-discussion: #0e0e1a; /* Updated to a darker blue */
+  --color-bg-dark-discussion-odd: #0d0d1a; /* Updated to a darker blue */
+}
+
+textarea, input, select {
+  @apply bg-blue-100 dark:bg-blue-900;
+}
+
+.background-color {
+  @apply bg-gradient-to-br from-blue-100 to-purple-300 dark:from-blue-800 dark:to-purple-900 min-h-screen;
+}
+
+.toolbar-color {
+  @apply text-blue-700 dark:text-blue-200 bg-blue-200 dark:bg-blue-800 rounded-lg shadow-md;
+}
+
+.panels-color {
+  @apply text-blue-700 dark:text-blue-200 bg-blue-100 dark:bg-blue-800;
+}
+
+.unicolor-panels-color {
+  @apply bg-blue-200 dark:bg-blue-700;
+}
+
+.chatbox-color {
+  @apply bg-blue-50 dark:bg-blue-800;
+}
+
+.message {
+  @apply relative w-full rounded-lg border border-blue-300 dark:border-blue-600 flex flex-col flex-grow flex-wrap overflow-visible p-5 pb-3 text-lg;
+  @apply bg-blue-100 text-blue-900 dark:bg-gradient-to-br dark:from-blue-900 dark:to-blue-800 dark:text-blue-100; /* Added gradient for dark mode */
+}
+
+.message:hover {
+  @apply border-blue-400 dark:border-blue-500;
+}
+
+.message:nth-child(even) {
+  @apply bg-blue-50 dark:bg-blue-900; /* Darker background for even messages */
+}
+
+.message:nth-child(odd) {
+  @apply bg-blue-100 dark:bg-blue-800; /* Darker background for odd messages */
+}
+
+.message-header {
+  @apply text-xl font-semibold mb-2;
+}
+
+.message-content {
+  @apply text-lg leading-relaxed;
+}
+
+body {
+  @apply bg-blue-100 dark:bg-blue-900 min-h-screen text-base;
+}
+
+.discussion {
+  @apply mr-2 text-xs;
+}
+
+.discussion-hilighted {
+  @apply bg-blue-200 dark:bg-blue-800 text-xs;
+}
+
+.bg-gradient-welcome {
+  @apply bg-gradient-to-br from-blue-100 to-purple-300 dark:from-blue-800 dark:to-purple-900;
+}
+
+.bg-gradient-progress {
+  @apply bg-gradient-to-r from-blue-200 to-blue-300 dark:from-blue-700 dark:to-blue-600;
+}
+
+.text-gradient-title {
+  @apply text-transparent bg-clip-text bg-gradient-to-r from-blue-700 to-blue-500 dark:from-blue-300 dark:to-blue-500;
+}
+
+.text-subtitle {
+  @apply text-blue-600 dark:text-blue-400;
+}
+
+.text-author {
+  @apply text-blue-500 dark:text-blue-400;
+}
+
+.text-loading {
+  @apply text-blue-700 dark:text-blue-300;
+}
+
+.text-progress {
+  @apply text-blue-600 dark:text-blue-400;
+}
+
+.btn-primary {
+  @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
+}
+
+.btn-secondary {
+  @apply bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded;
+}
+
+.card {
+  @apply bg-white dark:bg-blue-800 rounded-lg shadow-md p-6;
+}
+
+.input {
+  @apply bg-blue-100 dark:bg-blue-700 border border-blue-300 dark:border-blue-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400;
+}
+
+.label {
+  @apply block text-sm font-medium text-blue-700 dark:text-blue-300 mb-1;
+}
+
+.link {
+  @apply text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200;
+}
+
+.navbar-container {
+  @apply text-blue-700 dark:text-blue-200 bg-blue-200 dark:bg-blue-800 rounded shadow-lg;
+}
+
+.game-menu {
+  @apply flex justify-center items-center relative;
+}
+
+.text-shadow-custom {
+  text-shadow: 1px 1px 0px #e0e0e0, -1px -1px 0px #e0e0e0, 1px -1px 0px #e0e0e0, -1px 1px 0px #e0e0e0;
+}
+
+.menu-item {
+  @apply mb-2 px-4 py-2 text-blue-600 dark:text-blue-300 font-bold text-lg transition-all duration-300 ease-in-out;
+  @apply hover:text-blue-800 hover:dark:text-blue-200 hover:transform hover:-translate-y-1;
+}
+
+.menu-item.active-link {
+  @apply rounded-t-md border-blue-500 dark:text-blue-300 text-shadow-custom text-blue-800 font-bold text-lg transition-all duration-300 ease-in-out scale-105;
+  @apply hover:text-blue-900 hover:dark:text-blue-200 hover:transform hover:-translate-y-1;
+  text-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
+}
+
+.menu-item.active-link::before {
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  background: linear-gradient(to right, #4a90e2, #8ab8e0, #4a90e2);
+  border-radius: 10px;
+  animation: shimmer 2s infinite;
+}
+
+.dark .menu-item.active-link::before {
+  background: linear-gradient(to right, #6ab7f1, #aaaaaa, #6ab7f1);
+}
+
+@keyframes shimmer {
+  0% { background-position: -100% 0; }
+  100% { background-position: 100% 0; }
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+
+.feather-emoji {
+  display: inline-block;
+  margin-left: 5px;
+  animation: bounce 2s infinite;
+}
+
+.app-card {
+  @apply transition-all duration-300 ease-in-out bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-100 shadow-md hover:shadow-lg;
+}
+
+.app-card:hover {
+  @apply transform -translate-y-1;
+}
+
+button {
+  @apply transition-all duration-300 ease-in-out;
+}
+
+button:hover {
+  @apply transform -translate-y-0.5;
+}
+
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: theme('colors.blue.400') theme('colors.blue.200');
+}
+
+.dark .scrollbar-thin {
+  scrollbar-color: theme('colors.blue.600') theme('colors.blue.800');
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  @apply w-2;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  @apply bg-blue-200 dark:bg-blue-800 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  @apply bg-blue-400 dark:bg-blue-600 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  @apply bg-blue-500 dark:bg-blue-500;
+}
+
+.btn {
+  @apply font-semibold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out shadow-md flex items-center;
+}
+
+.btn-primary {
+  @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600;
+}
+
+.btn-secondary {
+  @apply bg-blue-200 text-blue-700 hover:bg-blue-300 focus:ring-4 focus:ring-blue-200 dark:bg-blue-700 dark:text-blue-200 dark:hover:bg-blue-600 dark:focus:ring-blue-600;
+}
+
+.search-input {
+  @apply w-full border-b-2 border-blue-300 dark:border-blue-600 py-2 px-4 pl-10 transition-colors duration-300 ease-in-out focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 bg-transparent text-blue-800 dark:text-blue-100;
+}
+
+.scrollbar {
+  @apply scrollbar-thin scrollbar-track-blue-200 scrollbar-thumb-blue-400 hover:scrollbar-thumb-blue-500 dark:scrollbar-track-blue-700 dark:scrollbar-thumb-blue-600 dark:hover:scrollbar-thumb-blue-500;
+}
+
+.card-title {
+  @apply text-xl font-bold text-blue-800 dark:text-blue-100 mb-2;
+}
+
+.card-content {
+  @apply text-blue-600 dark:text-blue-300;
+}
+
+.card-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.card-footer-button {
+  @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
+}
+
+.subcard {
+  @apply bg-blue-50 dark:bg-blue-800 rounded-lg shadow-md p-4;
+}
+
+.subcard-title {
+  @apply text-lg font-bold text-blue-800 dark:text-blue-100 mb-2;
+}
+
+.subcard-content {
+  @apply text-blue-600 dark:text-blue-300;
+}
+
+.subcard-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.subcard-footer-button {
+  @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
+}

web/src/themes/lollms_blue.css

@@ -0,0 +1,379 @@
+/* Custom font */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+  @font-face {
+    font-family: 'Roboto';
+    src: url('./fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'PTSans';
+    src: url('./fonts/PTSans/PTSans-Regular.ttf') format('truetype');
+  }
+}
+
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+.display-none {
+  @apply hidden;
+}
+
+h1 { @apply text-4xl md:text-5xl font-bold text-gray-900 dark:text-gray-100 mb-6; }
+h2 {
+@apply text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-4;
+}
+
+h3 {
+@apply text-2xl font-medium text-gray-700 dark:text-gray-300 mb-3;
+}
+
+h4 {
+@apply text-xl font-medium text-gray-600 dark:text-gray-400 mb-2;
+}
+
+/* Optional: Add a subtle bottom border to headers for added distinction */
+h1, h2{
+@apply border-b border-gray-200 dark:border-gray-700 pb-2;
+}
+
+
+p {
+  @apply text-base text-gray-600 dark:text-gray-300 break-words;
+}
+
+ul {
+  @apply list-disc ml-0;
+}
+
+li {
+  @apply list-disc ml-5;
+}
+
+ol {
+  @apply list-decimal ml-5;
+}
+
+:root {
+  --color-primary: #0e8ef0;
+  --color-primary-light: #3dabff;
+  --color-secondary: #0fd974;
+  --color-accent: #f0700e;
+  --color-light-text-panel: #ffffff;
+  --color-dark-text-panel: #ffffff;
+  --color-bg-light-panel: #7cb5ec;
+  --color-bg-light: #e2edff;
+  --color-bg-light-tone: #b9d2f7;
+  --color-bg-light-code-block: #cad7ed;
+  --color-bg-light-tone-panel: #8fb5ef;
+  --color-bg-light-discussion: #c5d8f8;
+  --color-bg-light-discussion-odd: #d6e7ff;
+  --color-bg-dark: #132e59;
+  --color-bg-dark-tone: #25477d;
+  --color-bg-dark-tone-panel: #4367a3;
+  --color-bg-dark-code-block: #2254a7;
+  --color-bg-dark-discussion: #435E8A;
+  --color-bg-dark-discussion-odd: #284471;
+}
+/* For both textarea and input elements */
+textarea, input, select {
+  @apply bg-gray-100 dark:bg-gray-800;
+}
+
+.background-color {
+  @apply bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900 dark:to-blue-900 min-h-screen;
+}
+
+.toolbar-color {
+  @apply  text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800 rounded-full shadow-lg
+}
+.panels-color {
+  @apply text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-100 to-blue-200 dark:from-blue-800 dark:to-blue-900 rounded shadow-lg;
+}
+.unicolor-panels-color {
+  @apply bg-blue-200 dark:bg-blue-800
+}
+.chatbox-color {
+  @apply bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900
+}
+
+/* Base message styling */ 
+.message { @apply relative w-full rounded-lg m-2 shadow-lg border border-gray-200 dark:border-gray-700 flex flex-col flex-grow flex-wrap overflow-visible p-5 pb-3 text-lg; /* Increased from text-base to text-lg */ }
+.message:hover {
+@apply border-blue-400 dark:border-blue-500;
+}
+
+/* Light theme */
+.message {
+@apply bg-blue-200 text-gray-800;
+}
+
+/* Dark theme */
+.dark .message {
+@apply bg-blue-800 text-gray-200;
+}
+
+/* Alternating backgrounds for better distinction */
+.message:nth-child(even) {
+@apply bg-blue-50 dark:bg-blue-700;
+}
+
+.message:nth-child(odd) {
+@apply bg-blue-200 dark:bg-blue-800;
+}
+
+/* Additional styling for more professional look */
+.message-header {
+@apply text-xl font-semibold mb-2; /* Increased from text-lg to text-xl */
+}
+
+.message-content {
+@apply text-lg leading-relaxed; /* Increased from text-base to text-lg */
+}
+
+/* Body styling */
+body {
+@apply bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 min-h-screen text-base; /* Added text-base for default body text */
+}
+
+.discussion{
+  @apply mr-2 bg-gradient-to-r from-blue-200 to-blue-200 dark:from-blue-900 dark:to-blue-900 text-xs
+}
+.discussion-hilighted{
+  @apply bg-gradient-to-r from-blue-300 to-blue-200 dark:from-blue-800 dark:to-purple-900 text-xs
+}
+
+
+
+.bg-gradient-welcome {
+  @apply bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900;
+}
+
+.bg-gradient-progress {
+  @apply bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800;
+}
+
+.text-gradient-title {
+  @apply text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400;
+}
+
+.text-subtitle {
+  @apply text-gray-600 dark:text-gray-300;
+}
+
+.text-author {
+  @apply text-gray-500 dark:text-gray-400;
+}
+
+.text-loading {
+  @apply text-gray-700 dark:text-gray-300;
+}
+
+.text-progress {
+  @apply text-blue-600 dark:text-blue-400;
+}
+
+.btn-primary {
+  @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded;
+}
+
+.btn-secondary {
+  @apply bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded;
+}
+
+.card {
+  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6;
+}
+
+.input {
+  @apply bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400;
+}
+
+.label {
+  @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
+}
+
+.link {
+  @apply text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300;
+}
+.navbar-container {
+  @apply  text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900 rounded shadow-lg
+}
+
+.game-menu {
+  @apply flex justify-center items-center relative;
+}
+
+.text-shadow-custom {
+  text-shadow: 1px 1px 0px white, -1px -1px 0px white, 1px -1px 0px white, -1px 1px 0px white;
+}
+.menu-item {
+  @apply mb-2 px-4 py-2 text-green-600 dark:text-green-300 font-bold text-lg transition-all duration-300 ease-in-out;
+  @apply hover:text-red-400 hover:dark:text-red-200 hover:transform hover:-translate-y-1;
+}
+
+.menu-item.active-link {
+  @apply rounded-t-md border-red-500 text-shadow-custom text-red-600 font-bold text-lg transition-all duration-300 ease-in-out scale-105;
+  @apply hover:text-red-700 hover:dark:text-red-300 hover:transform hover:-translate-y-1;
+  /* Glow effect on text */
+  text-shadow: 0 0 10px rgba(255, 100, 100, 0.5);
+}
+
+.menu-item.active-link::before {
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  background: linear-gradient(to right, #ff3b3b, #ff7b7b, #ff3b3b); /* Strawberry colors */
+  border-radius: 10px;
+  animation: shimmer 2s infinite;
+}
+
+.dark .menu-item.active-link::before {
+  background: linear-gradient(to right, #8b0000, #ff0000, #8b0000); /* Dark mode strawberry colors */
+}
+
+@keyframes shimmer {
+  0% { background-position: -100% 0; }
+  100% { background-position: 100% 0; }
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+.feather-emoji {
+  display: inline-block;
+  margin-left: 5px;
+  animation: bounce 2s infinite;
+}
+
+
+
+@keyframes lightsaber {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+
+
+
+.app-card {
+  @apply transition-all duration-300 ease-in-out bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900 text-gray-800 dark:text-gray-100 shadow-md hover:shadow-lg;
+}
+
+.app-card:hover {
+  @apply transform -translate-y-1;
+}
+
+button {
+  @apply transition-all duration-300 ease-in-out;
+}
+
+button:hover {
+  @apply transform -translate-y-0.5;
+}
+
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: theme('colors.blue.300') theme('colors.blue.100');
+}
+
+.dark .scrollbar-thin {
+  scrollbar-color: theme('colors.blue.700') theme('colors.blue.900');
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  @apply w-2;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  @apply bg-blue-100 dark:bg-blue-900 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  @apply bg-blue-300 dark:bg-blue-700 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  @apply bg-blue-400 dark:bg-blue-600;
+}
+.btn {
+  @apply font-semibold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out shadow-md flex items-center;
+}
+
+.btn-primary {
+  @apply bg-blue-500 text-white hover:bg-blue-600 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800;
+}
+
+.btn-secondary {
+  @apply bg-blue-200 text-gray-700 hover:bg-blue-300 focus:ring-4 focus:ring-blue-200 dark:bg-blue-700 dark:text-gray-200 dark:hover:bg-blue-600 dark:focus:ring-blue-600;
+}
+
+.search-input {
+  @apply w-full border-b-2 border-blue-200 dark:border-blue-700 py-2 px-4 pl-10 transition-colors duration-300 ease-in-out focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 bg-transparent text-gray-800 dark:text-gray-100;
+}
+
+.scrollbar {
+  @apply scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary
+}
+
+.card-title {
+  @apply text-xl font-bold text-gray-900 dark:text-white mb-2;
+}
+
+.card-content {
+  @apply text-gray-700 dark:text-gray-300;
+}
+
+.card-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.card-footer-button {
+  @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded;
+}
+
+/* Subcard styles */
+.subcard {
+  @apply bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md p-4;
+}
+
+.subcard-title {
+  @apply text-lg font-bold text-gray-900 dark:text-white mb-2;
+}
+
+.subcard-content {
+  @apply text-gray-700 dark:text-gray-300;
+}
+
+.subcard-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.subcard-footer-button {
+  @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded;
+}

web/src/themes/sober_gray.css

@@ -0,0 +1,332 @@
+/* Flat Gray Theme */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+  body {
+    font-family: 'Roboto', sans-serif;
+  }
+}
+
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+.display-none {
+  @apply hidden;
+}
+
+h1 { @apply text-4xl md:text-5xl font-bold text-gray-800 dark:text-gray-100 mb-6; }
+h2 { @apply text-3xl font-semibold text-gray-700 dark:text-gray-200 mb-4; }
+h3 { @apply text-2xl font-medium text-gray-600 dark:text-gray-300 mb-3; }
+h4 { @apply text-xl font-medium text-gray-500 dark:text-gray-400 mb-2; }
+
+h1, h2 { @apply border-b border-gray-300 dark:border-gray-600 pb-2; }
+
+p { @apply text-base text-gray-600 dark:text-gray-300 break-words; }
+ul { @apply list-disc ml-0; }
+li { @apply list-disc ml-5; }
+ol { @apply list-decimal ml-5; }
+
+:root {
+  --color-primary: #4a4a4a;
+  --color-primary-light: #6a6a6a;
+  --color-secondary: #8a8a8a;
+  --color-accent: #3a3a3a;
+  --color-light-text-panel: #ffffff;
+  --color-dark-text-panel: #e0e0e0;
+  --color-bg-light-panel: #f0f0f0;
+  --color-bg-light: #ffffff;
+  --color-bg-light-tone: #e0e0e0;
+  --color-bg-light-code-block: #f5f5f5;
+  --color-bg-light-tone-panel: #d0d0d0;
+  --color-bg-light-discussion: #f8f8f8;
+  --color-bg-light-discussion-odd: #f0f0f0;
+  --color-bg-dark: #2a2a2a;
+  --color-bg-dark-tone: #3a3a3a;
+  --color-bg-dark-tone-panel: #4a4a4a;
+  --color-bg-dark-code-block: #3a3a3a;
+  --color-bg-dark-discussion: #333333;
+  --color-bg-dark-discussion-odd: #2d2d2d;
+}
+
+textarea, input, select {
+  @apply bg-gray-100 dark:bg-gray-800;
+}
+
+.background-color {
+  @apply bg-gray-100 dark:bg-gray-900 min-h-screen;
+}
+
+.toolbar-color {
+  @apply text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md;
+}
+
+.panels-color {
+  @apply text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md;
+}
+
+.unicolor-panels-color {
+  @apply bg-gray-200 dark:bg-gray-700;
+}
+
+.chatbox-color {
+  @apply bg-gray-50 dark:bg-gray-800;
+}
+
+.message {
+  @apply relative w-full rounded-lg m-2 shadow-md border border-gray-300 dark:border-gray-600 flex flex-col flex-grow flex-wrap overflow-visible p-5 pb-3 text-lg;
+}
+
+.message:hover {
+  @apply border-gray-400 dark:border-gray-500;
+}
+
+.message {
+  @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200;
+}
+
+.message:nth-child(even) {
+  @apply bg-gray-50 dark:bg-gray-800;
+}
+
+.message:nth-child(odd) {
+  @apply bg-gray-100 dark:bg-gray-700;
+}
+
+.message-header {
+  @apply text-xl font-semibold mb-2;
+}
+
+.message-content {
+  @apply text-lg leading-relaxed;
+}
+
+body {
+  @apply bg-gray-100 dark:bg-gray-900 min-h-screen text-base;
+}
+
+.discussion {
+  @apply mr-2 bg-gray-200 dark:bg-gray-500 text-xs;
+}
+
+.discussion-hilighted {
+  @apply bg-gray-300 dark:bg-gray-600 text-xs;
+}
+
+.bg-gradient-welcome {
+  @apply bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900;
+}
+
+.bg-gradient-progress {
+  @apply bg-gradient-to-r from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600;
+}
+
+.text-gradient-title {
+  @apply text-transparent bg-clip-text bg-gradient-to-r from-gray-700 to-gray-500 dark:from-gray-300 dark:to-gray-500;
+}
+
+.text-subtitle {
+  @apply text-gray-600 dark:text-gray-400;
+}
+
+.text-author {
+  @apply text-gray-500 dark:text-gray-400;
+}
+
+.text-loading {
+  @apply text-gray-700 dark:text-gray-300;
+}
+
+.text-progress {
+  @apply text-gray-600 dark:text-gray-400;
+}
+
+.btn-primary {
+  @apply bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded;
+}
+
+.btn-secondary {
+  @apply bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded;
+}
+
+.card {
+  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6;
+}
+
+.input {
+  @apply bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400;
+}
+
+.label {
+  @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
+}
+
+.link {
+  @apply text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200;
+}
+
+.navbar-container {
+  @apply text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-800 rounded shadow-lg;
+}
+
+.game-menu {
+  @apply flex justify-center items-center relative;
+}
+
+.text-shadow-custom {
+  text-shadow: 1px 1px 0px #e0e0e0, -1px -1px 0px #e0e0e0, 1px -1px 0px #e0e0e0, -1px 1px 0px #e0e0e0;
+}
+
+.menu-item {
+  @apply mb-2 px-4 py-2 text-gray-600 dark:text-gray-300 font-bold text-lg transition-all duration-300 ease-in-out;
+  @apply hover:text-gray-800 hover:dark:text-gray-100 hover:transform hover:-translate-y-1;
+}
+
+.menu-item.active-link {
+  @apply rounded-t-md border-gray-500 text-shadow-custom text-gray-800 font-bold text-lg transition-all duration-300 ease-in-out scale-105;
+  @apply hover:text-gray-900 hover:dark:text-gray-50 hover:transform hover:-translate-y-1;
+  text-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
+}
+
+.menu-item.active-link::before {
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  background: linear-gradient(to right, #4a4a4a, #8a8a8a, #4a4a4a);
+  border-radius: 10px;
+  animation: shimmer 2s infinite;
+}
+
+.dark .menu-item.active-link::before {
+  background: linear-gradient(to right, #6a6a6a, #aaaaaa, #6a6a6a);
+}
+
+@keyframes shimmer {
+  0% { background-position: -100% 0; }
+  100% { background-position: 100% 0; }
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+
+.feather-emoji {
+  display: inline-block;
+  margin-left: 5px;
+  animation: bounce 2s infinite;
+}
+
+.app-card {
+  @apply transition-all duration-300 ease-in-out bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 shadow-md hover:shadow-lg;
+}
+
+.app-card:hover {
+  @apply transform -translate-y-1;
+}
+
+button {
+  @apply transition-all duration-300 ease-in-out;
+}
+
+button:hover {
+  @apply transform -translate-y-0.5;
+}
+
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: theme('colors.gray.400') theme('colors.gray.200');
+}
+
+.dark .scrollbar-thin {
+  scrollbar-color: theme('colors.gray.600') theme('colors.gray.800');
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  @apply w-2;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  @apply bg-gray-200 dark:bg-gray-800 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  @apply bg-gray-400 dark:bg-gray-600 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  @apply bg-gray-500 dark:bg-gray-500;
+}
+
+.btn {
+  @apply font-semibold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out shadow-md flex items-center;
+}
+
+.btn-primary {
+  @apply bg-gray-600 text-white hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600;
+}
+
+.btn-secondary {
+  @apply bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-4 focus:ring-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-gray-600;
+}
+
+.search-input {
+  @apply w-full border-b-2 border-gray-300 dark:border-gray-600 py-2 px-4 pl-10 transition-colors duration-300 ease-in-out focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 bg-transparent text-gray-800 dark:text-gray-100;
+}
+
+.scrollbar {
+  @apply scrollbar-thin scrollbar-track-gray-200 scrollbar-thumb-gray-400 hover:scrollbar-thumb-gray-500 dark:scrollbar-track-gray-700 dark:scrollbar-thumb-gray-600 dark:hover:scrollbar-thumb-gray-500;
+}
+
+.card-title {
+  @apply text-xl font-bold text-gray-800 dark:text-gray-100 mb-2;
+}
+
+.card-content {
+  @apply text-gray-600 dark:text-gray-300;
+}
+
+.card-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.card-footer-button {
+  @apply bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded;
+}
+
+.subcard {
+  @apply bg-gray-50 dark:bg-gray-800 rounded-lg shadow-md p-4;
+}
+
+.subcard-title {
+  @apply text-lg font-bold text-gray-800 dark:text-gray-100 mb-2;
+}
+
+.subcard-content {
+  @apply text-gray-600 dark:text-gray-300;
+}
+
+.subcard-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.subcard-footer-button {
+  @apply bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded;
+}

web/src/themes/strawberry.css

@@ -0,0 +1,378 @@
+/* Custom font */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+  @font-face {
+    font-family: 'Roboto';
+    src: url('./fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'PTSans';
+    src: url('./fonts/PTSans/PTSans-Regular.ttf') format('truetype');
+  }
+}
+
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+.display-none {
+  @apply hidden;
+}
+
+h1 { @apply text-4xl md:text-5xl font-bold text-gray-900 dark:text-gray-100 mb-6; }
+h2 {
+@apply text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-4;
+}
+
+h3 {
+@apply text-2xl font-medium text-gray-700 dark:text-gray-300 mb-3;
+}
+
+h4 {
+@apply text-xl font-medium text-gray-600 dark:text-gray-400 mb-2;
+}
+
+/* Optional: Add a subtle bottom border to headers for added distinction */
+h1, h2{
+@apply border-b border-gray-200 dark:border-gray-700 pb-2;
+}
+
+
+p {
+  @apply text-base text-gray-600 dark:text-gray-300 break-words;
+}
+
+ul {
+  @apply list-disc ml-0;
+}
+
+li {
+  @apply list-disc ml-5;
+}
+
+ol {
+  @apply list-decimal ml-5;
+}
+
+:root {
+  --color-primary: #0e8ef0;
+  --color-primary-light: #3dabff;
+  --color-secondary: #0fd974;
+  --color-accent: #f0700e;
+  --color-light-text-panel: #ffffff;
+  --color-dark-text-panel: #ffffff;
+  --color-bg-light-panel: #7cb5ec;
+  --color-bg-light: #e2edff;
+  --color-bg-light-tone: #b9d2f7;
+  --color-bg-light-code-block: #cad7ed;
+  --color-bg-light-tone-panel: #8fb5ef;
+  --color-bg-light-discussion: #c5d8f8;
+  --color-bg-light-discussion-odd: #d6e7ff;
+  --color-bg-dark: #132e59;
+  --color-bg-dark-tone: #25477d;
+  --color-bg-dark-tone-panel: #4367a3;
+  --color-bg-dark-code-block: #2254a7;
+  --color-bg-dark-discussion: #435E8A;
+  --color-bg-dark-discussion-odd: #284471;
+}
+/* For both textarea and input elements */
+textarea, input, select {
+  @apply bg-gray-100 dark:bg-gray-800;
+}
+
+.background-color {
+  @apply bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900 dark:to-blue-900 min-h-screen;
+}
+
+.toolbar-color {
+  @apply  text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800 rounded-full shadow-lg
+}
+.panels-color {
+  @apply text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-100 to-blue-200 dark:from-blue-800 dark:to-blue-900 rounded shadow-lg;
+}
+.unicolor-panels-color {
+  @apply bg-blue-200 dark:bg-blue-800
+}
+.chatbox-color {
+  @apply bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900
+}
+
+/* Base message styling */ 
+.message { @apply relative w-full rounded-lg m-2 shadow-lg border border-gray-200 dark:border-gray-700 flex flex-col flex-grow flex-wrap overflow-visible p-5 pb-3 text-lg; /* Increased from text-base to text-lg */ }
+.message:hover {
+@apply border-blue-400 dark:border-blue-500;
+}
+
+/* Light theme */
+.message {
+@apply bg-blue-200 text-gray-800;
+}
+
+/* Dark theme */
+.dark .message {
+@apply bg-blue-800 text-gray-200;
+}
+
+/* Alternating backgrounds for better distinction */
+.message:nth-child(even) {
+@apply bg-blue-50 dark:bg-blue-700;
+}
+
+.message:nth-child(odd) {
+@apply bg-blue-200 dark:bg-blue-800;
+}
+
+/* Additional styling for more professional look */
+.message-header {
+@apply text-xl font-semibold mb-2; /* Increased from text-lg to text-xl */
+}
+
+.message-content {
+@apply text-lg leading-relaxed; /* Increased from text-base to text-lg */
+}
+
+/* Body styling */
+body {
+@apply bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 min-h-screen text-base; /* Added text-base for default body text */
+}
+
+.discussion{
+  @apply mr-2 bg-gradient-to-r from-blue-300 to-blue-400 dark:from-blue-800 dark:to-blue-900 hover:from-blue-100 hover:to-purple-100 hover:dark:from-blue-700 hover:dark:to-purple-700
+}
+.discussion-hilighted{
+  @apply bg-gradient-to-r from-blue-200 to-purple-300 dark:from-blue-800 dark:to-purple-900 hover:from-blue-100 hover:to-purple-100 hover:dark:from-blue-700 hover:dark:to-purple-700
+}
+
+
+.bg-gradient-welcome {
+  @apply bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900;
+}
+
+.bg-gradient-progress {
+  @apply bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800;
+}
+
+.text-gradient-title {
+  @apply text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400;
+}
+
+.text-subtitle {
+  @apply text-gray-600 dark:text-gray-300;
+}
+
+.text-author {
+  @apply text-gray-500 dark:text-gray-400;
+}
+
+.text-loading {
+  @apply text-gray-700 dark:text-gray-300;
+}
+
+.text-progress {
+  @apply text-blue-600 dark:text-blue-400;
+}
+
+.btn-primary {
+  @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded;
+}
+
+.btn-secondary {
+  @apply bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded;
+}
+
+.card {
+  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6;
+}
+
+.input {
+  @apply bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400;
+}
+
+.label {
+  @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
+}
+
+.link {
+  @apply text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300;
+}
+.navbar-container {
+  @apply  text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900 rounded shadow-lg
+}
+
+.game-menu {
+  @apply flex justify-center items-center relative;
+}
+
+.text-shadow-custom {
+  text-shadow: 1px 1px 0px white, -1px -1px 0px white, 1px -1px 0px white, -1px 1px 0px white;
+}
+.menu-item {
+  @apply mb-2 px-4 py-2 text-green-600 dark:text-green-300 font-bold text-lg transition-all duration-300 ease-in-out;
+  @apply hover:text-red-400 hover:dark:text-red-200 hover:transform hover:-translate-y-1;
+}
+
+.menu-item.active-link {
+  @apply rounded-t-md border-red-500 text-shadow-custom text-red-600 font-bold text-lg transition-all duration-300 ease-in-out scale-105;
+  @apply hover:text-red-700 hover:dark:text-red-300 hover:transform hover:-translate-y-1;
+  /* Glow effect on text */
+  text-shadow: 0 0 10px rgba(255, 100, 100, 0.5);
+}
+
+.menu-item.active-link::before {
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  background: linear-gradient(to right, #ff3b3b, #ff7b7b, #ff3b3b); /* Strawberry colors */
+  border-radius: 10px;
+  animation: shimmer 2s infinite;
+}
+
+.dark .menu-item.active-link::before {
+  background: linear-gradient(to right, #8b0000, #ff0000, #8b0000); /* Dark mode strawberry colors */
+}
+
+@keyframes shimmer {
+  0% { background-position: -100% 0; }
+  100% { background-position: 100% 0; }
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+.feather-emoji {
+  display: inline-block;
+  margin-left: 5px;
+  animation: bounce 2s infinite;
+}
+
+
+
+@keyframes lightsaber {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+
+
+
+.app-card {
+  @apply transition-all duration-300 ease-in-out bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900 text-gray-800 dark:text-gray-100 shadow-md hover:shadow-lg;
+}
+
+.app-card:hover {
+  @apply transform -translate-y-1;
+}
+
+button {
+  @apply transition-all duration-300 ease-in-out;
+}
+
+button:hover {
+  @apply transform -translate-y-0.5;
+}
+
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: theme('colors.blue.300') theme('colors.blue.100');
+}
+
+.dark .scrollbar-thin {
+  scrollbar-color: theme('colors.blue.700') theme('colors.blue.900');
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  @apply w-2;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  @apply bg-blue-100 dark:bg-blue-900 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  @apply bg-blue-300 dark:bg-blue-700 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  @apply bg-blue-400 dark:bg-blue-600;
+}
+.btn {
+  @apply font-semibold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out shadow-md flex items-center;
+}
+
+.btn-primary {
+  @apply bg-blue-500 text-white hover:bg-blue-600 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800;
+}
+
+.btn-secondary {
+  @apply bg-blue-200 text-gray-700 hover:bg-blue-300 focus:ring-4 focus:ring-blue-200 dark:bg-blue-700 dark:text-gray-200 dark:hover:bg-blue-600 dark:focus:ring-blue-600;
+}
+
+.search-input {
+  @apply w-full border-b-2 border-blue-200 dark:border-blue-700 py-2 px-4 pl-10 transition-colors duration-300 ease-in-out focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 bg-transparent text-gray-800 dark:text-gray-100;
+}
+
+.scrollbar {
+  @apply scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary
+}
+
+.card-title {
+  @apply text-xl font-bold text-gray-900 dark:text-white mb-2;
+}
+
+.card-content {
+  @apply text-gray-700 dark:text-gray-300;
+}
+
+.card-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.card-footer-button {
+  @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded;
+}
+
+/* Subcard styles */
+.subcard {
+  @apply bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md p-4;
+}
+
+.subcard-title {
+  @apply text-lg font-bold text-gray-900 dark:text-white mb-2;
+}
+
+.subcard-content {
+  @apply text-gray-700 dark:text-gray-300;
+}
+
+.subcard-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.subcard-footer-button {
+  @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded;
+}