Staring at a bright white screen for hours? Your eyes are probably begging for relief.
Learning how to change Figma to dark mode takes less than 30 seconds and can transform your entire design workflow.
The dark theme reduces eye strain during long prototyping sessions, especially in low-light environments.
Figma’s built-in theme settings let you switch between light and dark modes instantly through the Main menu or keyboard shortcuts.
This guide walks you through both methods step by step.
You’ll also learn about the system theme option, enhanced contrast mode for accessibility, and how to troubleshoot common issues when the theme doesn’t apply correctly.
How to Change Figma to Dark Mode
Changing Figma to dark mode switches the interface appearance from light to dark theme using built-in preferences.
Users need this when working in low-light environments or reducing eye strain during long design sessions.
This guide covers 2 methods requiring less than 30 seconds each.
Works on Figma desktop app, web app, Mac, and Windows.
Have you seen the latest Figma statistics?
Discover comprehensive Figma statistics including revenue growth, market share, user demographics, and funding data.
Check them out →Prerequisites
Before switching your Figma theme, confirm you have these ready:
- Figma account (Free, Professional, Organization, or Enterprise plan)
- Access to at least one Figma file
- Figma desktop app or web browser (Chrome, Safari, Firefox, Edge)
- No minimum version required
Time estimate: 30 seconds or less.
Step One: How Do You Access Theme Settings from the Main Menu?
The Main menu contains Preferences where theme options live under Preferences > Theme.
Settings apply immediately to your current device.
Action
- Main menu (top-left hamburger menu icon): Click to open
- Preferences > Theme: Hover to reveal options
- Select “Dark”: Click to apply dark theme instantly
Purpose
The Main menu method gives direct access to all three theme options (Light, Dark, System) in one location.
New files created after switching default to canvas background color #1E1E1E.
Step Two: How Do You Switch to Dark Mode Using Quick Actions?
The Actions menu allows faster theme switching through keyboard shortcuts.
Type “Use dark mode” in the command palette to switch without navigating menus.
Action
- Keyboard shortcut: Press Command + / (Mac) or Control + / (Windows)
- Search field: Type “Use dark mode”
- Select result: Click or press Enter to apply
Purpose
Quick Actions provides the fastest method for users who prefer keyboard navigation over mouse clicks.
Perfect for designers who already use Figma shortcuts for tasks like undoing actions in Figma or zooming in Figma.
Canvas Background Behavior
Dark mode affects the Figma interface and changes default canvas colors for new files.
- Light mode creates files with #F5F5F5 background
- Dark mode creates files with #1E1E1E background
- Existing file backgrounds remain unchanged
To change an existing canvas, you’ll need to adjust the background color manually.
This also affects your workspace when you design a website in Figma or create wireframes in Figma.
System Theme Option
Figma offers a third option that syncs with your operating system preferences.
Select “Use system theme” from the theme menu or Actions palette.
Theme changes automatically when macOS or Windows switches between light and dark modes.
Useful if you already have scheduled theme changes on your computer.
Enhanced Contrast Mode (Accessibility)
Enhanced contrast mode increases text readability and UI element visibility within both light and dark themes.
Aligned with WCAG AA standards for web accessibility.
Action
- Main menu > Preferences > Accessibility settings: Navigate to toggle
- Enhanced contrast mode toggle: Enable the setting
- Alternative: Type “Enhanced contrast mode” in Actions menu (Command + / or Control + /)
Figma enables this automatically when system-level increased color contrast is detected.
Device-Specific Settings
Theme preferences save to individual devices only.
Switching devices requires setting the theme again.
Changes do not sync across browsers or computers logged into the same Figma account.
Collaborators viewing the same file see their own theme settings, not yours.
Verification
Confirm dark mode is active by checking these visual changes:
- Interface background changes to dark gray/black
- Toolbar and panels display with dark backgrounds
- New files default to #1E1E1E canvas color
- Text and icons remain visible with appropriate contrast
If panels look unchanged, try refreshing the browser or restarting the desktop app.
Troubleshooting
Theme option not visible in menu
Update Figma desktop app to latest version or clear browser cache for web app.
Canvas color didn’t change after enabling dark mode
Existing files keep their original canvas color.
Create a new file to see dark default background, or manually change canvas color in existing files.
Theme keeps reverting
Check if “Use system theme” is selected.
Your OS schedule may be switching themes automatically based on time of day.
Related Processes
Once you’ve set up dark mode, explore these related Figma tasks:
- How to make a grid in Figma for layout structure
- How to hide grid in Figma for cleaner previews
- How to add fonts to Figma for typography customization
- How to use components in Figma for reusable elements
- How to prototype in Figma for interactive designs
- How to create a design system in Figma for scalable projects
Dark mode pairs well with user interface design work where you need to reduce eye strain during extended sessions.
Consider testing your designs in both themes to ensure proper usability across light and dark contexts.
FAQ on How To Change Figma To Dark Mode
Does Figma have a dark mode?
Yes. Figma includes a built-in dark theme option in the Preferences menu.
You can switch between light mode, dark mode, or system theme that syncs with your operating system settings on macOS or Windows.
How do I enable dark mode in Figma desktop app?
Click the Main menu (top-left corner), go to Preferences > Theme, and select “Dark.”
The interface appearance changes instantly. Works identically on Mac and Windows desktop applications.
Can I use keyboard shortcuts to switch Figma to dark mode?
Yes. Press Command + / (Mac) or Control + / (Windows) to open Quick Actions.
Type “Use dark mode” and press Enter. Faster than navigating through menus.
Does dark mode work in Figma web app?
Absolutely. The web browser version supports all three theme options: light, dark, and system.
Access theme settings through the same Main menu > Preferences > Theme path in Chrome, Safari, Firefox, or Edge.
Will dark mode sync across my devices?
No. Theme preferences are device-specific and don’t sync across computers or browsers.
You’ll need to enable dark mode separately on each device where you use Figma.
Does enabling dark mode change my canvas background color?
Only for new files. Dark mode sets new file backgrounds to #1E1E1E instead of #F5F5F5.
Existing files keep their original canvas background color unchanged.
What is the system theme option in Figma?
System theme automatically matches Figma’s interface to your OS settings.
When macOS or Windows switches between light and dark modes, Figma follows. Great for scheduled theme changes.
How do I enable enhanced contrast mode in Figma?
Go to Main menu > Preferences > Accessibility settings and toggle Enhanced contrast mode.
This increases text readability and UI element visibility, aligned with WCAG AA standards.
Why does my Figma theme keep reverting to light mode?
You likely have “Use system theme” selected.
Your operating system’s scheduled theme changes are overriding your preference. Select “Dark” directly instead of system theme to lock it in.
Do collaborators see my dark mode settings?
No. Theme settings are personal and device-specific.
Collaborators viewing the same file see their own interface appearance. Your dark mode choice doesn’t affect anyone else’s Figma workspace.
Conclusion
Switching your Figma interface to dark mode takes seconds but pays off during every design session.
Whether you use the Main menu path or the Command + / keyboard shortcut, the process is straightforward on both desktop app and web browser.
The system theme option adds flexibility by syncing with your macOS or Windows preferences automatically.
Don’t forget about enhanced contrast mode if you need better visibility and WCAG AA compliance.
Remember that theme settings stay on your current device only. Collaborators won’t see your changes.
New files will default to the #1E1E1E dark canvas background, while existing projects keep their original colors.
Now your workspace matches how you actually work. Less glare, more focus on what matters: your designs.
