HarmonyOS 6 Immersive Lighting and Floating Navigation: Build a Multi-Window PC Workspace with HDS - Devuly | Smart Analytics for Developers & Projects

This article breaks down the immersive lighting and floating navigation capabilities in HDS on HarmonyOS 6 (API 23), and demonstrates how to build a PC-oriented multi-window collaborative system called the “Light-and-Shadow Workspace.” It addresses common issues such as rigid title bars, bottom navigation stuck to the screen edge, and inconsistent visuals across windows. Keywords: HarmonyOS 6, immersive lighting, floating navigation.

Table of Contents

Technical specifications provide a quick implementation snapshot

Parameter	Description
Language	ArkTS / ETS
UI Framework	ArkUI
OS Version	HarmonyOS 6 / API 23
Core Protocols	UIAbility, Window Management, AppStorage state synchronization
Core Dependencies	`@kit.UIDesignKit`, `@kit.ArkUI`, `@kit.AbilityKit`, `@kit.BasicServicesKit`
GitHub Stars	Not provided in the original article

HarmonyOS 6 elevates visual feedback into a system-level capability

HarmonyOS 6 introduces systemMaterialEffect in @kit.UIDesignKit, allowing title bars and tabs to move beyond flat colors or simple blur effects and adopt reflections, glow, and depth that resemble a physical lighting model.

For PC scenarios, the value of this capability goes beyond visual polish. It directly improves focus awareness, navigation recognition, and spatial hierarchy in multi-window workflows, especially in document, spreadsheet, presentation, and whiteboard workspaces that require frequent switching.

Image description inserted here AI Visual Insight: This image presents an immersive UI style that uses a dark background with bright illuminated highlights. Its key visual traits include a central light source that diffuses outward and soft edge transitions. This makes it a strong unified visual language for title bars, floating navigation, and content backgrounds, and reflects API 23 support for glassmorphism and spatial lighting effects.

Two core capabilities define the next-generation workspace UI together

Immersive lighting defines the material quality. Floating navigation defines the interaction skeleton. When combined, they unify the title bar, bottom tabs, and window edges under a single visual system.

The typical characteristics of floating navigation include lifting the UI away from the bottom screen edge, preserving whitespace around it, supporting multiple transparency levels, and remaining compatible with system gesture areas and safe-area avoidance logic.

import { SystemMaterialEffect } from '@kit.UIDesignKit';

// Core configuration: enable immersive lighting material
const materialStyle = {
  systemMaterialEffect: SystemMaterialEffect.IMMERSIVE // Enable physical lighting effect
};

This code injects system-level immersive lighting material capability into HDS components.

The “Light-and-Shadow Workspace” uses a layered architecture to organize UI and window capabilities

The project is built on four layers: the HDS component layer, the ArkUI rendering layer, the window management layer, and the global state synchronization layer. The advantage of this separation is that visual effects, interaction logic, and window lifecycle management remain decoupled.

The main window carries the immersive background and workspace content, while subwindows host utility panels such as notes and a calculator. They share theme color, focus state, and lighting pulse signals through AppStorage, enabling visual linkage across windows.

Dependency declarations must cover both the design system and the capability framework

{
  "dependencies": {
    "@kit.UIDesignKit": "^6.1.0",
    "@kit.ArkUI": "^6.1.0",
    "@kit.AbilityKit": "^6.1.0",
    "@kit.BasicServicesKit": "^6.1.0"
  }
}

This configuration declares UI, window, and basic service dependencies in oh-package.json5.

Window initialization determines whether immersive visuals can actually work

On PC, the key to building an immersive workspace is not to start with components, but to configure the window first. You need to enable free-form windows, hide the system title bar, apply rounded corners and shadows, and set the background to transparent. Otherwise, the lighting effect cannot extend to the window edges.

In addition, safe areas and system bar colors must be configured in sync. Otherwise, the immersive title bar region will be visually split by the system bar color block, breaking overall consistency.

import { UIAbility } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  async onWindowStageCreate(windowStage: window.WindowStage) {
    const mainWindow = windowStage.getMainWindowSync();

    await mainWindow.setWindowSizeType(window.WindowSizeType.FREE); // Enable free-form window
    await mainWindow.setWindowTitleBarEnable(false); // Hide the system title bar
    await mainWindow.setWindowShadowEnabled(true); // Enable shadow to enhance depth
    await mainWindow.setWindowCornerRadius(12); // Set rounded corners
    await mainWindow.setWindowBackgroundColor('#00000000'); // Transparent background allows lighting effects to pass through
  }
}

This code completes the minimum required initialization for an immersive PC window.

The immersive lighting title bar establishes focus awareness and branded theming

