Developing

Some useful information and tools if you're interested in working on the theme or making your own customisations.

Useful Info

Most info is contained in CONTRIBUTING.md.

Useful Tools

These are some of the tools I use frequently. Vaguely ranked from most useful.

• Windows UI Figma toolkit - This is the primary source for almost everything on the theme. Extremely useful for finding which materials to use and sizing and positioning.
• Character Map UWP Windows Store app - Easily search and preview all the icons available in the icon fonts. Some icons also have alternative names to help with finding the correct icon. Ensure you select 'Segoe Fluent Icon' (not Segoe MDL2 Assets).
• Segoe Fluent Icons font on MS Docs - Like above, but worse.
• Design toolkits and samples for Windows apps on Microsoft Docs - This page is more or less just links for some of the above tools.

Extensions for VS Code

• EditorConfig for VS Code - This extension is required. It helps ensure some formatting is standardised over the whole project.
• Sass - Syntax highlighting and IntelliSense for Sass.

Emulating a focused page

Needed to theme some elements like the search bar

1. Open Developer Tools
2. On the Elements page, press ESC if the console isn't already open
3. Click the 3 vertical ellipses on the left side of the console and select Rendering from the menu
4. Scroll down the page (about half way) and check Emulate a focused page

Alternative method

1. setTimeout(function(){ debugger; }, 5000); - Paste in console to pause script execution after 5 seconds. Resume execution with F8. Automatic theme reloading will not work with this method.