[Plugin] Theme Engine - a webGui styler

[Skitals]

**Beta**

 

Theme Engine
 A plugin for the unRAID webGui

 

Theme Engine lets you re-style the unRAID webGui. Instead of creating a whole new theme, it adjusts settings that override the theme you are already using. You can adjust as few or as many settings as you like. Mixing and matching the base themes with Theme Engine settings creates endless possibilities. Import one of the included styles, or remix and export your own.

---
How to install

Search for Theme Engine on Community Applications.
-OR- the URL to install manually:

https://github.com/Skitals/unraid-theme-engine/raw/master/plugins/theme.engine.plg

---

How to use

 

To load an included theme, select it under Saved Themes and hit Load.

 

To import a theme (zip file) from the community, paste the url under Import Zip and hit Import. The theme is now available to Load under Saved Themes.

 

To import a theme (zip file) from usb, place the zip file in the folder /boot/config/plugins/theme.engine/themes/ select it under Import Zip and hit Import. The theme is now available to Load under Saved Themes.

 

Note that when you Apply changes to a theme, it applies to your current configuration but does not overwrite the Saved Theme. If you want to update the saved theme, check the checkmark next to "Export to Saved Themes" before hitting Apply. To save it as a new theme, change the Theme Name, check the checkmark, and hit Apply.

 

To export your theme as a zip file, hit Apply to save any changes, toggle on Advanced View, and click "Download current confirguration as Zip File" at the bottom of the page.

 

---

Screenshots

 

Basic View:

 

Advanced View:

 

---
Advanced / Hidden Options
You can inject custom css by creating the following files and enabling custom.css under advanced view. The files, if they exist, are included on every page just above `</style>` in the html head. The custom.css files are independent of the theme engine theme you are using. If custom.css is enabled, it will be included even if theme engine is disabled.

/boot/config/plugins/theme.engine/custom.css

• Will be included in all themes.

/boot/config/plugins/theme.engine/custom-white.css
/boot/config/plugins/theme.engine/custom-black.css
/boot/config/plugins/theme.engine/custom-gray.css
/boot/config/plugins/theme.engine/custom-azure.css

• Will only be included when using the corresponding base theme.

 

 

Edited January 13, 2020 by Skitals
Update for 2020.01.13 release

[levijay]

Great work @Skitals !!

 

I've always wished for something like this in Unraid. Playing around with it now.. now to find a colour scheme  

[Squid]

Done button doesn't work

[Skitals]

3 hours ago, Squid said:

Done button doesn't work

Thanks, just pushed out a fix. Not exactly sure why it's not calling the function on DefaultPageLayout anymore, I included the function (with a different name) in the plugin.

[Squid]

26 minutes ago, Skitals said:

Thanks, just pushed out a fix. Not exactly sure why it's not calling the function on DefaultPageLayout anymore, I included the function (with a different name) in the plugin.

Lol   I know  I looked at it quickly, saw that the function did exist and just threw it into your hands

[Skitals]

Just discovered a bit of an easter egg in my own plugin. custom.css gets parsed as php, and you can easily call values saved in Theme Engine. Take a look at the file /boot/config/plugins/theme.engine/theme.engine.cfg to see the name of the variables for the values you have saved. For example:

 

[ThemeEngine]
enabled="1"
headertext="#9b9b9b"

If you want to use the headertext value to theme another element, an example custom.css would be:

 

.switch-button-background {
    background-color: <?php echo $ThemeEngine['headertext']; ?> !important;
}

This works because custom.css is included at the end /usr/local/emhttp/plugins/theme.engine/include.php where theme.engine.cfg is parsed.

Edited January 9, 2020 by Skitals

[Squid]

31 minutes ago, Skitals said:

custom.css gets parsed as php

OT.  Yeah, I could personally never understand the reluctance of people to use php files with an appropriate header instead of pure css.  Allows CA for instance to use a single file that effectively only has minor changes for each of the 4 built-in themes.

[Ectropian]

Thanks @Skitals looking good!

[poniz]

awesome! thank you!

[Skitals]

I added an option to enable/disable custom.css. If you leave Theme Engine "off" but custom.css "on", you can still use the colors/variables saved in the ui.

 

I will probably hide this and custom variables behind an "advanced view" toggle once I figure out how to do that to match the rest of the unraid ui.

[L0rdRaiden]

10 hours ago, Skitals said:

I added an option to enable/disable custom.css. If you leave Theme Engine "off" but custom.css "on", you can still use the colors/variables saved in the ui.

 

I will probably hide this and custom variables behind an "advanced view" toggle once I figure out how to do that to match the rest of the unraid ui.

Can you add an option to change the background color and the boxes background color?

 

Edited January 10, 2020 by L0rdRaiden

[Raz]

Great plugin!
I've made a Nord inspired theme with it.

 

Imgur Album
Theme Engine settings
CSS File

[Skitals]

4 hours ago, Raz said:

Great plugin!
I've made a Nord inspired theme with it.

 

Imgur Album
Theme Engine settings
CSS File

Looks awesome, I will check it out when I get home. I think my plan is to add an "advanced mode" and allow you to save save custom css in your theme cfg. That way you can export and share a theme like this with one file.

