Porting a custom UI to os.js

[KevDoy]

I spoke with @andersevenrud last week. I have been working on creating an interactive demo (using static web tech) of an UI I designed for a Linux distro that was heavily inspired by macOS (No longer being developed) some years ago.
My plan is to port this code over to os.js as an attempt to learn what goes into it, and eventually designing new UI and UX elements for the use with os.js from the ground up.

Anders suggested I open this discussion thread when I began my exploration of this task so there can be a record along with any discussion that I or others could benefit from.

Cheers!

[KevDoy]

got the environment set up today and started doing some basic theming. Just focusing on css for the time being.

[KevDoy]

Note to self:
I'm currently just editing the project os.js object files and replacing things and using Git to keep track of the changes. @andersevenrud I would eventually like to make all of these overrides a separate package(s) where it makes sense. I'll likely reach out in here when the time comes.

[andersevenrud]

You can use https://github.com/os-js/osjs-standard-theme as a template for creating a custom theme package.

Sadly, I haven't made any command line utilities to create this for you like with other types of packages and extensions.

Setup

Put it (or clone a fork) into src/packages/MyCustomTheme, then inside this directory:

1. Modify the metadata.json file and change the name to MyCustomTheme or whatever you want it to (does not technically have to be the same as directory, but best practice).
2. Run npm install
3. Run npm run build to build the theme for the first time

Now you can run npm run package:discover inside your osjs root directory to make it available inside your installation.

You can now change the theme inside the settings app and get the default styles, but now wrapped inside your own package.

Development

Now you can modify the theme package source as you see fit and run npm run build to rebuild (inside the package directory) and reload your browser tab to see the changes.

You can also run npm run watch to create a process that automatically rebuild whenever you do modifications.

Notes

This theme can be set as default via configuration of course (or replace the standard provided default one entirely).

---

When it comes to customisations that falls outside a theme then this can be added with a Service Provider package that I could also provide examples to if interested.