How to install and use custom themes with Files app for Windows 10

Files for Windows 10 was recently updated to version 1.5 with a ton of new features and performance improvements.

This new update also introduced support for custom themes which can be manually installed and applied to change the overall feel of the user interface.

Getting Started

First things first, you need to have version 1.5 installed on your Windows 10 PC. Get it here.

In order to select a theme within the app settings, we will create a new xaml resource dictionaries file and place it in the Themes folder in the app’s LocalState folder.

Navigate to this location in the file explorer and leave it open until you are finished with the steps below. Alternatively, Open Run Window (Win + R), paste the line below and hit enter on the keyboard.

C:\Users\%userprofile%\AppData\Local\Packages\49306atecsolution.FilesUWP_et10x9a9vyk8t\LocalState\Themes

Steps to follow

1. Open notepad on your PC and paste in the template located below. Then, save the file as %userprofile%\AppData\Local\Packages\49306atecsolution.FilesUWP_et10x9a9vyk8t\LocalState\Themes\NightTime.xaml
2. Open files app and go to settings > appearance.
3. From the drop-down menu labeled “color scheme“, select your newly installed theme.
4. Restart Files when prompted and your theme will now be loaded in.

Bonus

With the Fluent XAML Theme Editor, you can easily design and load your theme.

Looking for inspirational themes and/or want to upload your own for the community, visit here.

Template

