diff --git a/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_card.dart b/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_card.dart
index a82daf0b12a..8195614249d 100644
--- a/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_card.dart
+++ b/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_card.dart
@@ -10,6 +10,7 @@ import 'package:smooth_app/knowledge_panel/knowledge_panels/knowledge_panel_expa
 import 'package:smooth_app/knowledge_panel/knowledge_panels/knowledge_panel_group_card.dart';
 import 'package:smooth_app/knowledge_panel/knowledge_panels/knowledge_panel_page.dart';
 import 'package:smooth_app/knowledge_panel/knowledge_panels/knowledge_panel_summary_card.dart';
+import 'package:smooth_app/widgets/smooth_scaffold.dart';
 
 class KnowledgePanelCard extends StatelessWidget {
   const KnowledgePanelCard({
@@ -54,14 +55,20 @@ class KnowledgePanelCard extends StatelessWidget {
           margin: EdgeInsets.zero,
         ),
         onTap: () {
+          final Brightness? brightness =
+              SmoothBrightnessOverride.of(context)?.brightness;
+
           Navigator.push<Widget>(
             context,
             MaterialPageRoute<Widget>(
-              builder: (BuildContext context) => KnowledgePanelPage(
-                groupElement: group,
-                panel: panel,
-                allPanels: allPanels,
-                product: product,
+              builder: (BuildContext context) => SmoothBrightnessOverride(
+                brightness: brightness,
+                child: KnowledgePanelPage(
+                  groupElement: group,
+                  panel: panel,
+                  allPanels: allPanels,
+                  product: product,
+                ),
               ),
             ),
           );
diff --git a/packages/smooth_app/lib/pages/onboarding/onboarding_flow_navigator.dart b/packages/smooth_app/lib/pages/onboarding/onboarding_flow_navigator.dart
index ca735438bd5..ec497cea7e4 100644
--- a/packages/smooth_app/lib/pages/onboarding/onboarding_flow_navigator.dart
+++ b/packages/smooth_app/lib/pages/onboarding/onboarding_flow_navigator.dart
@@ -192,6 +192,7 @@ class OnboardingFlowNavigator {
       child: Builder(
         builder: (BuildContext context) => SmoothScaffold(
           body: widget,
+          brightness: Brightness.dark,
         ),
       ),
     );
diff --git a/packages/smooth_app/lib/pages/onboarding/reinvention_page.dart b/packages/smooth_app/lib/pages/onboarding/reinvention_page.dart
index 86ae51b205b..cdd6347be3a 100644
--- a/packages/smooth_app/lib/pages/onboarding/reinvention_page.dart
+++ b/packages/smooth_app/lib/pages/onboarding/reinvention_page.dart
@@ -25,6 +25,7 @@ class ReinventionPage extends StatelessWidget {
 
     return SmoothScaffold(
       backgroundColor: backgroundColor,
+      brightness: Brightness.dark,
       body: SafeArea(
         child: Stack(
           children: <Widget>[
diff --git a/packages/smooth_app/lib/pages/onboarding/sample_health_card_page.dart b/packages/smooth_app/lib/pages/onboarding/sample_health_card_page.dart
index ce09f54d7df..4d84d6539a5 100644
--- a/packages/smooth_app/lib/pages/onboarding/sample_health_card_page.dart
+++ b/packages/smooth_app/lib/pages/onboarding/sample_health_card_page.dart
@@ -3,6 +3,7 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:smooth_app/database/local_database.dart';
 import 'package:smooth_app/pages/onboarding/knowledge_panel_page_template.dart';
 import 'package:smooth_app/pages/onboarding/onboarding_flow_navigator.dart';
+import 'package:smooth_app/widgets/smooth_scaffold.dart';
 
 class SampleHealthCardPage extends StatelessWidget {
   const SampleHealthCardPage(this._localDatabase, this.backgroundColor);
@@ -11,13 +12,16 @@ class SampleHealthCardPage extends StatelessWidget {
   final Color backgroundColor;
 
   @override
-  Widget build(BuildContext context) => KnowledgePanelPageTemplate(
-        headerTitle: AppLocalizations.of(context).healthCardUtility,
-        page: OnboardingPage.HEALTH_CARD_EXAMPLE,
-        panelId: 'health_card',
-        localDatabase: _localDatabase,
-        backgroundColor: backgroundColor,
-        svgAsset: 'assets/onboarding/health.svg',
-        nextKey: const Key('nextAfterHealth'),
+  Widget build(BuildContext context) => SmoothBrightnessOverride(
+        brightness: Brightness.dark,
+        child: KnowledgePanelPageTemplate(
+          headerTitle: AppLocalizations.of(context).healthCardUtility,
+          page: OnboardingPage.HEALTH_CARD_EXAMPLE,
+          panelId: 'health_card',
+          localDatabase: _localDatabase,
+          backgroundColor: backgroundColor,
+          svgAsset: 'assets/onboarding/health.svg',
+          nextKey: const Key('nextAfterHealth'),
+        ),
       );
 }
diff --git a/packages/smooth_app/lib/pages/onboarding/welcome_page.dart b/packages/smooth_app/lib/pages/onboarding/welcome_page.dart
index 8d13819db45..f56ff1692ee 100644
--- a/packages/smooth_app/lib/pages/onboarding/welcome_page.dart
+++ b/packages/smooth_app/lib/pages/onboarding/welcome_page.dart
@@ -23,6 +23,7 @@ class WelcomePage extends StatelessWidget {
 
     return SmoothScaffold(
       backgroundColor: backgroundColor,
+      brightness: Brightness.dark,
       body: Column(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         crossAxisAlignment: CrossAxisAlignment.start,
diff --git a/packages/smooth_app/lib/widgets/smooth_scaffold.dart b/packages/smooth_app/lib/widgets/smooth_scaffold.dart
index add92c68ee4..3be5bf5611a 100644
--- a/packages/smooth_app/lib/widgets/smooth_scaffold.dart
+++ b/packages/smooth_app/lib/widgets/smooth_scaffold.dart
@@ -100,7 +100,13 @@ class SmoothScaffoldState extends ScaffoldState {
 
     return AnnotatedRegion<SystemUiOverlayStyle>(
       value: _overlayStyle,
-      child: child,
+      child: Theme(
+        data: Theme.of(context).copyWith(
+          appBarTheme: AppBarTheme.of(context)
+              .copyWith(systemOverlayStyle: _overlayStyle),
+        ),
+        child: child,
+      ),
     );
   }
 
@@ -110,7 +116,9 @@ class SmoothScaffoldState extends ScaffoldState {
   bool get _spaceBehindStatusBar =>
       (widget as SmoothScaffold).spaceBehindStatusBar == true;
 
-  Brightness? get _brightness => (widget as SmoothScaffold).brightness;
+  Brightness? get _brightness =>
+      (widget as SmoothScaffold).brightness ??
+      SmoothBrightnessOverride.of(context)?.brightness;
 
   SystemUiOverlayStyle get _overlayStyle {
     switch (_brightness) {
@@ -130,3 +138,24 @@ class SmoothScaffoldState extends ScaffoldState {
     }
   }
 }
+
+/// Class allowing to override the default [Brightness] of
+/// a [SmoothScaffold].
+class SmoothBrightnessOverride extends InheritedWidget {
+  const SmoothBrightnessOverride({
+    required Widget child,
+    Key? key,
+    this.brightness,
+  }) : super(key: key, child: child);
+
+  final Brightness? brightness;
+
+  @override
+  bool updateShouldNotify(SmoothBrightnessOverride oldWidget) =>
+      brightness != oldWidget.brightness;
+
+  static SmoothBrightnessOverride? of(BuildContext context) {
+    return context
+        .dependOnInheritedWidgetOfExactType<SmoothBrightnessOverride>();
+  }
+}