Skip to content

Theming Unicord for Dummies

Jump to bottom
Thomas May edited this page Jun 9, 2019 · 1 revision

Theming Unicord is designed to be as simple as possible, while still allowing the theme author to do as much as they want to customise their experience. In this guide, we'll be going over writing a basic theme for Unicord, to make it appear more like the actual Discord client.

⚠ This is not a complete theme.

This is not a complete theme, a properly good theme will need a fair bit more work than just this guide, however this should be enough to get you started.

Prerequisites

To follow this guide you will need:

Step 1

Firstly, you're gonna need a folder to keep your theme's files in while you write it. So create a folder, call it whatever you want. In this example, I'm gonna call it example-theme. In this folder we're gonna need a few things:

  • A text document called theme.xaml, this is where the XAML styles for our theme will go.
  • A text document called theme.json, which will store metadata needed for our theme.

The actual name of theme.xaml don't strictly matter, but for the sake of this example, that's what we're going with.

Step 2

Now you've got your workspace setup, open theme.json in your text editor of choice, and paste in the following.

{
    "name": "Discord Colours",
    "short_description": "Gives Unicord a Discord like colour scheme.",
    "author": "<your name>",
    "display_colour": "#FF7289DA"
}

This defines a few things.

  • name is simply the name of your theme, it's shown when you install the theme, and in the themes list, so keep it short.
  • short_description is a simple description of your theme, it's shown when you install a theme.
  • author is simply your name or handle
  • display_colour is the accent colour of your theme, written as #AARRGGBB.

For more info on the format of themes.json, visit the Themes Reference page.

Now, replace "<your name>", and save the file.

Step 3

Now, technically, you have a complete theme! Congratulations! Except it doesn't do anything. Let's change that! Firstly, open theme.xaml, and paste in the following code:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    
    <!-- we'll paste some code here in a moment  -->

    <AcrylicBrush x:Key="SidebarPrimaryAcrylicWindowBrush" BackgroundSource="HostBackdrop" TintOpacity="0.60" FallbackColor="{ThemeResource SystemBaseLowColor}" TintColor="{ThemeResource SystemBaseLowColor}" />
    <AcrylicBrush x:Key="SidebarPrimaryAcrylicElementBrush" BackgroundSource="Backdrop" TintOpacity="0.60" FallbackColor="{ThemeResource SystemBaseLowColor}" TintColor="{ThemeResource SystemBaseLowColor}" />
    <AcrylicBrush x:Key="SidebarSecondaryAcrylicWindowBrush" BackgroundSource="HostBackdrop" TintOpacity="0.80" FallbackColor="{ThemeResource SystemBaseLowColor}" TintColor="{ThemeResource SystemBaseLowColor}" />
    <AcrylicBrush x:Key="SidebarSecondaryAcrylicElementBrush" BackgroundSource="Backdrop" TintOpacity="0.80" FallbackColor="{ThemeResource SystemBaseLowColor}" TintColor="{ThemeResource SystemBaseLowColor}" />
    <SolidColorBrush x:Key="MainBackgroundBrush" Color="{ThemeResource SystemChromeMediumLowColor}"/>
    <SolidColorBrush x:Key="ErrorTextForegroundBrush" Color="{ThemeResource SystemAccentColor}"/>
</ResourceDictionary>

Now, let's open the Fluent XAML Theme Editor. You'll see something like this:

xaml theme editor

So let's change some colours!

changed colours

Here I've defined Discord's colour palette, from the Discord Branding page. Now, we can export this XAML, and paste it into theme.xaml, replacing the comment. And you're done!

Step 4

Now, we just need to zip it up! If you have 7-Zip installed, select all files, and hit 7-zip > Add to "example-theme.zip", otherwise, select all files, hit Send to... > Compressed (zipped) folder. And you're done!

Step 5

Time to test your theme! Open Unicord, open Settings, open Themes, hit the + and find the zip archive you just created. Hit install, select and relaunch! If everything's gone to plan, you should have a more discord-like colour scheme, now in Unicord!

result

Obviously it needs some work, and doesn't look great. But, it works, and I'll leave the touch ups to you!

Helpful resources

Clone this wiki locally