Hero Rocket Background — Dark Mode on Desktop and Portrait Mobile

The homepage hero in Astro Rocket has a large rocket icon sitting quietly in the background in dark mode. It is low-opacity, centered behind the content, and colored with the active brand color — so it adapts automatically when you switch themes. It appears on desktop at all orientations and on mobile when the screen is in portrait mode. In light mode it is never shown.

How it works

The rocket is a plain inline SVG rendered inside the Hero component. It is absolutely positioned to fill the hero section, centred both horizontally and vertically, and placed below all content with pointer-events-none so it never interferes with clicks or text selection.

The visibility is controlled entirely with Tailwind utility classes on the wrapper:

<div class="pointer-events-none absolute inset-0 hidden dark:portrait:flex dark:lg:flex items-center justify-center">

• hidden — invisible by default on all screen sizes and orientations
• dark:portrait:flex — visible on portrait-oriented screens (typically phones held upright) when dark mode is active
• dark:lg:flex — visible at the lg breakpoint (1024 px) or wider when dark mode is active

The two dark-mode rules are additive: a tablet held in landscape at lg width satisfies dark:lg:flex; a phone held upright satisfies dark:portrait:flex. Neither rule fires in light mode. No JavaScript is involved.

The SVG

The icon is the Lucide rocket, rendered with fill="none" and stroke="currentColor" so it inherits its color from the text color of its parent:

<svg
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="0.75"
  stroke-linecap="round"
  stroke-linejoin="round"
  class="w-[min(55vw,420px)] portrait:w-[min(80vw,420px)] h-[min(55vw,420px)] portrait:h-[min(80vw,420px)] text-brand-500 opacity-[0.27]"
>
  <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/>
  <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/>
  <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/>
  <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>
</svg>

A few things worth noting:

• stroke-width="0.75" — thinner than the default Lucide stroke. At 420 px the paths are large, so a thinner stroke keeps the icon from looking heavy.
• w-[min(55vw,420px)] — the base size: scales with the viewport up to a maximum of 420 px on desktop.
• portrait:w-[min(80vw,420px)] — on portrait screens the icon grows to 80 vw (still capped at 420 px). A phone in portrait mode is narrow, so the larger fraction fills the background more convincingly without exceeding the cap.
• opacity-[0.27] — low enough to read as background decoration, high enough to be clearly visible against the dark hero gradient beneath it.

Color follows the theme automatically

The SVG uses stroke="currentColor", which inherits from the text-brand-500 class on the element. brand-500 is a CSS custom property — not a fixed hex value. When the user switches from blue to violet, orange, or any of the other available themes, the property updates and the rocket stroke color updates with it. No extra code is needed. See How Astro Rocket’s Design System Works for a full walkthrough of every colour token.

The prop

The feature is controlled by a showRocketBg boolean prop on the Hero component. The default is false, so adding the prop enables it:

<Hero layout="centered" size="xl" showRocketBg showScrollIndicator ...>

How to turn it off

Remove the showRocketBg prop from the <Hero> call in src/pages/index.astro:

<!-- Before -->
<Hero layout="centered" size="xl" class="hero-dark-gradient" showScrollIndicator showRocketBg descriptionClass="max-w-3xl">

<!-- After -->
<Hero layout="centered" size="xl" class="hero-dark-gradient" showScrollIndicator descriptionClass="max-w-3xl">

One word removed, feature gone. No CSS to clean up, no variables to reset.

Why portrait mobile and dark mode only

On landscape mobile and small tablets the screen is wide but short, so a large centered icon would compete directly with the hero text and buttons. Portrait mode gives the rocket enough vertical room to sit comfortably behind the content without crowding it.

Light mode was considered but the icon at 0.27 opacity on a light background reads more as clutter than atmosphere. The dark hero gradient — brand colour fading to black — gives the rocket exactly the right contrast to feel intentional. See Hero Gradient — Brand to Black, Dark Mode Only for how that gradient is set up.

Other hero features

The rocket background is one layer in a set of features that build up the homepage hero:

• Hero Gradient — Brand to Black, Dark Mode Only — the dark gradient underneath the rocket that makes it pop.
• Hero Scroll Indicator — two bouncing chevrons that appear after the hero animation and fade out the moment you scroll.
• Why Astro Rocket Uses sessionStorage for Dark Mode — how the dark mode choice is stored so the rocket appears on every page load without a flash.
• Getting Started with Astro Rocket — everything you need to go from install to a live site.