<!-- Free Public License 1.0.0 Permission to use, copy, modify, and/or distribute this code for any purpose with or without fee is hereby granted. -->
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:Windows10version1809="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 7)"
                    xmlns:BelowWindows10version1809="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract, 7)">
    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
            <ResourceDictionary.MergedDictionaries>
                <Windows10version1809:ColorPaletteResources Accent="#FFCC4D11" AltHigh="#FF000000" AltLow="#FF000000" AltMedium="#FF000000" AltMediumHigh="#FF000000" AltMediumLow="#FF000000" BaseHigh="#FFFFFFFF" BaseLow="#FF2F7BAD" BaseMedium="#FF8DBFDF" BaseMediumHigh="#FFA5D0EC" BaseMediumLow="#FF5E9DC6" ChromeAltLow="#FFA5D0EC" ChromeBlackHigh="#FF000000" ChromeBlackLow="#FFA5D0EC" ChromeBlackMedium="#FF000000" ChromeBlackMediumLow="#FF000000" ChromeDisabledHigh="#FF2F7BAD" ChromeDisabledLow="#FF8DBFDF" ChromeGray="#FF76AED3" ChromeHigh="#FF76AED3" ChromeLow="#FF093B73" ChromeMedium="#FF134B82" ChromeMediumLow="#FF266B9F" ChromeWhite="#FFFFFFFF" ListLow="#FF134B82" ListMedium="#FF2F7BAD" />
                <ResourceDictionary>
                    <BelowWindows10version1809:Color x:Key="SystemAccentColor">#FFCC4D11</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemAltHighColor">#FF000000</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemAltLowColor">#FF000000</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemAltMediumColor">#FF000000</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemAltMediumHighColor">#FF000000</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemAltMediumLowColor">#FF000000</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemBaseHighColor">#FFFFFFFF</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemBaseLowColor">#FF2F7BAD</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemBaseMediumColor">#FF8DBFDF</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemBaseMediumHighColor">#FFA5D0EC</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemBaseMediumLowColor">#FF5E9DC6</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeAltLowColor">#FFA5D0EC</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeBlackHighColor">#FF000000</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeBlackLowColor">#FFA5D0EC</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeBlackMediumColor">#FF000000</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeBlackMediumLowColor">#FF000000</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeDisabledHighColor">#FF2F7BAD</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeDisabledLowColor">#FF8DBFDF</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeGrayColor">#FF76AED3</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeHighColor">#FF76AED3</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeLowColor">#FF093B73</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeMediumColor">#FF134B82</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeMediumLowColor">#FF266B9F</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeWhiteColor">#FFFFFFFF</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemListLowColor">#FF134B82</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemListMediumColor">#FF2F7BAD</BelowWindows10version1809:Color>
                    <Color x:Key="SystemChromeAltMediumHighColor">#CC0D2644</Color>
                    <Color x:Key="SystemChromeAltHighColor">#FF2F7BAD</Color>
                    <Color x:Key="SystemRevealListLowColor">#FF134B82</Color>
                    <Color x:Key="SystemRevealListMediumColor">#FF2F7BAD</Color>
                    <AcrylicBrush x:Key="SystemControlAcrylicWindowBrush" BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemChromeAltHighColor}" TintOpacity="0.8" FallbackColor="{ThemeResource SystemChromeMediumColor}" />
                    <!-- Override system shape defaults -->
                    <CornerRadius x:Key="ControlCornerRadius">2,2,2,2</CornerRadius>
                    <CornerRadius x:Key="OverlayCornerRadius">4,4,4,4</CornerRadius>
                    <!-- Override system borders -->
                    <Thickness x:Key="MenuBarItemBorderThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="GridViewItemMultiselectBorderThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="CheckBoxBorderThemeThickness">1</Thickness>
                    <x:Double x:Key="GridViewItemSelectedBorderThemeThickness">1</x:Double>
                    <x:Double x:Key="RadioButtonBorderThemeThickness">1</x:Double>
                    <Thickness x:Key="ButtonBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="CalendarDatePickerBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="TimePickerBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="DatePickerBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="ToggleSwitchOuterBorderStrokeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="RepeatButtonBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="SearchBoxBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="ToggleButtonBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="TextControlBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="ButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="RepeatButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="ToggleButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="AppBarEllipsisButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="AppBarButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="AppBarToggleButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="ListViewItemRevealBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="GridViewItemRevealBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="ComboBoxItemRevealBorderThemeThickness">1,1,1,1</Thickness>
                    <x:Double x:Key="PersonPictureEllipseBadgeStrokeThickness">1</x:Double>
                    <!-- Override system generated accent colors -->
                    <Color x:Key="SystemAccentColorDark1">#FFD4632D</Color>
                    <Color x:Key="SystemAccentColorDark2">#FFDC7949</Color>
                    <Color x:Key="SystemAccentColorDark3">#FFE58E66</Color>
                    <Color x:Key="SystemAccentColorLight1">#FFB93E0E</Color>
                    <Color x:Key="SystemAccentColorLight2">#FFA62F0A</Color>
                    <Color x:Key="SystemAccentColorLight3">#FF932107</Color>
                    <Color x:Key="RegionColor">#FF0D2644</Color>
                    <SolidColorBrush x:Key="RegionBrush" Color="{StaticResource RegionColor}" />
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
        <ResourceDictionary x:Key="Light">
            <ResourceDictionary.MergedDictionaries>
                <Windows10version1809:ColorPaletteResources Accent="#FFCC4D11" AltHigh="#FFFFFFFF" AltLow="#FFFFFFFF" AltMedium="#FFFFFFFF" AltMediumHigh="#FFFFFFFF" AltMediumLow="#FFFFFFFF" BaseHigh="#FF000000" BaseLow="#FF7CBEE0" BaseMedium="#FF3282A8" BaseMediumHigh="#FF005A83" BaseMediumLow="#FF196E96" ChromeAltLow="#FF005A83" ChromeBlackHigh="#FF000000" ChromeBlackLow="#FF7CBEE0" ChromeBlackMedium="#FF005A83" ChromeBlackMediumLow="#FF3282A8" ChromeDisabledHigh="#FF7CBEE0" ChromeDisabledLow="#FF3282A8" ChromeGray="#FF196E96" ChromeHigh="#FF7CBEE0" ChromeLow="#FFC1E9FE" ChromeMedium="#FFB3E0F8" ChromeMediumLow="#FFC1E9FE" ChromeWhite="#FFFFFFFF" ListLow="#FFB3E0F8" ListMedium="#FF7CBEE0" />
                <ResourceDictionary>
                    <BelowWindows10version1809:Color x:Key="SystemAccentColor">#FFCC4D11</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemAltHighColor">#FFFFFFFF</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemAltLowColor">#FFFFFFFF</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemAltMediumColor">#FFFFFFFF</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemAltMediumHighColor">#FFFFFFFF</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemAltMediumLowColor">#FFFFFFFF</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemBaseHighColor">#FF000000</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemBaseLowColor">#FF7CBEE0</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemBaseMediumColor">#FF3282A8</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemBaseMediumHighColor">#FF005A83</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemBaseMediumLowColor">#FF196E96</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeAltLowColor">#FF005A83</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeBlackHighColor">#FF000000</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeBlackLowColor">#FF7CBEE0</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeBlackMediumColor">#FF005A83</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeBlackMediumLowColor">#FF3282A8</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeDisabledHighColor">#FF7CBEE0</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeDisabledLowColor">#FF3282A8</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeGrayColor">#FF196E96</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeHighColor">#FF7CBEE0</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeLowColor">#FFC1E9FE</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeMediumColor">#FFB3E0F8</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeMediumLowColor">#FFC1E9FE</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemChromeWhiteColor">#FFFFFFFF</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemListLowColor">#FFB3E0F8</BelowWindows10version1809:Color>
                    <BelowWindows10version1809:Color x:Key="SystemListMediumColor">#FF7CBEE0</BelowWindows10version1809:Color>
                    <Color x:Key="SystemChromeAltMediumHighColor">#CCCFEAFF</Color>
                    <Color x:Key="SystemChromeAltHighColor">#FF7CBEE0</Color>
                    <Color x:Key="SystemRevealListLowColor">#FFB3E0F8</Color>
                    <Color x:Key="SystemRevealListMediumColor">#FF7CBEE0</Color>
                    <AcrylicBrush x:Key="SystemControlAcrylicWindowBrush" BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemChromeAltHighColor}" TintOpacity="0.8" FallbackColor="{ThemeResource SystemChromeMediumColor}" />
                    <!-- Override system shape defaults -->
                    <CornerRadius x:Key="ControlCornerRadius">2,2,2,2</CornerRadius>
                    <CornerRadius x:Key="OverlayCornerRadius">4,4,4,4</CornerRadius>
                    <!-- Override system borders -->
                    <Thickness x:Key="MenuBarItemBorderThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="GridViewItemMultiselectBorderThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="CheckBoxBorderThemeThickness">1</Thickness>
                    <x:Double x:Key="GridViewItemSelectedBorderThemeThickness">1</x:Double>
                    <x:Double x:Key="RadioButtonBorderThemeThickness">1</x:Double>
                    <Thickness x:Key="ButtonBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="CalendarDatePickerBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="TimePickerBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="DatePickerBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="ToggleSwitchOuterBorderStrokeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="RepeatButtonBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="SearchBoxBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="ToggleButtonBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="TextControlBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="ButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="RepeatButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="ToggleButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="AppBarEllipsisButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="AppBarButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="AppBarToggleButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="ListViewItemRevealBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="GridViewItemRevealBorderThemeThickness">1,1,1,1</Thickness>
                    <Thickness x:Key="ComboBoxItemRevealBorderThemeThickness">1,1,1,1</Thickness>
                    <x:Double x:Key="PersonPictureEllipseBadgeStrokeThickness">1</x:Double>
                    <!-- Override system generated accent colors -->
                    <Color x:Key="SystemAccentColorLight1">#FFD4632D</Color>
                    <Color x:Key="SystemAccentColorLight2">#FFDC7949</Color>
                    <Color x:Key="SystemAccentColorLight3">#FFE58E66</Color>
                    <Color x:Key="SystemAccentColorDark1">#FFB93E0E</Color>
                    <Color x:Key="SystemAccentColorDark2">#FFA62F0A</Color>
                    <Color x:Key="SystemAccentColorDark3">#FF932107</Color>
                    <RevealBackgroundBrush x:Key="SystemControlHighlightListLowRevealBackgroundBrush" TargetTheme="Light" Color="{ThemeResource SystemRevealListMediumColor}" FallbackColor="{ StaticResource SystemListMediumColor}" />
                    <Color x:Key="RegionColor">#FFCFEAFF</Color>
                    <SolidColorBrush x:Key="RegionBrush" Color="{StaticResource RegionColor}" />
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
        <ResourceDictionary x:Key="HighContrast">
            <StaticResource x:Key="RegionColor" ResourceKey="SystemColorWindowColor" />
            <SolidColorBrush x:Key="RegionBrush" Color="{StaticResource RegionColor}" />
        </ResourceDictionary>
    </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>

Source: GitHub

Download QR-Code

Files App

Developer: Files Community

Price: $8.99