Skip to content

Commit 7d9b80c

Browse files
committed
Docs: Updated appearance settings
1 parent 31f7684 commit 7d9b80c

File tree

2 files changed

+32
-24
lines changed

2 files changed

+32
-24
lines changed

src/routes/docs/customize-settings/appearance/+page.md

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,39 +6,43 @@ title: Appearance
66
import { InfoBar } from "fluent-svelte";
77
</script>
88

9-
The Appearance page in settings allows you to personalize your Files experience with a variety of aesthetic options. For those who love to tinker, we’ll even show you how to manually adjust the settings file for additional background colors and fonts.
9+
The **Appearance** page in settings gives you full control over the look and feel of the Files interface. Whether you're syncing with your system theme or crafting your own custom setup, this page guides you through everything from light/dark mode and transparency to fonts, backgrounds, and themes.
10+
11+
For power users, we'll even walk through advanced customization using the settings file.
1012

1113
## Theme customization
1214

13-
Toggle effortlessly between dark and light mode to match your style or ambient lighting. The "Default" setting syncs with your Windows system theme, ensuring a cohesive visual experience.
15+
Toggle effortlessly between **light** and **dark** mode to match your personal style or environment. Selecting "Default" will sync Files with your Windows system theme for a consistent appearance across apps.
1416

1517
![Light and dark mode split view](/docs-resources/Dark-Light-Mode.png)
1618

17-
1819
## Transparency effects
1920

2021
<InfoBar severity="information">
21-
Please note that a completely transparent window isn't available right now.
22+
A fully transparent window isn't available at this time.
2223
</InfoBar>
2324

24-
Choose your preferred backdrop material to add a layer of transparency to your window background. Opt for Mica Alt for a subtle effect (note: Mica requires Windows 11) or Acrylic for a frosted appearance. To fully appreciate these effects, ensure your background color is set to transparent.
25+
You can adjust the visual flair by choosing a backdrop material:
26+
27+
- **Mica** – A soft, dynamic material that subtly incorporates the desktop wallpaper and theme color. Requires Windows 11.
28+
- **Mica Alt** – A higher-contrast version of Mica for increased visual distinction. Requires Windows 11.
29+
- **Acrylic** – A frosted, blurred transparency effect that creates a glass-like appearance. Supported on Windows 10 and 11.
2530

31+
Tip: For these effects to shine, be sure the app background includes some level of transparency.
2632

2733
## Background color
2834

29-
Personalize the background color of your window from a spectrum of pre-selected shades. For a unique touch, use the color picker to input a custom color or adjust transparency to your liking.
35+
Pick from a curated palette or use the color picker to select a custom color—fully opaque or semi-transparent. You control the vibe.
3036

3137
![Settings dialog](/docs-resources/Settings-Appearance.png)
3238

39+
### Additional background colors (advanced)
3340

34-
### Additional background colors
41+
Want to go further? You can modify areas like the address bar and file pane by editing the settings file directly:
3542

36-
While there isn't an option in the settings UI, you can change the address bar, sidebar, and file area backgrounds by manually editing the settings file:
37-
38-
1. Open Files > Settings > Advanced > Edit settings file. This will open the settings file in your default text editor.
39-
2. Before editing the settings file, you’ll need to close Files by right-clicking the icon in the system tray and clicking on "Quit".
40-
3. The settings file has a JSON format. You can use any text editor to open and modify it.
41-
4. Search for any of the keys listed below and edit the value as desired.
43+
1. Open **Settings > Advanced > Edit settings file**.
44+
2. Close Files completely via the system tray ("Quit") before making edits.
45+
3. Use a text editor to find and adjust any of the keys below.
4246

4347
| Key | Default value |
4448
| ----------------------------------- | ------------- |
@@ -51,15 +55,15 @@ While there isn't an option in the settings UI, you can change the address bar,
5155

5256
## Custom fonts
5357

54-
There isn't an option in the settings UI but you can change the default font by manually editing the value for `AppThemeFontFamily` in the settings file.
58+
While not exposed in the settings UI, you can change the font by modifying the `AppThemeFontFamily` value in the settings file.
5559

5660
## Popular themes
5761

58-
We put together some popular color combinations to help users create custom themes.
62+
Here are a few hand-crafted themes to get you started:
5963

6064
### Glass
6165

62-
The glass theme is best paired with the Acrylic backdrop material.
66+
Pairs beautifully with Acrylic for that translucent, glass-like finish.
6367

6468
| Key | Value |
6569
| ----------------------------------- | ----------- |
@@ -72,7 +76,7 @@ The glass theme is best paired with the Acrylic backdrop material.
7276

7377
### Finder
7478

75-
The finder theme is based on the color scheme in Finder.
79+
Inspired by macOS's Finder.
7680

7781
| Key | Value |
7882
| ----------------------------------- | --------- |
@@ -85,6 +89,8 @@ The finder theme is based on the color scheme in Finder.
8589

8690
### Nord
8791

92+
A modern and moody Arctic-inspired color scheme.
93+
8894
| Key | Value |
8995
| ----------------------------------- | ----------- |
9096
| `AppThemeBackgroundColor` | `#FF1B1F26` |
@@ -96,6 +102,8 @@ The finder theme is based on the color scheme in Finder.
96102

97103
### Dracula
98104

105+
Bold, vibrant, and perfect for dark-mode enthusiasts.
106+
99107
| Key | Value |
100108
| ----------------------------------- | ----------- |
101109
| `AppThemeBackgroundColor` | `#282A36` |
@@ -107,15 +115,15 @@ The finder theme is based on the color scheme in Finder.
107115

108116
## Background image
109117

110-
Files allows you to configure a custom background image or gif using the settings UI. Once selected, Files will update to display your image as a beautiful background, adding a distinctive touch to your workspace. Additionally, you can adjust the image’s opacity and display settings for a truly customized look.
118+
You can personalize Files even further by setting a custom background image—or even a GIF.
111119

112-
![Custom background image](/docs-resources/Background-Image.png)
120+
Once added, Files will use it as your backdrop, allowing additional tweaks to opacity and scaling.
113121

122+
![Custom background image](/docs-resources/Background-Image.png)
114123

115124
### Setting a custom background image
116125

117-
1. Open Files > Settings > Appearance, and scroll down to the "Background image" section.
118-
2. Click on "Browse" and select the image or gif you wish to use.
119-
120-
![Custom background image](/docs-resources/Settings-Appearance-Background-Image.png)
126+
1. Go to **Settings > Appearance**, then scroll to **Background image**.
127+
2. Click **Browse**, then pick your image or GIF file.
121128

129+
![Custom background image](/docs-resources/Settings-Appearance-Background-Image.png)

src/routes/docs/customize-settings/general/+page.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ title: General
66
import { InfoBar } from "fluent-svelte";
77
</script>
88

9-
The General settings page gives you control over core aspects of the Files app experience—from choosing your language and customizing startup behavior to tweaking the appearance of context menus and widgets on the Home page. This section walks you through each setting category and what you can expect when enabling specific features.
9+
The **General** settings page gives you control over core aspects of the Files app experience—from choosing your language and customizing startup behavior to tweaking the appearance of context menus and widgets on the Home page. This section walks you through each setting category and what you can expect when enabling specific features.
1010

1111
## Language
1212

0 commit comments

Comments
 (0)