HdsNavigation is well suited for the top title bar. By combining SystemMaterialEffect.IMMERSIVE with dynamic theme colors, the title bar can switch its dominant lighting color across workspaces and strengthen edge glow when the window becomes active.

A practical approach is to listen for windowFocusChange. When the window gains focus, trigger a short lighting pulse. When it loses focus, reduce transparency and highlight intensity to minimize distraction.

The title bar theme color should be synchronized to global state

// Synchronize global theme color and visual state when focus changes
mainWindow.on('windowFocusChange', (isFocused: boolean) => {
  AppStorage.setOrCreate('window_focused', isFocused); // Record window focus
  if (isFocused) {
    AppStorage.setOrCreate('global_light_pulse', Date.now()); // Trigger pulse animation
  }
});

This code broadcasts focus state and lighting trigger signals when the window becomes active.

Floating tab navigation redefines the spatial relationship of the bottom action area

HdsTabs can be used to build floating bottom tabs. In practice, you should lift the navigation container away from the bottom edge, add left and right margins, and stack three background layers: frosted glass, theme tint diffusion, and highlight gradient. This creates a true floating card effect.

To support different user preferences, transparency should offer three levels: strong, balanced, and weak. When the window loses focus, transparency should automatically decrease. When hovered, it should increase slightly, giving mouse interaction on PC a stronger sense of feedback.

enum TransparencyLevel {
  STRONG = 0.85,
  BALANCED = 0.70,
  WEAK = 0.55
}

// Adjust transparency based on interaction state
this.navTransparency = isHover
  ? Math.min(this.navTransparency + 0.1, TransparencyLevel.STRONG)
  : TransparencyLevel.BALANCED;

This code controls the material intensity of floating navigation in hover and normal states.

Safe-area avoidance is a prerequisite for stable floating navigation

If you ignore the bottom navigation indicator area, content will overlap with the floating tabs. The correct approach is to use getWindowAvoidArea to retrieve the bottom avoidance height, and then add dynamic padding to the content area.

Multi-window lighting synchronization prevents tool windows from feeling disconnected

After HarmonyOS PC added free-form window support, it became easy for the main window and subwindows to drift into separate visual styles. The solution is to create a WindowManager singleton that centrally creates, tracks, and destroys subwindows while synchronizing theme color and focus state.

When the main window moves, utility windows can follow based on an offset. When a subwindow becomes active, it can trigger localized edge glow as well. This keeps the entire workspace visually unified in multitasking scenarios.

// Keep the tool window at a relative position when the main window moves
this.mainWindow?.on('windowRectChange', (data) => {
  if (data.rectChangeReason === window.RectChangeReason.MOVE) {
    const rect = this.mainWindow?.getWindowProperties().windowRect;
    if (rect) {
      subWindow.moveWindowTo({ x: rect.left + 100, y: rect.top + 100 }); // Follow the main window
    }
  }
});

This code implements position synchronization between the subwindow and the main window.

Performance optimization and fallback strategies must come before large-scale rollout

Large blur areas, continuous breathing animations, and layered shadows consume GPU resources. It is best to reduce lighting intensity in dark mode, pause high-frequency animations when the window loses focus, and disable rendering in non-visible areas.

In accessibility mode, you should proactively downgrade glassmorphism effects. High-contrast environments need clear boundaries and stable text contrast more than complex material layers.

if (AppStorage.get
<boolean>('high_contrast_mode')) {
  this.navTransparency = 1.0; // Disable translucency in high-contrast mode
  // Remove blur and backdropBlur here as well, and replace them with a solid background
}

This code applies a visual fallback strategy in accessibility or high-contrast mode.

FAQ provides structured answers to common implementation questions

Q1: What is the most critical integration point for immersive lighting in HarmonyOS 6?

A: The core is to combine HDS components with systemMaterialEffect: SystemMaterialEffect.IMMERSIVE. Background blur alone is not the same as immersive lighting. You must integrate the system material capability.

Q2: Why do floating tabs behave inconsistently in the emulator?

A: Frosted glass, shadow, and dynamic lighting effects often depend more heavily on real GPU behavior and system material implementation. You should validate the final result on a real device or a HarmonyOS 6-compatible PC emulator.

Q3: What is the simplest way to synchronize themes across multiple windows?

A: Use AppStorage to maintain the global theme color, focus state, and lighting pulse timestamp. For small and medium-sized applications, this is lighter than complex inter-window communication and better suited for rapid validation.

Core summary captures the implementation outcome

This article rebuilds an immersive lighting title bar, floating tab navigation, and multi-window lighting synchronization solution based on HarmonyOS 6 API 23 and the HDS design system. It provides practical ArkTS code, performance optimization guidance, and fallback strategies to help developers quickly ship a high-quality collaborative PC interface.