Skip to content

Latest commit

 

History

History
123 lines (70 loc) · 5.83 KB

README.md

File metadata and controls

123 lines (70 loc) · 5.83 KB
Raw
uid
Workshop.TubePlayer.ThemeOverrides

Module 6 - Theme override

In this module, you'll learn how to import a override the Tube Player app's visual appearance.

Uno Platform offers two ways to import app themes.

  1. Import color overrides in C# Markup form - will be imported from the Uno Platform plugin for Figma in this workshop. It will also be provided as is in the export from Figma section - if you do not wish to use Figma).
  2. Create and import a custom Uno DSP theme.

Prepare the theme override

Figma

Export from Figma

  1. Go back to the Figma window.
    If the Uno Platform plugin has closed, press Ctrl+Alt+P to reopen it, or right-click the Video detail screen and select the plugin from the Plugins submenu.

    Figma Resources menu

    Figma context menu

  2. Make sure you have the Export tab open, and from the drop down select Colors Override File. Select C# from the other dropdown if it's not already selected, then click Refresh.

    Figma export color theme

  3. A ResourceDictionary represented in C# Markup will be generated, holding all information about this theme.

    ColorPaletteOverride.cs code contents (collapsed for brevity)

    [!code-csharpColorPaletteOverride.cs]

  4. Select and copy all code in the Figma code editor to the clipboard.

Import C#

  1. Head over to the IDE and delete the ColorPaletteOverride.json file. This won't be needed as you're importing the color overrides from Figma. It's used when importing an Uno DSP theme from an external editor (switch to the DSP tab for more information).

  2. Open the file ColorPaletteOverride.cs located in the Styles folder, and replace the code in its constructor with what you have in your clipboard.

Tip

You can also override the Figma theme from a custom Uno DSP file. Read this to learn more about it.

  1. The theme from Figma looks similar to what the app already looks like as you've used the Material template, let's then make a noticeable color override, so that you can see how the app changes accordingly.
    Change the line that overrides Theme.Colors.Surface.Variant to the following colors:

    -.Add<Color>(Theme.Colors.Surface.Variant, light: "#F2EFF5", dark: "#47464F")
+.Add<Color>(Theme.Colors.Surface.Variant, light: "#F85977", dark: "#67E5AD")

Uno DSP

Create a custom theme and import Uno DSP

Uno DSP is a conventional way to transport design themes between different systems. There are several theme builders out there, the Material Theme Builder is one of them, once a theme is created, it can be exported as a Uno DSP file (it's a .json file that includes all the data needed).

  1. Copy the full path of the ColorPaletteOverride.json file located in the Styles folder and keep it in the clipboard.
    In Visual Studio you can right-click on the file and select Copy Full Path.

  2. Rename the JSON file to ColorPaletteOverride.json.bak, this will be a backup of the original file.

  3. Head over to the Material Theme Builder website, where you will create custom coloring for the Material theme.

  4. On the left navigation bar, click the color in the Primary color choice button.

    Color button in Material Theme Builder

  5. A HCT (Hue Chroma Tone) color picker opens up. Select a color that is visually different than the existing one, so you can see its effect on the app, then hit Close.

    Color picker in Material Theme Builder

  6. On the top-right corner open the Export menu and select Material Theme (JSON).

  7. When prompted to save the file, paste the copied path into the file name text box, then click Save. Otherwise, rename the downloaded file to ColorPaletteOverride.json and move it to the Styles folder.

  8. When building the app, Uno Platform reads the ColorPaletteOverride.json file and applies its color overrides into the ColorPaletteOverride.cs file.

Run the app

Since the colors generated with the project are already set to the Material theme, there will be no noticeable differences in the generated app. However, if you change one of the colors you might spot the differences:

Regular:

App rendered regularly

With color overrides:

App rendered with overrides

Note that the colors will be different than you see in the screenshot if you've created your own Uno DSP theme.

If you try clicking the various search results, the app will crash. This is because we haven't implemented the navigation yet. You are going to address that in the following module.

Restore colors

If you chose the Uno DSP path above, you would now want to restore the app to its original colors.

You can achieve this in the following two ways:

  1. Remove the imported ColorPaletteOverride.json file and remove the bak extension from ColorPaletteOverride.json.back
  2. Delete the ColorPaletteOverride.json file, and replace ColorPaletteOverride.cs with the following:
ColorPaletteOverride.cs code contents (collapsed for brevity)

[!code-csharpColorPaletteOverride.cs]

Next steps

Keep Figma open, as we will be importing additional templates from it in Module 9 - FeedView templates

Previous | Next