Theming support in Sudonix

[phenomlab]

Most of the work on the daylight Swatch has been completed. However, I did realise quite early on that I’d need to add some unique variables otherwise it meant having to remove functionality from the daylight colour scheme which I didn’t want to do.

I’ve found a way around this hopefully so work will continue tomorrow as time permits.

[phenomlab]

Over the past couple of days, I’ve been making significant headway with this, and the performance benefits are huge. Hoping to release to production in the coming weeks.

[phenomlab]

It’s been a while so I thought I’d provide an update. Bar a couple of small bugs, I’m almost complete with the refactoring of the theming engine and associated code.

During testing, this is a game changer in terms of loading speed. There are essentially two main components

• A “global” CSS file that essentially provides the foundation for all themes.
• The addition of a Swatch - based on CSS variables which contains no CSS. This means that no additional CSS is loaded or removed during theme changes, and also means there is no need to reload the site.
• With minification, the global CSS theme (once unneeded elements are removed) comes in at around 10kb. The Swatch files are literally less than 1Kb

Once I’ve moved this into production, I’ll share the code.

[phenomlab]

Hi All,

I just implemented a raft of new code from DEV to PROD. You will need to reload your browser (ideally a hard refresh) to pick up the new code, styles, and swatches. It’ll be worth the effort - trust me

[phenomlab]

Ugh… Spotted some (really minor) but nothing that’s not easily fixed. I need to implement the final stages also - most of which are code refactoring, and minification.

I’ll post the completed code plus documentation as soon as it’s finished

[JAC]

@phenomlab

[JAC]

@JAC said in Theming support in Sudonix:

@phenomlab

Amazing work Mark

[phenomlab]

@JAC thanks

[phenomlab]

*** NEW *** “FaceTube” theme added

Like the YouTube and Facebook Dark themes ? Well, you can now have both here !!

Enjoy

[Sampo2910]

@phenomlab Awesome!! Love it…

[phenomlab]

@Sampo2910 thanks. I’m going to be cleaning up the code and proving a new post with instructions etc soon. Fully stable now with (I hope) no bugs, so ready for release once I’ve finished the cleanup.

[phenomlab]

*** NEW *** Greybird theme added
For those who like the Ubuntu theme of the same name, this is for you. Not entirely a replica, but pretty close

[phenomlab]

*** NEW *** Tempest theme added

A nice blend of dark colors. Easy on the eyes, and perfect for those who like a bit of darkness in their lives

[phenomlab]

Some minor tweaks have been added to better support mobile views, and also layouts on desktops with larger screens. Most of these will probably go unnoticed, but I’ve spotted them

[phenomlab]

I’m planning on making the theme CSS a bit more flexible in terms of individual assets as one variable currently will change multiple assets - not great from the overall control perspective, so need to address that.

This issue doesn’t manifest itself under dark themes, but is very much visible under light - particular when you want to use a dark header with light text - currently, it’s not visible. I could be selfish and say that light themes are no longer supported… (just kidding)

[phenomlab]

*** NEW *** Twitter (Dim) theme added

For those who like the Twitteresque dim theme.

[phenomlab]

*** NEW *** Anthracite theme added

For those who like a bit of darkness in their lives, but not too much of it

[phenomlab]

I thought I’d better come by here with an update so everyone knows that the Swatch project isn’t abandoned, or has simply “gone cold”. In fact, quite the opposite.

I’ve setup a dev instance on my home network which I’m currently developing against. I’ll put some screenshots up soon, but the Swatch code is currently enjoying a rewrite. The great news is that you’ll get ten times the flexibility you have now meaning greater support for light themes, although the downside is that there isn’t that much backwards compatibility meaning some of my own themes even need to be completely redesigned.

However, this isn’t the end of the world. Once you’re familiar with the classes, it really doesn’t take long at all to create your own themes.

More to follow.

[phenomlab]

Isn’t it annoying when some of the best UI and color schemes come to you out of frustration rather than planning?

I’ll just leave this here

[phenomlab]

@phenomlab said in Theming support in Sudonix:

I thought I’d better come by here with an update so everyone knows that the Swatch project isn’t abandoned, or has simply “gone cold”. In fact, quite the opposite.

I’ve setup a dev instance on my home network which I’m currently developing against. I’ll put some screenshots up soon, but the Swatch code is currently enjoying a rewrite. The great news is that you’ll get ten times the flexibility you have now meaning greater support for light themes, although the downside is that there isn’t that much backwards compatibility meaning some of my own themes even need to be completely redesigned.

However, this isn’t the end of the world. Once you’re familiar with the classes, it really doesn’t take long at all to create your own themes.

More to follow.

I’ll be putting together a video of what the revamped theme will look like very soon - just got some small issues to iron out, and code cleanup beforehand…