[EliteTech]

9 hours ago, Raz said:

Great plugin!
I've made a Nord inspired theme with it.

 

Imgur Album
Theme Engine settings
CSS File

I noticed there is an export button now. I applied your theme, and made this cfg. Nord-black.cfg

 

Thank you for the theme, and thanks @Skitals for the theme engine.

[Skitals]

The update I'm working on lets you download your theme as a zip with the cfg + custom styling. I have that part working, need to add importing from a zip file. I also have custom styling and additional color options hidden behind an advanced mode toggle.

[Raz]

6 hours ago, Skitals said:

Looks awesome, I will check it out when I get home. I think my plan is to add an "advanced mode" and allow you to save save custom css in your theme cfg. That way you can export and share a theme like this with one file.

Thanks man! I love your plugin anyway. I am going to build A LOT of themes based on famous base16 color palettes and the feature you're planning to add is perfect.

Right now the only problem is that i have to have multiple css files and edit the name if i want to activate a theme with the corresponding css file. With that feature it would be soooo simple to ad a tons of themes (i can help with that!)

[Derek_]

This plugin looks really cool. Raz's post on Reddit brought me here.

 

Next we'll 'need' a 'store' from where to preview and get the themes

 

[Skitals]

On 1/11/2020 at 7:45 PM, Raz said:

Thanks man! I love your plugin anyway. I am going to build A LOT of themes based on famous base16 color palettes and the feature you're planning to add is perfect.

Right now the only problem is that i have to have multiple css files and edit the name if i want to activate a theme with the corresponding css file. With that feature it would be soooo simple to ad a tons of themes (i can help with that!)

 

I'm almost ready to release the update. I unfortunately couldn't get uploading to work so to install a theme a user still need to manually put the files in place. There is now theme-specific styling. It is editable in the gui hidden behind an advanced mode toggle. The theme-specific styling gets saved as a css file, so an advanced theme is composed of two parts. For example NordDark-black.cfg and NordDark-black.css. There is a link in advanced view to download both files in a zip.

 

Would you mind if I included NordDark with the plugin?

 

Attached is a preview toggled to advanced mode.

 

[Derek_]

25 minutes ago, Skitals said:

 

Would you mind if I included NordDark with the plugin?

 

I'm not Raz, but that would be awesome

[Raz]

6 hours ago, Skitals said:

Would you mind if I included NordDark with the plugin?

sure man! I am making some edits to the css file and i have some ideas to make the base theme easier to edit.

Using css variables and a form to edit those variables in the custom.css file, we could edit the theme using only one css file.

This is the refactored custom css file with the latest edits:
EDIT: https://pastebin.com/YnZnRXrY updated css file

I am going to point out that i am using the base16 design architecture. We could pull the themes color from this list https://github.com/chriskempson/base16 and give the users the possibility to select the preferred one.

Another feature could be the option to edit the css variables in a form like you did for the base16 colors:

:root {
  --base00: #2e3440;
  --base01: #3b4252;
  --base02: #434c5e;
  --base03: #4c566a;
  --base04: #d8dee9;
  --base05: #e5e9f0;
  --base06: #eceff4;
  --base07: #8fbcbb;
  --base08: #88c0d0;
  --base09: #81a1c1;
  --base0a: #5e81ac;
  --base0b: #bf616a;
  --base0c: #d08770;
  --base0d: #ebcb8b;
  --base0e: #a3be8c;
  --base0f: #b48ead;
}

Let me know if i can help you with anything 👌🏽

 

Edited January 13, 2020 by Raz

[Raz]

Example of a Solarized Dark theme:

[Skitals]

3 hours ago, Raz said:

Let me know if i can help you with anything 👌🏽
 

I like the idea, but there are still a lot of use cases that will require 2 files (custom styling beyond colors). Good news is I got importing a zip file from usb *or* url working. You will be able to throw up the zips in a github repository or somewhere and share the raw links.

[Raz]

7 minutes ago, Skitals said:

I like the idea, but there are still a lot of use cases that will require 2 files (custom styling beyond colors). Good news is I got importing a zip file from usb *or* url working. You will be able to throw up the zips in a github repository or somewhere and share the raw links.

Ok, what about something like this:

-one base css file provided by the plugin with some edits

-one base css file with css variables for the colors

-one custom empty css for user custom css

?

 

Url upload is pretty neat, so people can share custom themes easily

[Skitals]

46 minutes ago, Raz said:

Ok, what about something like this:

-one base css file provided by the plugin with some edits

-one base css file with css variables for the colors

-one custom empty css for user custom css

?

 

Url upload is pretty neat, so people can share custom themes easily

My thought was instead of having the first 2 being separate files I would simply add "custom" color pickers to the advanced ui, that don't do anything but are available as variables in the custom styling section.

[Raz]

3 minutes ago, Skitals said:

My thought was instead of having the first 2 being separate files I would simply add "custom" color pickers to the advanced ui, that don't do anything but are available as variables in the custom styling section.

Ok, but without a base css file every background will be the color of the base unraid theme