docs(web-dashboard): update theming and customization guide

- Refactor guide structure and content for better clarity
- Emphasize centralized theming approach using shared ui_kit package
- Redirect to new Architecture & Customization section for hands-on guide
- Remove detailed theming instructions and link to new comprehensive tutorial

Author: fulleni

src/content/docs/web-dashboard/guides/theming-and-customization.mdx

@@ -1,48 +1,17 @@
 ---
-title: Theming & Customization
+title: 'Guide: Theming & Customization'
 description: A developer's guide to customizing the visual appearance of the web dashboard.
 ---
+import { Aside } from '@astrojs/starlight/components';
 
-The web dashboard's visual theme is managed through a centralized and flexible system, making it easy to customize the appearance to match your brand. The theming is handled within the shared `ui_kit` package, primarily in the `packages/ui-kit/lib/src/theme/app_theme.dart` file.
+The visual appearance of the Web Dashboard—including colors, fonts, and spacing—is managed centrally to ensure consistency with the Mobile Client. This is achieved through a shared `ui_kit` package.
 
-### Theming with `flex_color_scheme`
+Because this is a cross-application concern, the primary, hands-on guide for making theme customizations is located in our new **Architecture & Customization** section. This central guide walks you through the entire process, from taking ownership of the `ui_kit` package to seeing your changes reflected in both the web and mobile apps.
 
-We use the powerful [`flex_color_scheme`](https://pub.dev/packages/flex_color_scheme) package to create and manage our `ThemeData`. This package simplifies the process of creating consistent and beautiful color schemes and component themes.
+<Aside type="tip" title="Start Here for Customization">
+To learn how to properly customize the UI, please follow our comprehensive, step-by-step tutorial:
 
-The core of the theming is in the `lightTheme()` and `darkTheme()` functions in `app_theme.dart`.
+[**Guide: Customizing the UI Theme &rarr;**](/docs/architecture/03-guide-customizing-the-ui/)
+</Aside>
 
-### Customizing Colors
-
-You can change the entire color palette of the dashboard by modifying the `FlexScheme` used.
-
-1.  **Open `app.dart`:** Navigate to `apps/flutter-news-app-web-dashboard-full-source-code/lib/app/view/app.dart`.
-2.  **Locate the Theme Generation:** Find the `build` method of the `_AppViewState` widget.
-3.  **Change the `FlexScheme`:** The `accentTheme` from the user's settings is converted to a `FlexScheme`. You can change which `AppAccentTheme` enum value is the default in the `AppBloc` or modify the `toFlexScheme` extension to use different schemes from the `FlexScheme` enum.
-
-    ```dart title="lib/app/view/app.dart"
-    extension AppAccentThemeExtension on AppAccentTheme {
-      FlexScheme get toFlexScheme {
-        switch (this) {
-          case AppAccentTheme.defaultBlue:
-            // Change this to another FlexScheme, e.g., FlexScheme.deepPurple
-            return FlexScheme.materialHc; 
-          case AppAccentTheme.newsRed:
-            return FlexScheme.redWine;
-          case AppAccentTheme.graphiteGray:
-            return FlexScheme.outerSpace;
-        }
-      }
-    }
-    ```
-
-### Customizing Fonts
-
-The application uses Google Fonts by default. You can change the default font or add new ones.
-
-1.  **Open `app_theme.dart`:** Navigate to `packages/ui-kit/lib/src/theme/app_theme.dart`.
-2.  **Modify `_getGoogleFontTextTheme`:** This function maps a font family name (string) to a `GoogleFonts` text theme function. You can add new cases for other fonts available in the `google_fonts` package.
-3.  **Update `_supportedFontFamilies`:** In `apps/flutter-news-app-web-dashboard-full-source-code/lib/settings/view/settings_page.dart`, add the new font family name to the `_supportedFontFamilies` list to make it available in the user's settings.
-
-### Customizing Spacing
-
-Consistent spacing is managed by the `AppSpacing` class in `packages/ui-kit/lib/src/constants/app_spacing.dart`. If you need to adjust the global spacing values (e.g., change the small spacing from `8.0` to `10.0`), you can do so in this file, and the changes will be reflected across the entire application.
+This approach ensures that you learn the correct workflow for modifying shared code, which is the key to unlocking the full power of the toolkit.