Hands-on: How to use and create Jenkins themes?

by Tobias Gruetzmacher, Oleg Nenashev,

and Tim Jacomb

1

UI/UX Hackfest

May 25 - 29

What if Jenkins had themes?

2

It does!

3

https://tobix.github.io/jenkins-neo2-theme/

Agenda

• Introduction to the Simple Theme Plugin
• How to do a small changes to the UI?
• How to do a bigger theme or to create a new one?
• UI/UX Hackfest: Working on a Jenkins Dark Theme together

4

Using UI Themes in Jenkins

• Simple Theme Plugin - allows customizing the Jenkins UI by providing custom CSS and Javascript files. It also supports replacing the Favicon
1. There are many themes created by Jenkins users.
• Login Theme Plugin - allows modifying or replacing the Jenkins login screen. It is required to customize login screens starting from Jenkins 2.128 (announcement).

​

Documentation: https://www.jenkins.io/doc/book/managing/ui-themes/

5

Theme Support Policy

Jenkins themes are provided “as is”, without warranty of any kind, implicit or explicit. The Jenkins core, plugins and other component updates may break theme compatibility without notice.

6

https://www.jenkins.io/doc/book/managing/ui-themes/#themes-support-policy

A new look for Jenkins

Easy theming using the Simple Theme Plugin

7

Getting started

• Installation (https://plugins.jenkins.io/simple-theme-plugin/)
• Configuration (http://localhost:8080/configure)
• Theme elements
• CSS URL
• Extra CSS
• Favicon URL (Example: https://www.wikipedia.org/static/favicon/wikipedia.ico)
• JavaScript URL

8

Live Demo

Simple changes (Extra CSS)

• Change headers: h1 { color: red; }
• Hide logo: #jenkins-head-icon { display: none; }
• Replace logo:�

9

#jenkins-head-icon {

width: 0;

height: 0;

padding: 32px;

background: url(http://icons.iconarchive.com/icons/icojam/matreshka/48/red-matreshka-inside-icon-icon.png);

background-repeat: no-repeat;

}

​

Using themes

• Neo2 (https://tobix.github.io/jenkins-neo2-theme/)
• Material (http://afonsof.com/jenkins-material-theme/)

Older themes probably don’t look good on modern Jenkins:

• Rackspace Canon (https://github.com/rackerlabs/canon-jenkins)

10

Developing themes

Example: Neo2 (https://github.com/TobiX/jenkins-neo2-theme)

• LESS
• cssnano
• Grunt
• yarn

11

Live Hands-On

12

Dark Theme

13

Jenkins

14

Jenkins

Experiments

• Neo2 Theme Dark mode (removed)
• camalot/jenkins-dark-stylish
• Other (abandoned?) themes
• ...

15

Jenkins

16

camalot/jenkins-dark-stylish

Jenkins

17

camalot/jenkins-dark-stylish

Jenkins

Challenges

• Hard to maintain
• Need in custom images
• Not official

18

Jenkins

Official Dark Theme?

19

Jenkins

UI/UX Hackfest 2020

• Just started…
• https://github.com/jenkinsci/dark-theme
• Official incubated project
• Jenkins core changes needed:
• CSS variables
• Maintaining browser compatibility is a challenge
• May 27 Meeting notes

20

Jenkins

DEMO!

21

Jenkins

UI/UX Hackfest ideas

• Create a new Dark theme for Jenkins (JENKINS-61480)
• Blue Ocean Theme - apply Blue Ocean styling to the Jenkins UI
• Improve existing themes and adapt them to recent Jenkins versions (e.g. Neo2 theme)
• Document managing themes in the Simple Theme Plugin docs
• Create a new microsite on github.io or jenkins.io with themes listing (aka "theme marketplace")

22

https://www.jenkins.io/events/online-hackfest/2020-uiux/#user-interface

Jenkins