[Canada Goose] Fluent

A brand new theme made with Microsoft’s Fluent Design principles in mind, but with some tweaks to make sure it fits the capabilities of handhelds and muOS.

This slick, simple and modern theme comes with support for every resolution handled by muOS, new icons from Fluent Icons set, content and application grid mode support and, as always, Polish version built-in.

Since it uses the new method of including grid images, it’s incompatible with versions of muOS prior to Canada Goose.

Also, before submitting this theme to the muOS theme gallery, I’d like to ask for some help with testing this on devices that use different resolutions than 640x480. So if you’ve got any device that matches this description, I’d be grateful for some quick testing!

Language support: English, Polish, Korean, French, Portuguese (BR), Spanish

Theme download and changelog: Release Fluent [CANADA GOOSE] · TheWalruzz/muos-react-theme-toolkit
Scrappy templates for box art: [Canada Goose] Fluent - #14 by TheWalruzz

3 Likes

please get this on the theme website asap! i need this lol

edit: wait i read your post and i now see you want some testers before uploading it to the site, i’ll install it on my 35H and try it out now

1 Like

Just a quick note - I just updated the theme on GitHub (the link is the same) with some minor tweaks and fixes!

1 Like

If I translate this file and submit a PR, could you also add support for a Korean theme?

The localization on fluent branch uses this updated one:

{
  "charging": "Charging...",
  "menu": {
    "explore": "Content",
    "collections": "Collections",
    "history": "History",
    "applications": "Apps",
    "information": "Information",
    "configuration": "Settings",
    "reboot": "Restart",
    "shutdown": "Shut down"
  },
  "rebooting": "Restarting",
  "shuttingDown": "Shutting down"
}

I should probably remove unused translations for some of the main menu items that aren’t labeled, so I’ll do that in a moment.

Other than that - all contributions are welcome, and I’d love to include screens in Korean in that theme!

EDIT:

I’ve updated the JSON, now it’s just:

{
  "charging": "Charging...",
  "menu": {
    "explore": "Content",
    "collections": "Collections",
    "history": "History",
    "applications": "Apps"
  },
  "rebooting": "Restarting",
  "shuttingDown": "Shutting down"
}

If anyone wants to translate it to their languages - be my guest!

I’ve submitted a pull request. Please check the link.

Ok, I’ve merged it. I’ve already prepared Korean font support for the toolkit, so I’ll do some quick checks and it will be available in a couple of minutes if nothing breaks

EDIT:

Looks good :slight_smile:

1 Like

I’ve updated the release page on GitHub with new theme files. Thanks for your contribution!


It works perfectly!
Clean and simple — just my taste. I’ll make good use of it.

1 Like

The theme has been updated on GitHub. Now with a simple, image-less grid mode for collections!

Hi! I love the theme, but there does not appear to be an icon for portmaster. It just renders as a question mark.

edit: Renaming the External Ports.png inside the archive to External - Ports.png fixed it for me

Yeah, there’s some incompatibilities with folder namings between recent versions of muOS. The version without the dash is the change that works in the latest version. I’ll add the older one for compatibility

Super cool theme! Great job.

For anyone interested, I’ve made a template for Scrappy that works well with my theme.

Just put it in your ARCHIVE folder and install it using Archive Manager (if you installed the latest version of forked Scrappy)

Fluent-Scrappy-Templates-v2.muxzip (13.4 KB)

There are four templates included: screenshot-fluent and screenshot-fluent-no-offset and their 768p counterparts. The first one slightly offsets the screenshot to the right, to compensate for the space taken by the list and to frame the screenshot more to the middle of the remaining space. The second one does not offset the screenshot. This is great for systems that can have vertical screenshots, e.g. DS, Arcade.

5 Likes

I went ahead and tried this theme out on the TrimUI Brick (1024x768) and noticed it looked a little different from the screenshots. I then noticed you were asking for alternate resolution testers, so I figured I’d contribute my experiences. I come from a design background as well, so I’m hoping that makes my feedback more usable.

I’m also not seeing a way for me to attach images… perhaps because my account is new? I’ll link off to imgur.

https://imgur.com/a/XYZXkUW

Size issue with fonts:

I believe the font sizes of the menu options (and other elements) may not be scaled appropriately for this resolution. Switching away from the theme font helps, but not an ideal solution

Issue with element margins:

The spacing between elements appears tighter than it does on the 640x480 screenshots. I think this is because it’s using the same pixel values and as such looks smaller/more dense on the higher resolution screen. My guess is that these values need to be scaled, if that’s not too annoying.

I’ve not yet taken the plunge into muOS theming so I don’t know what level of effort it’d take to correct these issues. I’m happy to continue testing updates and changes as I appreciate the thoughtfulness that went into this theme and would love to see it at its best on the brick!

I’m not sure if there’s a way to make fonts bigger, they’re rendered by muOS and I haven’t found a way to control that using theme schemas and I’m unable to do much at this moment.

I made header and footer scale with screen height, so it’s easier to generate complete packages with my toolkit. Pretty much all of the resolution spacing is calculated in relation to one of dimensions of the screen. I guess it could be improved, but the true solution would be the ability to have bigger fonts displayed in some places, as I’m not sure if making header and footer height equal to dimensions from 640x480 wouldn’t look bad on other resolutions.

I’ll do some more experiments with theme schemas, because maybe I’m missing something.

1 Like

it’s not schema based they are compiled bitmap fonts but you can have different fonts for different resolutions. Take a look at the default theme

1 Like

Hmmm, having different fonts for header and footer for different resolutions might do the trick. But I’ll also try to unify the footer and header height, that might work just right

I’m not sure I follow a resolution of 1024x768 is a 1.6 scale of 640x480 so it naturally is going to have headers and footers 1.6 times larger than the 640x480 resolution if you want things to look the same

I’ve taken Bitter_Bizarros advice and added bigger fonts for other resolutions. Can you test if this one works better for you? Tell me if font is too big or overlaps something.

Fluent Dark.muxthm (6.6 MB)