Improved theming, added "modern" themes

Wave/Components/ArticleTile.razor

@@ -1,7 +1,7 @@
 @using Wave.Data
 
 <ArticleLink Article="Article">
-	<article class="card card-compact bg-base-200 rounded-none h-full">
+	<article class="card card-compact bg-base-200 text-base-content rounded-none h-full">
 		<div class="card-body">
 			<h3 class="card-title line-clamp-2">@Article.Title</h3>
 			<small class="text-sm">By @Article.Author.Name</small>

Wave/Components/Layout/MainLayout.razor

@@ -64,6 +64,8 @@
 						<option selected="@(UserTheme is null)" value="">@Localizer["Theme_Default"]</option>
 						<option selected="@(UserTheme is "wave-light")" value="wave-light">@Localizer["Theme_WaveLight"]</option>
 						<option selected="@(UserTheme is "wave-dark")" value="wave-dark">@Localizer["Theme_WaveDark"]</option>
+						<option selected="@(UserTheme is "modern-light")" value="modern-light">@Localizer["Theme_ModernLight"]</option>
+						<option selected="@(UserTheme is "modern-dark")" value="modern-dark">@Localizer["Theme_ModernDark"]</option>
 					</select>
 				</div>
 			</footer>

Wave/Components/Pages/Home.razor

@@ -22,10 +22,10 @@
     @if (Articles.FirstOrDefault() is {} featured) {
 	    <article class="mb-6">
 		    <ArticleLink Article="featured">
-			    <div class="hero bg-secondary text-secondary-content">
+                <div class="hero bg-secondary text-secondary-content border-l-8 border-current shadow rounded-box">
 				    <div class="hero-content">
 					    <div class="flex flex-col space-y-6 my-3">
-						    <h2 class="text-2xl lg:text-4xl font-bold">
+						    <h2 class="text-2xl lg:text-4xl">
 							    @featured.Title<br />
 						    </h2>
 						    <p class="line-clamp-6">

Wave/Resources/Components/Layout/MainLayout.de-DE.resx

@@ -113,4 +113,10 @@
     <data name="Language_Label" xml:space="preserve">
         <value>Sprache</value>
     </data>
+    <data name="Theme_ModernDark" xml:space="preserve">
+        <value>Modern Dunkel</value>
+    </data>
+    <data name="Theme_ModernLight" xml:space="preserve">
+        <value>Moderl Hell</value>
+    </data>
 </root>

Wave/Resources/Components/Layout/MainLayout.resx

@@ -113,4 +113,10 @@
     <data name="Language_Label" xml:space="preserve">
         <value>Language</value>
     </data>
+    <data name="Theme_ModernLight" xml:space="preserve">
+        <value>Modern Light</value>
+    </data>
+    <data name="Theme_ModernDark" xml:space="preserve">
+        <value>Modern Dark</value>
+    </data>
 </root>

Wave/tailwind.config.js

@@ -16,8 +16,10 @@ module.exports = {
             '5xl': '4.210rem'
         },
         fontFamily: {
-            heading: 'Nunito Sans',
+            heading: ["var(--wave-heading-font)", ...defaultTheme.fontFamily.sans],
-            body: ['Noto Sans Display', ...defaultTheme.fontFamily.sans]
+            body: ["var(--wave-body-font)", ...defaultTheme.fontFamily.sans],
+            modern: ["Tahoma", ...defaultTheme.fontFamily.sans],
+            "modern-heading": ["Verdana"]
         },
         fontWeight: {
             normal: '400',
@@ -30,8 +32,12 @@ module.exports = {
         themes: [
             {
                 "wave-light": {
+                    "--wave-heading-font": "Nunito Sans",
+                    "--wave-body-font": "Noto Sans Display",
+
                     "primary": "#F2E530",
                     "secondary": "#ffb3c8",
+                    "secondary-content": "#0D0D0D",
                     "accent": "#6FD4F2",
                     "neutral": "#A69D21",
 
@@ -44,16 +50,21 @@ module.exports = {
                     "success": "#2CDB00",
                     "warning": "#FFF000",
                     "error": "#B3020E",
+                    "error-content": "#FFFFFF",
 
                     "--rounded-box": "0.5rem",
                     "--rounded-btn": "0.2rem",
                     "--rounded-badge": "0.2rem",
                 }
-            }, 
+            },
             {
                 "wave-dark": {
+                    "--wave-heading-font": "Nunito Sans",
+                    "--wave-body-font": "Noto Sans Display",
+
                     "primary": "#fff133",
                     "secondary": "#DB9AAC",
+                    "secondary-content": "#000000",
                     "accent": "#75dfff",
                     "neutral": "#A69D21",
 
@@ -66,12 +77,79 @@ module.exports = {
                     "success": "#1C8A00",
                     "warning": "#E3D400",
                     "error": "#610107",
+                    "error-content": "#FFFFFF",
 
                     "--rounded-box": "0.5rem",
                     "--rounded-btn": "0.2rem",
                     "--rounded-badge": "0.2rem",
                 }
-            }, "wireframe"
+            },
+            {
+                "modern-light": {
+                    "--wave-heading-font": "Tahoma",
+                    "--wave-body-font": "ui-sans-serif",
+
+                    "primary": "#1e3a8a",
+                    "primary-content": "#FFFFFF",
+                    "secondary": "#fafafa",
+                    "secondary-content": "#1e3a8a",
+                    "accent": "#93c5fd",
+                    "accent-content": "#000000",
+                    "neutral": "#1e40af",
+                    "neutral-content": "#FFFFFF",
+
+                    "base-100": "#FFFFFF",
+                    "base-200": "#f3f4f6",
+                    "base-300": "#e5e7eb",
+                    "base-content": "#000000",
+
+                    "info": "#0ea5e9",
+                    "info-content": "#FFFFFF",
+                    "success": "#22c55e",
+                    "success-content": "#FFFFFF",
+                    "warning": "#f59e0b",
+                    "warning-content": "#000000",
+                    "error": "#b91c1c",
+                    "error-content": "#FFFFFF",
+
+                    "--rounded-box": "0.2rem",
+                    "--rounded-btn": "0.2rem",
+                    "--rounded-badge": "0.2rem"
+                }
+            },
+            {
+                "modern-dark": {
+                    "--wave-heading-font": "Tahoma",
+                    "--wave-body-font": "ui-sans-serif",
+                    
+                    "primary": "#60a5fa",
+                    "primary-content": "#000000",
+                    "secondary": "#374151",
+                    "secondary-content": "#60a5fa",
+                    "accent": "#93c5fd",
+                    "accent-content": "#000000",
+                    "neutral": "#2563eb",
+                    "neutral-content": "#FFFFFF",
+
+                    "base-100": "#4b5563",
+                    "base-200": "#1f2937",
+                    "base-300": "#111827",
+                    "base-content": "#FFFFFF",
+
+                    "info": "#0ea5e9",
+                    "info-content": "#FFFFFF",
+                    "success": "#22c55e",
+                    "success-content": "#FFFFFF",
+                    "warning": "#f59e0b",
+                    "warning-content": "#000000",
+                    "error": "#b91c1c",
+                    "error-content": "#FFFFFF",
+
+                    "--rounded-box": "0.2rem",
+                    "--rounded-btn": "0.2rem",
+                    "--rounded-badge": "0.2rem"
+                }
+            }
         ],
         darkTheme: "wave-dark"
     }

Wave/wwwroot/css/main.css

@@ -18,7 +18,7 @@ @font-face {
 @tailwind utilities;
 
 @layer base {
-    html, body {
+    body {
         @apply font-body;
     }
     h1, h2, h3, h4, h5, h6 {