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

- Explain the theming system in the web dashboard
- Describe how to customize colors using flex_color_scheme
- Provide instructions for changing font and spacing
- Include file paths and code examples for theming customization

Author: fulleni

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

@@ -0,0 +1,48 @@
+---
+title: Theming & Customization
+description: A developer's guide to customizing the visual appearance of the web dashboard.
+---
+
+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.
+
+### Theming with `flex_color_scheme`
+
+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.
+
+The core of the theming is in the `lightTheme()` and `darkTheme()` functions in `app_theme.dart`.
+
+### 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.