 Hi, all. Welcome to the Jenkins UI UX Hardfest. Today we have a knowledge transfer session about the Jenkins themes and we will be talking about how to use them and how to create new themes. To this presentation, I will be mostly done by Tobias, who will present the simple theme plugin and I will briefly talk about themes in Jenkins and how we provide support for them. So, this is my screen. Okay, this meetup is a part of the Jenkins UI UX Hardfest, so we currently work now on improving various aspects of Jenkins user experience and the Jenkins themes is one of the topics we are interested to work on and we invite contributors to work on them. So, sometimes people ask what the Jenkins supports themes because when you install Jenkins by default, you just get a classic interface. For example, we can go to CI Jenkins Ion and this is basically the layout you see and the majority of instance has a similar layout and users frequently ask what it's possible to customize Jenkins and improve the UI. For example, I will write logger to put a company logger there or maybe just change the UI completely and actually it's possible in Jenkins. There are plugins for that and for example, here's an example of the new two UI. We're talking about it today. So, you can customize Jenkins, you can customize its UI and there are tools available for that. Today, we will talk about these tools and then we will just do some modifications and later we will also talk about Jenkins dark theme, which is one of the topics for the Hardfest and we plan to work on that during this week. How to use UI? There are two main plugins which are allowed doing that. One plugin is simple theme plugin. So, this plugin allows you to write in CSS and JavaScript or additional CSS and basically you can alter almost all UI with that. This is the main subject for our presentation. Also, this plugin offers a number of themes. If you go, for example, the GitHub repository, you can find a number of things to themes and actually there are many more themes available for this plugin. Another plugin is login theme plugin. This plugin solely focuses on the Jenkins login screen. This is a change which was introduced around two years ago and this change basically allows other login themes. So, when you click the login button, you get the screen and this plugin you can change this layout. There are also other plugins, for example, Tom Franley at some point created the theme manager plugin prototype, but it has never been published or integrated into the Jenkins mainstream system. So, we mostly talk about these two plugins when we talk about theme management. If you're interested to know more about these plugins, you have documentation which basically describes how to access these plugins, how to develop these themes and will be referring to this page a few times during this session. One thing which you need to keep in mind when you use themes is that at the moment themes are provided as is. So, it means that we don't guarantee compatibility, we don't guarantee that themes will not break these Jenkins updates. And there is a significant reason for that because in the project, we are working on a number of UI, UX improvements, for example, like this hack test and we have a number of stories in our roadmap. So, here, for example, we want to improve look and feel. We also want to work on accessibility and then finally work with user interface entirely and there are many more stories which are related to Jenkins UI. We get a lot of contributions improving particular components or controls. So, for example, there is a major revamp of plugin manager and all these topics may require breaking changes in layouts. That's why at the moment we do not declare a compatibility policy for themes later. It may change, but for now the main goal for the project is to improve the UI itself and the themes can evolve and get improved along with the project. That's the plan. So, nevertheless, we invite users to use themes and to contribute themes and today we will be talking about that. So, Tobias, would you like to add something before we proceed to the simple themes? No, we can continue. Okay. So, yeah, let me stop sharing the screen. So, Tobias will talk about a simple theme plugin and how to use that. And after that, if you talk about a dark theme and other topics we could do here in UIX HelpFest and it will be a discussion where we can discuss anything. Okay. Thanks for the introduction. Can you see my screen? Yes. Okay. Yeah, I will do more or less quick introduction to the simple themes plugin. And basically I prepared some slides, but mostly I will do some life hacking. So, let's get started. Let's get the plugin to our local Jenkins installation and see what we can do with it. I have a pretty vanilla Jenkins installation here and go to the plugin center and can now install when we go to configure system. We see this new part theme elements and we can add different theme elements. One thing which is pretty simple and self-explanatory is adding a different Fava icon. For example, if I want to make my Jenkins look like a Wikipedia, I add the Fava icon of the Wikipedia and when I now reload the page, you see that my top icon has changed to the Wikipedia logo. But we are probably here to add some styles to our Jenkins main page. The simplest way is to add some custom CSS rules which are applied to every Jenkins page. And very simple things are just rules to change maybe the color of some font, maybe change the font style and I created this header here and I know it's h1. So, maybe I want to change the text color. So, I add this to the XF CSS. When I apply and reload, I see the text has now changed to red. Many people ask, can I replace the Jenkins logo with something else? So, we start with a simple case. Take a look. The Jenkins logo has an ID. So, we can directly reference the icon and change its style. The simplest thing is just hide it and then it's gone. But probably the real use case for this is that people want to add their company logo and replacing images is a bit more complicated. I've prepared some CSS here. It basically squashes the image down to a zero width point and then pets the element a little bit and then uses the background image to set a new icon. That sounds like a very complicated way, but remember, if we are only changing CSS rules, we cannot change the content of, for example, images. So, we have to work with some hackery. So, we can see now here, I replaced the Jenkins logo with this icon. And basically, you can get very fancy with this and probably the small text box is sometimes it will be very limiting and you maybe want to customize with an external theme. And you can specify URL of an external CSS which will then be injected into every Jenkins page. And there are some themes which users of Jenkins have created. There's for example, my own Jenkins Neo2 theme. It's called Neo2 because it's a continuation of an abandoned theme called Neo. And on this page, you can just include one CSS file and it should change the complete style of Jenkins. There are some other themes, but as far as I can see, most of them are not actively maintained. For example, the material. Yeah, that's totally correct. I was browsing themes yesterday. So, most of them have been created in 2016 to 2017. They were abandoned. And since Jenkins web interface is moving forward, right now, for example, if you launch on weekly releases with new headers, with new notifications, most likely they will look quite bad. There was already a change recently in the header. And if you, for example, try the material theme, which many people like, you can see that the search box is a little bit broken, which is unfortunate because I think it's very wildly used, as you can see at the star and fork account. Yeah, I think Canon is even older. And last come it was 2018. Yeah, even providing CSS and JavaScript. So we have to add the CSS. And at the JavaScript still looks fine. Okay. Yeah, let's, but maybe you want to go, you collected some rules, which you want to apply to your Jenkins and want to build a bigger theme. And based on my new two theme, I will maybe go over a built system for a theme a bit. Neo2 is built with Yarn, the package manager for JavaScript projects. It uses Grunt as a basically a built system. And it uses less as the CSS dialect for writing the theme and uses post CSS to compress it all down into one single CSS file, which can be included in Jenkins. For example, if you look at the main style, you can see that the style has some variables for global font substitution. And the previous autor collected all the same elements, which are also styled in Jenkins. So we have, do a little bit trial and error with what you need to style and how to style it. So now I'm working with my local copy of the style. And if I want to adjust something, I go into my checkout, can maybe look at the variables and say, hmm, maybe I don't like the red of the red circle and want to make it pop more. So I can change something in my less code. And then I can compile the less code to CSS. And hopefully if I prepared everything correctly, not very noticeably, but the red is now a little bit darker. And we do the same for green. Maybe I don't like this green. And I want to do a very, very bright green. So that has now updated the CSS. And now my green checkmarks are really, really green. The theme is using SVG images instead of the PNG images that Jenkins uses. Something of note here is that it's using a base theme that was shared with material theme. But since that isn't updated anymore, this repository also isn't updated anymore. And I needed some patches. And it works by, don't be surprised about the code. It's quite magic. It basically are CSS rules, which match on the PNG image that was there before. And do some clever transforms. Basically the same I did with the Jenkins logo earlier. So that's original logo is hidden somewhere. And then the SVG logo is replaced over it. But here it is using less. So it's using macros. So you don't have to see all the gritty details, how it is designed. And if you want to use something like this in your own theme, you can probably glean some examples from this plugin. And somewhere around here, there are very, very many rules to hide and resize all images at once. The code does some magic with padding and sizes and background sizes, so that instead of the original image, a new image is shown. And then in the build process, when running grunt, it's using SVGO to embed all the images into the CSS file. Yeah, that was basically a quick rundown on how to write a theme. And I think I'm already done with all I had to tell. Any questions? Yeah, so for questions, please either use Zoom Q&A, or we can grant talk permissions to those who want to ask something. If not, we could just proceed to the dark theme and to Genki's UI, Jörg's Hackfest. And yeah, after that, we still have some time to discuss questions. And hopefully during the Hackfest, we will have some opportunities to create things. Okay. Okay, so no questions right now, but let's just continue then. Okay, so I will share my screen. Okay, do you see it? Yes. Yeah, so I wanted to speak a bit about the dark theme and about what you would like to do during the Hackfest. Yeah, recently, it became quite popular to make everything dark. So for example, you may have dark mode for your Slack, for your GitHub web interface, for almost all the applications for Slack. Some people find it useful, some people don't. But generally having a dark theme, I became a quite popular request for projects, including Jenkins. So there are quite a number of requests recently, and also there are quite a number of responses when you start your UX Hackfest. And when you ask registrants, what would be the top three things you would like to change? And we got something like six or seven answers that one of top three would be dark theme. So it was quite popular on the Hackfest. And actually, there were dark theme experiments and prototypes already. For example, Tobias had dark mode in near to theme for a while. Sorry, I removed it. Yeah, well, it was fine, because yeah, in the commuter, Tobias said that it's just not maintainable. It's hard to manage. And this is exactly why we're talking about it today. So for me, I've tried a number of dark themes one year ago, and then last week, for me, the most interesting project was Jenkins dark stylish theme. So this theme, again, is a theme which was basically created by a number of contributors, and it was abundant and taken over a few times over the history. So this theme tries to provide integrated UI for dark mode. And you can see that everything is overrated, the images, et cetera. And this theme under the hood, it uses the simple theme plugin. Also, there is native Jenkins plugin mode. So it is possible to publish this theme as Jenkins plugin, though it has never been officially hosted in the Jenkins Update Center. But in principle, it's possible. And it's possible to use simple theme plugin in combination with this native Jenkins plugin somehow. So yeah, it's an implementation detail. And yeah, I'll just show a few screenshots. So this theme actually looked pretty good. So for example, here's a script console, his agent view. Yeah, if you start navigating to lower level views, you start seeing deviations, but it really looks awesome on the main screens on all the Jenkins versions. The problem with that is that, as Tobias already said, we started changing Jenkins layouts recently. So for example, if you use the recent Jenkins LTS version, you can already see a new header there. Also, there are typography changes, there are some changes in controls. And if you take a look at the change log, you can see that there are more changes coming. So for example, in the recent version, we revamped sidebar tasks. So something may break again. Because we want to evolve UI, so things will change. And if you start going to the change log, you can see that there is a lot of changes related to user experience now. And I'm extremely happy about that. But from the theme maintainer standpoint, it might be difficult. So this theme was basically created in my tint until 2018. So two years ago, yeah, after that Jenkins web interface was quite stable for a while. But right now, if you use it with the modern layout, you can see that there are some glitches in the search button, or for example, in notifications and other bits. And yeah, there are changes if you want to maintain such a theme. So first thing I was thinking to do, actually, just until today's morning, is just fork this Jenkins dark stylish theme and to create a new theme and maintain it. So basically, to take another iteration of fork in the theme, maintain that. But it's difficult, especially for dark mode, because it needs custom images, you can just update CSS styles, most likely contrasts of icons, etc, won't be good enough. And you will need to rework it significantly. And maintaining such a theme as not official outside Jenkins community is really difficult, because you would need to be in the code. Basically, it will be a moving target, because every time Jenkins code changes, you may have to change the theme. So we had a discussion about that. Well, you had a discussion about that a few months ago, and it basically resulted in the themes support policy. Yeah, so this is what we came up to. So basically, we at least documented the themes support policy, because from user perspective, the current behavior, which is probably a private disease may have been unexpected, and definitely it may be unpleasant experience sometimes, but at least now it's documented. Same we just documented some bits for developers, we tried to maintain change logs, but still it's quite difficult. And we had a discussion about what we could actually do. And the idea is, instead of having unofficial themes, is to provide a way to actually host themes as a part of the Jenkins project. We did a grant work for that using policies, documenting that. And for example, near to theme, I would be happy to just move it to Jenkins here organization. It's a bit outside the topic, but in principle, I see no problems with it. And the same for the dark theme. So we started the discussion. And today, we had office hours, we created a first repository. It's basically quite empty. There is a prototype by team Jacob. So team, if you would like to present that. Yep. Yep, I can present it now. Do you want to keep talking? Okay, just in one minute or so. And yeah, so what we want to do, you start the date as just a project. So we will be adding more content there. But we started as an incubated project. So what it means is that the project is there, it's available for use. But at the same time, again, we set explicit expectation about the potential changes. Another example of that is, for example, pipeline as YAML plugin, which is also marked as incubated. And yeah, it may change significantly before we can officially release 1.0 here. So, and yeah, there are some changes needed. And I guess this is the time when I hand it over to team because team has a lot more expertise in this area than me. Sure. All right. Well, I'll just start by showing you where I'm at. Okay, you see your screen. You see Jenkins? Yes, we do. Cool. So this is something I started hacking on yesterday afternoon. And it was just to try and bring a native dark mode to Jenkins without having to make a theme that is difficult to maintain. So I've been looking at using CSS variables instead of having to override all of the selectors everywhere and having to put lots of hacks in place. So I'll just quickly just go through what's working and what's not. And then I'll just show you the code and how to test it. It's all pretty straightforward. So this is the home page to Jenkins. It's pretty much there. Possibly some slight changes for contrast and any other improvements, but it's all working. Nothing really jumps out as too bad. Search is all working. And you've got all different, and you've got quite a nice contrast coming up on the search box. Just quite nice. And then you've got different hover states, which will contrast reasonably well, and the same on the sidebar. And I can click one of them. And there's an active bar here. You just do a slight cleanup on the white bar there, but it's quite minor. That's all working. The next bit I took a look at was the job view. And that's mostly working. So if you look here, the font color there probably needs a bit of an enhancement. And these are quite blurry, but I think it's quite blurry anyway. It just looks quite strange. Yes, it's designed. Okay, yes. Quite weird. And build logs are working quite nicely out of the box. So you can read that quite easily. I haven't got a very complex build log, but it all seems to be working okay. So there's a bit of hover work fix needed there. That what I was, what I got working just before was build with parameters, which shows a few different form inputs. So there's a string, the boolean, and a password parameter. That's all working okay. Possibly some minor tweaks needed, but it's functional. So that's what is working. There's a number of things that aren't working, but aren't nice. But I tried to focus on the core user experience first. So the experience of just what a user would have. So there's a lot. So there's more, like a developer consuming Jenkins as a building it or viewing logs. And then the next step is really for the admin of Jenkins and how the admin consumes it. So one like, there's a whole bunch of special styling on jobs. So the jobs need some work currently. So it's currently picking up the default colors. So that's some work in progress. And none of the men, none of these stylings on the managed Jenkins page work very well. But it should be okay on the configuration form. I haven't checked this in a while, but it should just pick up the colors automatically. So yeah, that looks pretty good. And I tried to stick to the default Jenkins theme as much as possible. So you see that I haven't actually changed the button colors at all based on the button rework. That's all the same, probably the secondary button color needs to change. The primary button colors work quite well on the theme and the same with the help button. It looks quite well, quite nice on this theme without having to make any changes. So that's the theme. We just show the card. So the theme is quite small. So this is just using CSS variables. I'm using the simple theme plugin as well to bring it in, which I'll show the configuration for in a second. But so it's just overriding CSS variables that are provided by Jenkins core, trying to be as least specific as possible, and avoiding the componently lower rides we can, but you can't always do that. So if you look there, that's 60 lines of code with white spacing. So it's probably about probably about 50 variables that are being tweaked. And most of them are some standard variables at the top, which are for the theme. And then it's just reusing them when needed. So there's very few custom colors in here. It's just setting the theme colors to the components, to the components. So I had to add CSS variables to Jenkins core. So that's so there was already a colors.less file. So there was a whole bunch of ones that were using less variables. I changed them to use CSS variables. And which means that they can be overridden at runtime, basically, and makes a very easy theming. And I've just extended them to add some components that we're missing and extended some other extended some components that weren't even using the color variables. And I found a couple of the buttons that were missing the current, were missing the current button rework. So that's a nice improvement. And just how to use this. So Oleg showed you the repository earlier. So you got the Jenkins dark theme. And you also saw the simple theme plugin earlier, but I'll just show the configuration here. So I've added a theme, I've added a CSS URL, and I pointed it at the user content folder of the Jenkins home directory. So this allows me to automatically sync the file when it's changed into that location because I'm currently developing on it. I'm running a script, which watches the file for change. And whenever it's changed, it copies it into the user content folder. So it's an easy way for me to keep the changes synced. I tried sim linking it first, but Jenkins forbids following some links outside of user content. So I put that work around in place. And it seems to be working fine. Not everything as much as the remote. I'll create a PR after this just to, but what was there is functional. And I've just been going through component by component improving. And that's basically it. Does anyone got any questions? Not a question so far. So what was mentioning that it's not only the specific lines of code in the theme, but it's also a change on the Jenkins course site to make it possible to do it in a 60 line instead of 600. There we go. So there's a progress added to Jenkins core, which just goes through. And where it wasn't using a variable, it changes it to use a variable. And where it was using less variables, which is these onto the outside, it changes them to using CSS variables. We shouldn't break anything. And there was also a post CSS processor for so post CSS custom properties, which basically adds compatibility for browsers that don't support this. And the only modern, well, not modern browser, the only browser that we still support that does use it is IE 11. It doesn't support it is IE 11. So this is basically backported in for IE 11, but it will mean that themes on IE 11 won't work, but shouldn't be much of an issue. You can use a modern browser instead. So it should make lives of maintainers much easier when it's released. So yeah, briefly, I was going to share what else happens during the Hackfest and what else. Yeah, so I don't share, we'll just talk about it, how to contribute. Okay. So I'm screen sharing again. This is my screen. Okay. So yeah, during Hackfest, we organize office hours. So you can find them in the, your, your Hackfest calendar. So just scrolling a bit. So you can find all the sessions here. For example, if you want to talk about these topics, if you had a long discussion today, and you can join one of the next sessions, we can discuss it there. You can also join our Gitter chat, genki.ci slash Hackfest, where we discussed this topic and other topics now. But yeah, what we actually do is not only about themes. So there is a lot of other UIUX related changes. And even for themes, we have a number of other topics, which have been discussed. So for example, we create a dark theme is something we try to focus on. But for example, there are proposals about creating a new bloatian theme. Well, basically applying bloatian interface to Jenkins. If you want a challenge, you can also try creating a dark theme for bloatian, which is totally possible. Please do not google for retro ocean. But it's possible to theme bloatian as well if you want. Also, you're welcome to improve existing themes. So for example, Neo2, as we talked, it would benefit from some enhancements from previous versions. There are other themes, which are actively used and which could be improved. So if you want to try it out, it would be much appreciated. Then we still have documentation topics, for example, documenting how to manage themes, etc. For example, if you watched this video, you could convert some parts of it to the tutorial and get it published. Another thing we're discussing is to have a marketplace or whatever for themes. So for example, there are marketplaces for many things like mid-hop applications. So why don't we have the same for themes? So here's for example, our marketplace for plugins. You can go here and you can find all documentation, etc. So if we could create something simple which would allow to list actively developed plugins and which would allow to document support requirements, I think it would be beneficial for users. I was wondering about whether we better build it into a Jenkins plugin so that users could select their own themes in line and then they just select the theme that they want. You mean right inside this interface? Yes, yeah, right inside the Jenkins user interface inside of the user configuration where users can choose their own theme. Yeah, why not? So these things could be doable and there is definitely a lot of enhancements which could be done in order to simplify using themes. For example, you're just referring to a theme on mid-hop or something like that could be doable. We do the same, for example, for pipeline libraries. So if you're interested to contribute to one of these topics, you're welcome to do so. And basically as a part of HeartFest, we work on a lot of such stories and yeah, you're welcome to try something. Well, I don't know, does it answer your question or would you like to deep dive a bit? So yeah, if you're looking for full list of projects, it's actually here. So it's not only about UI themes, there are also things like pipeline visualization or whatever, which well, a bit ambitious. There are things like common look and feel updates and accessibility updates, which I think contribute to look and feel in Jenkins. There is major change, for example, for replacing layouts, we stay from tables to divs. I'm not sure how severely it will impact the matching in CSS themes, but I would guess that it will be some impact. So yeah, just testing that and maybe preparing to that once could be a good opportunity. Tobias, team, would you like to read something? Just that welcome to try out the Jenkins dark modes. If you look at the pull request on the Jenkins core, there's instructions for running the special version of Jenkins core you need and Docker. So it's here. It was the first time at least. So testing, you can follow these instructions. And I think that so I have already started working on a better testing engine right for this repository. So hopefully in a few hours, you'll have documentation right inside the repository, which simplifies the installation steps and probably also bootstraps a number of plugins and configurations. So you can get a playground for team development. Maybe it's useful not only for dark mode, but eventually for other things as well. Cool. And so yeah, just and then install the dark theme with a simple theme plugin. And you can reference it directly from GitHub and then you'll be good to go and just create issues on the dark mode and the dark theme repository. Yeah, we just created this repository today. So there is no templates or charts, no links to charts or whatever, but hopefully we will improve it over the next few days. So by the end of the health test, it will be a project where everybody can contribute. And even during the health test is still free to try it out. But yeah, it's on the development right now. Yeah, and reach out to us and get her in the heck fist channel. If you've got any questions or if you want to contribute or feed that as well. Maybe a question to Tobias, if we want to contribute now to theme, what would be the best way to do that at the moment? Issues and pull requests are open. So I would always be be happy about fixes because I'm not a UI designer. I just took over the theme because no one else was updating it. And yeah, I hope it is useful to many people. And I know it has some issues in some dark corners. But I think mostly it works well for many people. Yeah, it does. And this team is widely used in public. So for example, if you adopt OpenGDK user, I believe that adopt OpenGDK right now uses Neo2. Is it Neo2? Is that not the broken material theme? You should send the photo. Yeah, maybe I was wrong. Yeah, and they've got the broken header. Yeah, okay. So probably if we could update Neo2 theme for the new version, we could address adopt OpenGDK folks to update the theme. Why not? But yeah, I know for sure that Neo2 is widely used. If you are willing to contribute, please do so. It will be much appreciated. And same for the simple theme plugin engine. Okay, so are there any other questions? So there was a question about sharing URLs. I will publish all the links in 30 minutes or so in meetup.com. And after that, we will also publish a video. So it will be posted soon. But yeah, you can probably put some links to the chat right now. Yeah, so I've got one question in Q&A. Where is the calendar of the events for Jenkins that you shared earlier? Okay, let me just show it to you. So if you go to the UI, UX hack first page, so here there is online events section. There we have listing of sections and I didn't update it in time. But here you can find the UIX hack first calendar with all the sessions. This is what we were showing at the kickoff. And you can find the current schedule. We will balance a few additional events to Friday, which I will be semi-confirmed. But yeah, right now we're just going with the agenda. So feel free to join our office hours today. And we will also have a special UX SIG meeting where we will discuss the progress of the hack first. Any other questions? Comments? Okay, so if not, thanks a lot for joining this session of watching it online. Thanks to Tobias and team for the presentations and demos. And we will publish this video. Let's improve how Jenkins looks at these different themes. Thanks all. I will stop the recording then. Thanks. Yeah, thanks all.