# Theming and DIY Info

**URL:** <https://community.icinga.com/t/theming-and-diy-info/139>\
**Category:** Icinga Web\
**Created:** [January 10, 2019, 1:48pm UTC](https://community.icinga.com/t/theming-and-diy-info/139 "2019-01-10T13:48:47Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dokon](https://community.icinga.com/user_avatar/community.icinga.com/dokon/32/26_2.png) [@dokon](https://community.icinga.com/u/dokon)\
**Post date:** [January 10, 2019, 1:48pm UTC](https://community.icinga.com/t/theming-and-diy-info/139/1 "2019-01-10T13:48:47Z")

</div>

## **Theming**

Themes are a nice way to customize the look and feel of your own Icinga Web 2.  
In this Thread we would like to Introduce some nice themes.

* * *

## **Installation**

The Module can be found [here](https://github.com/Icinga/icingaweb2-theme-company)

How to install the module can be found [here](https://github.com/Icinga/icingaweb2-theme-company#how-to-install)

* * *

## **Themes**

Here is a small selection of Themes for inspiration:

## company example Theme

 ![](https://community.icinga.com/uploads/default/original/1X/7df50762cc7eaeca3edd02692c30fd0a421ebf52.jpeg)

## **Installation**

The Theme can be found [here](https://github.com/Icinga/icingaweb2-theme-company/releases)

* * *

## Unicorn Theme

 ![](https://community.icinga.com/uploads/default/original/1X/ba01ddf539b24b0a822590a14211945a8a77e4d4.jpeg)

## **Installation**

The Theme can be found [here](https://github.com/Mikesch-mp/icingaweb2-theme-unicorn/releases)

* * *

## always green Theme

This Theme changes just the Icinga Web 2 color scheme after the login screen.

 ![alwaysgreen](https://community.icinga.com/uploads/default/original/1X/2f3e7e20af2ac61f007991181bd172e98c6cf2e7.png)

## **Installation**

The Theme can be found [here](https://github.com/xam-stephan/icingaweb2-module-theme-always-green/tree/8ef468954ff9be9fac6d43587c0f7c556c96f7ce)

* * *

## Icinga Web 2 dark Theme

 ![](https://community.icinga.com/uploads/default/original/1X/ed302fe314b03a1b8e8b28c77ced9b117c0773c0.jpeg)

## **Installation**

The Theme can be found [here](https://github.com/vita2/icingaweb2-module-theme-dark)

* * *

## Icinga Web 2 Batman Light Theme

 ![](https://community.icinga.com/uploads/default/original/1X/71ad6dd5471283d62f1cc27c22e8a701818ecef2.jpeg)

## **Installation**

The Theme can be found [here](https://github.com/jschanz/icingaweb2-theme-batman/releases)

* * *

## Other Theming Resources

There is also the Icinga Exchange where you can find other Themes from other Developers

These can be found [here](https://exchange.icinga.com/search?q=tags%3A%22Theme%22)

## How to Customize a Theme

**To Do’s**

Please if you would like to add an tutorial beside the explanations inside of the shown Themes we encourage everyone and to write your own guides and tuts here for the community. The form in which you do that can be written 📖 or 📹 it can be visual like a screencast as well.

---

<div class="post-metadata">

**Author:** ![theFeu](https://community.icinga.com/user_avatar/community.icinga.com/thefeu/32/7277_2.png) [@theFeu](https://community.icinga.com/u/theFeu)\
**Post date:** [March 30, 2020, 11:56am UTC](https://community.icinga.com/t/theming-and-diy-info/139/5 "2020-03-30T11:56:47Z")

</div>

Hello together!  
I updated the broken links here, so all of the info is all fresh and working again!

Do you have any cool themes you want to share?  
Feel free to do that here!

Feu

---

<div class="post-metadata">

**Author:** ![lazaroblanc](https://community.icinga.com/user_avatar/community.icinga.com/lazaroblanc/32/3787_2.png) [@lazaroblanc](https://community.icinga.com/u/lazaroblanc)\
**Post date:** [January 22, 2021, 2:39pm UTC](https://community.icinga.com/t/theming-and-diy-info/139/6 "2021-01-22T14:39:29Z")

</div>

I had a try at creating a true dark theme for Icinga Web 2  
Check it out:  
[https://github.com/lazaroblanc/icingaweb2-dark-theme](https://github.com/lazaroblanc/icingaweb2-dark-theme)  
[https://exchange.icinga.com/lazaroblanc/A%20true%20dark%20theme](https://exchange.icinga.com/lazaroblanc/A%20true%20dark%20theme)

 ![](https://community.icinga.com/uploads/default/original/2X/4/47e94852b4d3ebfeb207976a0b019c2309763974.png)

---

<div class="post-metadata">

**Author:** ![mrdsam](https://community.icinga.com/user_avatar/community.icinga.com/mrdsam/32/7459_2.png) [@mrdsam](https://community.icinga.com/u/mrdsam)\
**Post date:** [July 6, 2021, 3:09pm UTC](https://community.icinga.com/t/theming-and-diy-info/139/7 "2021-07-06T15:09:56Z")

</div>

I’m using the solarized-dark theme that comes with icinga, but it has some ‘bugs’ I’d like to fix. For example, the “notification-bar” (the one that appears if you submit a form, e.g. ACK, Downtime…) on the bottom of the page is white text on bright yellow and not readable.

I’ve already color-picked the background-color but couldn’t find it anywhere in the css-files.

How is the bg / fg color for this “notification-bar at the bottom” called?

I took a closer look at lazaroblanc theme, it uses green as bg-color for that, I can’t figure out where it is set.

Any hints?

---

<div class="post-metadata">

**Author:** ![theFeu](https://community.icinga.com/user_avatar/community.icinga.com/thefeu/32/7277_2.png) [@theFeu](https://community.icinga.com/u/theFeu)\
**Post date:** [July 9, 2021, 6:34am UTC](https://community.icinga.com/t/theming-and-diy-info/139/8 "2021-07-09T06:34:32Z")

</div>

Hey hey,

you might want to start looking at the  
`public/css/themes/solarized-dard.less` in

> **[Icinga/icingaweb2](https://github.com/icinga/icingaweb2)**
>
> A lightweight and extensible web interface to keep an eye on your environment. Analyse problems and act on them. - Icinga/icingaweb2

It would probably help to read up on `less` and it’s variable system before too 🙂

Then feel free to open a pull request on the GitHub!  
If you need any help, let me know 🙂
