How to Add Dark Mode to Power Apps

Dark mode isn't just a nice-to-have anymore - users expect it. In this tutorial, you'll learn how to add a professional dark/light mode toggle to your Power Apps in about 10 minutes.

What you'll build:

• A working dark/light mode toggle
• Colors that automatically switch when the theme changes
• A professional-looking app that respects user preferences

Time needed: ~10 minutes

The Quick Way: Use an App Shell

The fastest way to add dark mode is to use a PowerLibs App Shell that has it built-in. These components handle all the complexity for you.

Step 1: Go to App Shells

Visit the App Shells section and find one of these components:

• Responsive App Shell Dark & Light - For apps that need to work on mobile too
• App Shell Dark & Light Mode - For desktop-focused apps

Step 2: Customize Your Settings

Click on your chosen App Shell and use the Settings tab to configure:

1. App Name - Your app's title shown in the header
2. Navigation Items - Add your menu items (Home, Settings, etc.)
3. Icons - Choose from default Power Apps icons or use custom ones from PowerIcons.dev

The colors will automatically adjust based on dark/light mode - you don't need to set two color schemes.

Step 3: Copy the YAML Code

Switch to the YAML tab and click the copy button. This copies everything you need.

Step 4: Paste into Power Apps

1. Open Power Apps Studio
2. Right-click in the Tree view panel
3. Select "Paste code"

The entire app shell appears with the theme toggle already working.

Step 5: Add the OnStart Code

Switch to the Instructions tab in PowerLibs. You'll see OnStart code that looks like this:

// Add this to App.OnStart
Set(varDarkMode, false);
Set(varBgColor, If(varDarkMode, "#1a1a2e", "#ffffff"));
Set(varTextColor, If(varDarkMode, "#ffffff", "#1a1a2e"));
Set(varSidebarBg, If(varDarkMode, "#16213e", "#f8fafc"));

Copy this code and add it to your App's OnStart property.

Step 6: Done!

Your app now has working dark mode. Click the theme toggle button in the header to switch between light and dark.

The Manual Way: Add Dark Mode to Any App

If you want to add dark mode to an existing app or build it yourself, here's how.

Step 1: Create Theme Variables

Add these variables to your App.OnStart:

// Theme toggle (false = light, true = dark)
Set(varDarkMode, false);

// Background colors
Set(varBgPrimary, If(varDarkMode, "#0f172a", "#ffffff"));
Set(varBgSecondary, If(varDarkMode, "#1e293b", "#f1f5f9"));

// Text colors  
Set(varTextPrimary, If(varDarkMode, "#f8fafc", "#0f172a"));
Set(varTextSecondary, If(varDarkMode, "#94a3b8", "#64748b"));

// Accent color (same for both themes usually)
Set(varAccentColor, "#3b82f6");

Step 2: Create a Toggle Button

Add a button or icon that toggles the theme:

// OnSelect property of your toggle button
Set(varDarkMode, !varDarkMode);

// Re-run the color assignments
Set(varBgPrimary, If(varDarkMode, "#0f172a", "#ffffff"));
Set(varBgSecondary, If(varDarkMode, "#1e293b", "#f1f5f9"));
Set(varTextPrimary, If(varDarkMode, "#f8fafc", "#0f172a"));
Set(varTextSecondary, If(varDarkMode, "#94a3b8", "#64748b"));

Step 3: Apply Variables to Your Components

Instead of hardcoding colors, use your variables:

For example, set your screen's Fill property to:

varBgPrimary

And text labels' Color property to:

varTextPrimary

Step 4: Test It

Click your toggle button. All components using the variables will switch colors instantly.

Tips for Better Dark Mode

Use Sufficient Contrast

Dark mode isn't just "invert everything". Make sure:

• Text is easily readable against backgrounds
• Interactive elements stand out
• Don't use pure black (#000000) - use dark grays like #0f172a

Don't Forget Borders

In light mode, you might have subtle gray borders. In dark mode, you'll need lighter borders:

Set(varBorderColor, If(varDarkMode, "#334155", "#e2e8f0"));

Consider Images and Icons

Icons and images might need adjustment:

• SVG icons can have their colors changed with formulas
• For images, consider having dark/light variants
• Or use a slight overlay to reduce brightness in dark mode

Next Steps

Now that you have dark mode working:

• Add more screens - They'll all use your theme variables
• Customize the colors - Adjust the hex values to match your brand
• Save user preference - Use SaveData() to remember the user's choice

Related Components

• App Shell Dark & Light Mode - Complete app layout with theme toggle
• Responsive App Shell Dark & Light - Mobile-friendly version
• Navigation Bars - Headers for your app

Have questions about this tutorial? Send feedback and I'll help you out.