# Homey Web App \[CSS customization\]

**URL:** <https://community.homey.app/t/homey-web-app-css-customization/39682>\
**Category:** Apps\
**Created:** [December 23, 2020, 2:43pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682 "2020-12-23T14:43:00Z")\
**Posts on this page:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [March 11, 2021, 9:37am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/41 "2021-03-11T09:37:54Z")

</div>

Thanks @Adrian_Rockall I’ve added the new css to the first posts.

---

<div class="post-metadata">

**Author:** ![Martijn\_Hoogenbosch](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martijn_hoogenbosch/32/10647_2.png) [@Martijn\_Hoogenbosch](https://community.homey.app/u/Martijn_Hoogenbosch)\
**Post date:** [March 11, 2021, 11:08am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/42 "2021-03-11T11:08:49Z")

</div>

Wrapping of the flow names doens’t work anymore either, in your opening you have:

```
/* Make long flow names readable*/
.css-287q92-sc-ItemLabel {
    white-space: pre-wrap;
}

```

Which I believe should be altered to:

```
/* Make long flow names readable*/
.css-huzgua-sc-ItemLabel {
    white-space: pre-wrap;
}
```

---

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [March 11, 2021, 2:57pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/43 "2021-03-11T14:57:25Z")

</div>

Thanks @Martijn_Hoogenbosch I’ve added it to the earlier posts.

---

<div class="post-metadata">

**Author:** ![Adrian\_Rockall](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/adrian_rockall/32/13209_2.png) [@Adrian\_Rockall](https://community.homey.app/u/Adrian_Rockall)\
**Post date:** [March 11, 2021, 4:24pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/44 "2021-03-11T16:24:59Z")

</div>

If you include the following along with @Martijn_Hoogenbosch entries the row height will adjust to fit the text in:

```
.css-1lglkzi-sc-ItemDetails {
  height: auto;
  padding-top: 3px;
  padding-bottom: 3px;  
}

div.css-1yhvvkb-sc-ItemDetails {
  height: auto;
  padding-top: 3px;
  padding-bottom: 3px;  
}
```

---

<div class="post-metadata">

**Author:** ![Martijn\_Hoogenbosch](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martijn_hoogenbosch/32/10647_2.png) [@Martijn\_Hoogenbosch](https://community.homey.app/u/Martijn_Hoogenbosch)\
**Post date:** [March 12, 2021, 7:37am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/45 "2021-03-12T07:37:12Z")

</div>

I added the following:

```
.css-1b814yj-Button {
  width: 95%;
}

```

To make sure the ‘and’ column also has a ‘better’ size.

---

<div class="post-metadata">

**Author:** ![tb1962](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/tb1962/32/7888_2.png) [@tb1962](https://community.homey.app/u/tb1962)\
**Post date:** [April 5, 2021, 7:27pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/46 "2021-04-05T19:27:34Z")

</div>

This is my customization. I have a large screen. So plenty room for more columns. Also i like dark mode

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/9/e/9e46871ba9a9a326583285e06430307bc4fd2017.png)

---

<div class="post-metadata">

**Author:** ![Martijn\_Hoogenbosch](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martijn_hoogenbosch/32/10647_2.png) [@Martijn\_Hoogenbosch](https://community.homey.app/u/Martijn_Hoogenbosch)\
**Post date:** [April 5, 2021, 9:39pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/47 "2021-04-05T21:39:47Z")

</div>

Please do share!

---

<div class="post-metadata">

**Author:** ![Peter\_Kawa](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/peter_kawa/32/173848_2.png) [@Peter\_Kawa](https://community.homey.app/u/Peter_Kawa)\
**Post date:** [April 5, 2021, 10:05pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/48 "2021-04-05T22:05:13Z")

</div>

awesome!

---

<div class="post-metadata">

**Author:** ![tb1962](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/tb1962/32/7888_2.png) [@tb1962](https://community.homey.app/u/tb1962)\
**Post date:** [April 6, 2021, 4:21am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/49 "2021-04-06T04:21:24Z")

</div>

Here is my css. It is still under development (like my.homey.app). Keep in mind that the app is still beta and things will change (and definitely brak this css). Also this is based on my 27" screen. If you have a smaller screen you get less columns. The other tabs are also restyled.

```
:root {
  --shadedbackground-color: ##ee;
  --textcolor: #000;
  --color-homeyname: #000;
  --background-color: #fff;
  --contextmenu-background-color: #444;
  --default-button-color: #aaa;
}

@media (prefers-color-scheme: dark) {
body {
    --color-white: #000;
    --color-mono-100: #ffffff;
    --color-mono-95: #FAFBFD;
    --color-mono-90: #F1F2F6;
    --color-mono-80: #e9eaee;
    --color-mono-70: #DDDEE2;
    --color-mono-60: #D1D2D5;
    --color-mono-50: #c4c5c8;
    --color-mono-40: #ACADB0;
    --color-mono-30: #939496;
    --color-mono-20: #7A7B7D;
    --color-mono-15: #626264;
    --color-mono-10: #49494A;
    --color-mono-05: #313132;
    --color-mono-02: rgb(255,255,255);
    --color-mono-01: #0C0C0C;
    --color-mono-0: #000;
    --color-black: #000000;
    --color-mono-o-02: rgba(255,255,255, 0.02);
    --color-mono-o-10: rgba(255,255,255, 0.1);
    --color-mono-o-50: rgba(255,255,255, 0.5);
    --color-white-o-50: rgba(0,0,0,0.5);
    --color-white-o-75: rgba(0,0,0,0.75);
    --color-white-o-100: rgba(0,0,0,1);
    --color-black-o-50: rgba(255,255,255,0.5);
    --color-ice-white: #121319;
    --color-night-black: #f6f7fb;
    --color-text: var(--color-mono-0);
    --color-text-light: var(--color-mono-0);
    --color-text-light-hover: var(--color-mono-50);
    --color-text-highlight: var(--color-blue);
    --color-text-invert: var(--color-mono-0);
    --color-text-invert-50: var(--color-white-o-50);
    --color-text-disabled: var(--color-mono-30);
    --color-text-inactive: var(--color-mono-20);
    --color-line-light: var(--color-mono-10);
  --color-background-hover: #999;
  --color-component: rgb(50,50,50);
  --shadedbackground-color: #fff;
  --color-body: #000;
  --textcolor: #fff;
  --button-color:#fff;
  --default-button-color: #fff;
  /*--color-mono-100: #000; */
  --color-text: #000;
  --color-blue:#07f;
  --color-highlight: #ff0;
  --color-homeyname: #fff;
  --icon-color-dark:#fff;
  --color-icon-dark:#fff;
  --background-color: rgb(30,30,30);
  --contextmenu-background-color: #fff;
  background-color: var(--background-color);
  color: var(--textcolor);
}
}

.css-1yur33m-Base.e1smyq3q0,
.css-m338ur-DeviceTile-TopContainer.epcc9q43,
.css-1dpgz7t-Icon-Root.efypr2h0
.css-1py9yg8-tbody tr:hover,
.css-1py9yg8-tbody tr,
.css-1ip6r5q-DeviceCapabilityListItem-Label.e9o5z8t1,
.css-1pmd02-sc-Weather.e17mmtdn0,
.css-1ge3mo5-DeviceName.e8j0ho4 {
  color: var(--color-mono-100);
}

.css-y80g9p-Title.e1ngchep0,
.css-14a3rl8-Title, 
.css-1xqp3xf-Title, 
.css-1xqp3xf-Title,
.css-15fy0ar-body2-CardTitle,
.css-ujc80q-Button-Root.e8sxues1{
  color: var(--textcolor)
}
.css-1293549-Container.e12emes70 > span.css-1dpgz7t-Icon-Root.efypr2h0
{
  background-color: var(--color-mono-100);
}
.css-ujc80q-Button-Root.e8sxues1 {
  background-color: var(--color-blue);
}
.e1im01um4 {
  height: 22px;
}
.css-mes151-SearchField-Input {
  background-color: var(--button-color);
}
.css-1dpgz7t-Icon-Root.efypr2h0 {
  background-color: var(--button-color-text);
}
.css-15fy0ar-body2-CardTitle {
  font-weight: bold;
  font-size: 18px;
}
.css-1hu8qec-sc-Center {
    width: 100%;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.css-ppwutp-Section {
    margin: 0px;
}
section.css-ppwutp-Section.e1s1bn0i5 {
    width: 20%;
}
section.css-ppwutp-Section.e1s1bn0i5:last-of-type {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
    flex: 1
}

.css-rrlt7p-Content.e1s1bn0i3 {
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
}
.flow-card {
  margin: 10px;
  font-size: 13px;
  height: 120px;
  width: 340px;
  box-shadow: unset;
  transition: unset;
}
.css-sib1sa-Nav-Container {
  font-size: 12px;
}
.css-y1785u-sc-ItemRoot {
  height: fit-content;
}
.css-sotwb8-sc-ItemDetails {
  height: 22px;
}
.css-94pg0d-sc-ItemDetails:hover.eo5deeg4,
.css-huzgua-sc-ItemLabel eo5deeg4,
.css-sotwb8-sc-ItemDetails:hover, .css-94pg0d-sc-ItemDetails:hover {
  background-color: transparent;
  color:#fff;
}

.css-id2vso-sc-ItemDetails,
.css-94pg0d-sc-ItemDetails {
  height: 22px;
}
.css-fcjpfp-sc-StickyActions {
  padding-left: 40%;
  margin-left: -60px;
}
.css-1xqp3xf-Title {
  width: 100%;
}
.css-163q0dt-Root {
  width: 100%;
}
.css-18garvg-Textarea, .css-fcjpfp-sc-StickyActions {
  background: transparent;
}
.css-glpvqg-Button-Root {
  background: var(--default-button-color);
}

.css-6mfsau-sc-Header e1csbp2v3 {
  width: 70%;
  max-width: 100%;
  height: 40px;
}
.css-18garvg-Textarea.e1vsakk20 {
  width: 70%;
  height: 40px;
  max-height: 40px;
  border: none;
  color: var(--textcolor);
  caret-color: var(--textcolor);
}
.css-a0trfj-Header-HomeyName.e1hl2b440 {
  color: var(--color-homeyname);
}
.css-utgxvx-Button.e1s1bn0i0 {
  margin-left: 10px;
  margin-right: 10px;
  width: 87%;

}
.css-6mfsau-sc-Header.e1csbp2v3 {
  margin: 0;
  border-bottom: 1px solid;
  padding: 0 10%;
  max-width: unset;
}
.css-oq2sid-Line.e1vsakk21 {
  display: none;
}
.css-pi077z-sc-Button.et9mcxt0 {
  color: var(--text-color);
  font-size: 16px;
}
.css-mes151-SearchField-Input:not([value=""]), .css-mes151-SearchField-Input:focus {
  color: var(--textcolor);
}
.css-h40jet-overlay {
  background-color: #fff;
  border-radius: var(--borderRadius-default);

}
.css-p2paa9-sc-Content {
  padding: calc( var(--su-root) * 3 ) calc( var(--su-root) * 3 );
}
.css-6mfsau-sc-Header.e1csbp2v3 {
    margin: 0 !important;
    border-bottom: 1px solid !important;
    padding: 0 10% !important;
    max-width: unset !important;
    position: fixed;
    z-index: 999;
    background-color: var(--background-color);
    top: 80px;
    opacity: 90%;
}
.css-1e8329n-Header-Container {
    display: flex;
    z-index: var(--zIndex-header);
    margin-top: 20px;
    margin-bottom: 20px;
    flex: 0 0 40px;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    min-height: 0px;
}
.css-17owrf8-h3, .css-8uve29-DeviceTile-Header,
.css-1ulkaww-h1,
.css-9xi6tn-SectionTitle {
  color: var(--textcolor)
}
.css-9xi6tn-SectionTitle {
  background-color: var(--button-color-text);
}
.css-12u75a7-Button-Root.e8sxues1 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
    background-color: var(--color-text)
}
.monaco-editor .margin
{
    background-color: #E5D9BD;
}

monaco-editor, .monaco-editor .inputarea.ime-input {
    background-color: #F5EACD;
}
.css-some1b,
.css-117q3uw-sc-Editor,
.monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input {
  background-color: #F5EACD;
  
}
div.view-lines {
  padding-left: 0px;
  left:4px;
}
.monaco-editor .inputarea {
  border: none;
}
.current-line {
  background-color:#FFFACD;
  border: none;
}
.monaco-editor .view-overlays {
  padding-left: 0px;
  left: 4px;
}
.view-overlays div, .cigr,.cigra {
    padding-left: 0px;
    left:0px;
}

.css-1jzbmsj-FlowCardHint-Icon.e5jasbj1 > span.css-1dpgz7t-Icon-Root.efypr2h0,
.css-1yj6fto-CardIcon.e1nu42g86 > span.css-1dpgz7t-Icon-Root.efypr2h0,
.css-1yv6hw9-CardIcon.e1nu42g86 > span.css-1dpgz7t-Icon-Root.efypr2h0,
.css-1ck9etg-CardIcon.e1nu42g86 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
  background-color: black;
}
.css-ujc80q-Button-Root.e8sxues1 > span.css-1dpgz7t-Icon-Root.efypr2h0,
.css-gfqu3y-BorderWrapper.e1syuo1q1 > span.css-1dpgz7t-Icon-Root.efypr2h0,
.e1nu42g81 > span.css-1dpgz7t-Icon-Root.efypr2h0, 
.css-e0b41j-CardIcon.e1nu42g86 > span.css-1dpgz7t-Icon-Root.efypr2h0,
.css-19e7a1o-CardIcon.e1nu42g86 > span.css-1dpgz7t-Icon-Root.efypr2h0,
.css-qswy13-CardIcon.e1nu42g86 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
    background-color: white;
}
.css-glpvqg-Button-Root.e8sxues1 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
  background-color: #0b0;
}
.css-os8dre-RoundWrapper {
  background-color: unset;
}
.css-os8dre-RoundWrapper.e1syuo1q0 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
  background-color: white;
}

.eozj5ct2.css-1l95172-Icon-Root-MoreButtonIcon.efypr2h0,
.e1nu42g81 {
  opacity: unset;
  transform: rotate(-90deg);
  background-color: transparent;
}
.css-8zfs37-sc-ItemContextMenuButton,
.css-8zfs37-sc-ItemContextMenuButton.eo5deeg1 {
  visibility: hidden;
}

.css-19ku62l-sc-ItemContextMenuButton.eo5deeg1 {
  transform: rotate(-90deg);
  visibility: visible;
}
.css-4d1u4p-ActionButton:hover,
.eozj5ct2.css-1l95172-Icon-Root-MoreButtonIcon.efypr2h0:hover,
.e1nu42g81:hover {
  transform: rotate(-90deg);
  opacity: 0.5;
  
}
.eozj5ct2.css-1l95172-Icon-Root-MoreButtonIcon.efypr2h0 {
  background-color: var(--color-mono-100);
}
.css-uf4jfm-sc-Extension.e1im01um6 {
  color: var(--color-mono-30);;
}
.css-1jzbmsj-FlowCardHint-Icon {
  background-color:white;
  border-radius: 6px;
  padding:0;
  margin-left: 4px;
  transform: translateY(-10px);
  border: 1px solid #fff;

}
.css-oz5z5j-ZoneActivity.e1mg4iro0
{
  color: var(--color-mono-20);
}
.css-19rj6pl-IndicatorLightContainer {
  background-color: rgba(255,255,0,1);
}
.css-fplr7v-DeviceTile-Root[value="false"] {
  opacity: 0.15;
}
.css-glpvqg-Button-Root.e8sxues1 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
  background-color: var(--color-mono-0);
}
.css-tyf752-Base.e1smyq3q0 {
  background-color: var(--color-mono-20);
}
.css-l7bkth-h2.e1cp72ro3,
.css-l9bkth-h2.e1cp72ro3,
.css-1m5m9vt-body1.e1cp72ro1 {
  color: var(--color-mono-20);
}
button[disabled] {
  background-color:var(--color-mono-30);;
}
.css-utgxvx-Button.e1s1bn0i0:hover,
.css-glpvqg-Button-Root.e8sxues1:hover,
.css-glpvqg-Button-Root.e8sxues1:hover {
    color: var(--color-text-light);
    background-color: var(--color-mono-95);  
    transform: scale(1.01);
}
.css-ujc80q-Button-Root.e8sxues1 {
  color: var(--color-mono-100);
  background-color: var(--color-blue);  
  transform: scale(1.01);
  opacity: 0.8;
}
.css-1e2ljcw-Unit.e1b4rrb93,
.css-d9fda6-SectionSubTitle.e1sgjjj32 {
  color: var(--color-mono-15)
}
```

---

<div class="post-metadata">

**Author:** ![Martijn\_Hoogenbosch](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martijn_hoogenbosch/32/10647_2.png) [@Martijn\_Hoogenbosch](https://community.homey.app/u/Martijn_Hoogenbosch)\
**Post date:** [April 6, 2021, 7:00am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/50 "2021-04-06T07:00:33Z")

</div>

And how did you manage to get the black theme? Is that a browser theme?

---

<div class="post-metadata">

**Author:** ![tb1962](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/tb1962/32/7888_2.png) [@tb1962](https://community.homey.app/u/tb1962)\
**Post date:** [April 6, 2021, 7:24am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/51 "2021-04-06T07:24:20Z")

</div>

> [@tb1962](#):
>
> ```auto
> :root {
> --shadedbackground-color: ##ee;
> --textcolor: #000;
> --color-homeyname: #000;
> --background-color: #fff;
> --contextmenu-background-color: #444;
> --default-button-color: #aaa;
> }
> 
> @media (prefers-color-scheme: dark) {
> body {
> --color-white: #000;
> --color-mono-100: #ffffff;
> --color-mono-95: #FAFBFD;
> --color-mono-90: #F1F2F6;
> --color-mono-80: #e9eaee;
> --color-mono-70: #DDDEE2;
> --color-mono-60: #D1D2D5;
> --color-mono-50: #c4c5c8;
> --color-mono-40: #ACADB0;
> --color-mono-30: #939496;
> --color-mono-20: #7A7B7D;
> --color-mono-15: #626264;
> --color-mono-10: #49494A;
> --color-mono-05: #313132;
> --color-mono-02: rgb(255,255,255);
> --color-mono-01: #0C0C0C;
> --color-mono-0: #000;
> --color-black: #000000;
> --color-mono-o-02: rgba(255,255,255, 0.02);
> --color-mono-o-10: rgba(255,255,255, 0.1);
> --color-mono-o-50: rgba(255,255,255, 0.5);
> --color-white-o-50: rgba(0,0,0,0.5);
> --color-white-o-75: rgba(0,0,0,0.75);
> --color-white-o-100: rgba(0,0,0,1);
> --color-black-o-50: rgba(255,255,255,0.5);
> --color-ice-white: #121319;
> --color-night-black: #f6f7fb;
> --color-text: var(--color-mono-0);
> --color-text-light: var(--color-mono-0);
> --color-text-light-hover: var(--color-mono-50);
> --color-text-highlight: var(--color-blue);
> --color-text-invert: var(--color-mono-0);
> --color-text-invert-50: var(--color-white-o-50);
> --color-text-disabled: var(--color-mono-30);
> --color-text-inactive: var(--color-mono-20);
> --color-line-light: var(--color-mono-10);
> --color-background-hover: #999;
> --color-component: rgb(50,50,50);
> --shadedbackground-color: #fff;
> --color-body: #000;
> --textcolor: #fff;
> --button-color:#fff;
> --default-button-color: #fff;
> /*--color-mono-100: #000; */
> --color-text: #000;
> --color-blue:#07f;
> --color-highlight: #ff0;
> --color-homeyname: #fff;
> --icon-color-dark:#fff;
> --color-icon-dark:#fff;
> --background-color: rgb(30,30,30);
> --contextmenu-background-color: #fff;
> background-color: var(--background-color);
> color: var(--textcolor);
> }
> }
> 
> .css-1yur33m-Base.e1smyq3q0,
> .css-m338ur-DeviceTile-TopContainer.epcc9q43,
> .css-1dpgz7t-Icon-Root.efypr2h0
> .css-1py9yg8-tbody tr:hover,
> .css-1py9yg8-tbody tr,
> .css-1ip6r5q-DeviceCapabilityListItem-Label.e9o5z8t1,
> .css-1pmd02-sc-Weather.e17mmtdn0,
> .css-1ge3mo5-DeviceName.e8j0ho4 {
> color: var(--color-mono-100);
> }
> 
> .css-y80g9p-Title.e1ngchep0,
> .css-14a3rl8-Title, 
> .css-1xqp3xf-Title, 
> .css-1xqp3xf-Title,
> .css-15fy0ar-body2-CardTitle,
> .css-ujc80q-Button-Root.e8sxues1{
> color: var(--textcolor)
> }
> .css-1293549-Container.e12emes70 > span.css-1dpgz7t-Icon-Root.efypr2h0
> {
> background-color: var(--color-mono-100);
> }
> .css-ujc80q-Button-Root.e8sxues1 {
> background-color: var(--color-blue);
> }
> .e1im01um4 {
> height: 22px;
> }
> .css-mes151-SearchField-Input {
> background-color: var(--button-color);
> }
> .css-1dpgz7t-Icon-Root.efypr2h0 {
> background-color: var(--button-color-text);
> }
> .css-15fy0ar-body2-CardTitle {
> font-weight: bold;
> font-size: 18px;
> }
> .css-1hu8qec-sc-Center {
> width: 100%;
> margin: 0px auto;
> display: flex;
> flex-direction: row;
> justify-content: center;
> }
> .css-ppwutp-Section {
> margin: 0px;
> }
> section.css-ppwutp-Section.e1s1bn0i5 {
> width: 20%;
> }
> section.css-ppwutp-Section.e1s1bn0i5:last-of-type {
> width: 60%;
> display: flex;
> flex-wrap: wrap;
> height: fit-content;
> flex: 1
> }
> 
> .css-rrlt7p-Content.e1s1bn0i3 {
> flex-direction: row;
> display: flex;
> flex-wrap: wrap;
> }
> .flow-card {
> margin: 10px;
> font-size: 13px;
> height: 120px;
> width: 340px;
> box-shadow: unset;
> transition: unset;
> }
> .css-sib1sa-Nav-Container {
> font-size: 12px;
> }
> .css-y1785u-sc-ItemRoot {
> height: fit-content;
> }
> .css-sotwb8-sc-ItemDetails {
> height: 22px;
> }
> .css-94pg0d-sc-ItemDetails:hover.eo5deeg4,
> .css-huzgua-sc-ItemLabel eo5deeg4,
> .css-sotwb8-sc-ItemDetails:hover, .css-94pg0d-sc-ItemDetails:hover {
> background-color: transparent;
> color:#fff;
> }
> 
> .css-id2vso-sc-ItemDetails,
> .css-94pg0d-sc-ItemDetails {
> height: 22px;
> }
> .css-fcjpfp-sc-StickyActions {
> padding-left: 40%;
> margin-left: -60px;
> }
> .css-1xqp3xf-Title {
> width: 100%;
> }
> .css-163q0dt-Root {
> width: 100%;
> }
> .css-18garvg-Textarea, .css-fcjpfp-sc-StickyActions {
> background: transparent;
> }
> .css-glpvqg-Button-Root {
> background: var(--default-button-color);
> }
> 
> .css-6mfsau-sc-Header e1csbp2v3 {
> width: 70%;
> max-width: 100%;
> height: 40px;
> }
> .css-18garvg-Textarea.e1vsakk20 {
> width: 70%;
> height: 40px;
> max-height: 40px;
> border: none;
> color: var(--textcolor);
> caret-color: var(--textcolor);
> }
> .css-a0trfj-Header-HomeyName.e1hl2b440 {
> color: var(--color-homeyname);
> }
> .css-utgxvx-Button.e1s1bn0i0 {
> margin-left: 10px;
> margin-right: 10px;
> width: 87%;
> 
> }
> .css-6mfsau-sc-Header.e1csbp2v3 {
> margin: 0;
> border-bottom: 1px solid;
> padding: 0 10%;
> max-width: unset;
> }
> .css-oq2sid-Line.e1vsakk21 {
> display: none;
> }
> .css-pi077z-sc-Button.et9mcxt0 {
> color: var(--text-color);
> font-size: 16px;
> }
> .css-mes151-SearchField-Input:not([value=""]), .css-mes151-SearchField-Input:focus {
> color: var(--textcolor);
> }
> .css-h40jet-overlay {
> background-color: #fff;
> border-radius: var(--borderRadius-default);
> 
> }
> .css-p2paa9-sc-Content {
> padding: calc( var(--su-root) * 3 ) calc( var(--su-root) * 3 );
> }
> .css-6mfsau-sc-Header.e1csbp2v3 {
> margin: 0 !important;
> border-bottom: 1px solid !important;
> padding: 0 10% !important;
> max-width: unset !important;
> position: fixed;
> z-index: 999;
> background-color: var(--background-color);
> top: 80px;
> opacity: 90%;
> }
> .css-1e8329n-Header-Container {
> display: flex;
> z-index: var(--zIndex-header);
> margin-top: 20px;
> margin-bottom: 20px;
> flex: 0 0 40px;
> -webkit-box-align: center;
> align-items: center;
> -webkit-box-pack: justify;
> justify-content: space-between;
> min-height: 0px;
> }
> .css-17owrf8-h3, .css-8uve29-DeviceTile-Header,
> .css-1ulkaww-h1,
> .css-9xi6tn-SectionTitle {
> color: var(--textcolor)
> }
> .css-9xi6tn-SectionTitle {
> background-color: var(--button-color-text);
> }
> .css-12u75a7-Button-Root.e8sxues1 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
> background-color: var(--color-text)
> }
> .monaco-editor .margin
> {
> background-color: #E5D9BD;
> }
> 
> monaco-editor, .monaco-editor .inputarea.ime-input {
> background-color: #F5EACD;
> }
> .css-some1b,
> .css-117q3uw-sc-Editor,
> .monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input {
> background-color: #F5EACD;
>   
> }
> div.view-lines {
> padding-left: 0px;
> left:4px;
> }
> .monaco-editor .inputarea {
> border: none;
> }
> .current-line {
> background-color:#FFFACD;
> border: none;
> }
> .monaco-editor .view-overlays {
> padding-left: 0px;
> left: 4px;
> }
> .view-overlays div, .cigr,.cigra {
> padding-left: 0px;
> left:0px;
> }
> 
> .css-1jzbmsj-FlowCardHint-Icon.e5jasbj1 > span.css-1dpgz7t-Icon-Root.efypr2h0,
> .css-1yj6fto-CardIcon.e1nu42g86 > span.css-1dpgz7t-Icon-Root.efypr2h0,
> .css-1yv6hw9-CardIcon.e1nu42g86 > span.css-1dpgz7t-Icon-Root.efypr2h0,
> .css-1ck9etg-CardIcon.e1nu42g86 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
> background-color: black;
> }
> .css-ujc80q-Button-Root.e8sxues1 > span.css-1dpgz7t-Icon-Root.efypr2h0,
> .css-gfqu3y-BorderWrapper.e1syuo1q1 > span.css-1dpgz7t-Icon-Root.efypr2h0,
> .e1nu42g81 > span.css-1dpgz7t-Icon-Root.efypr2h0, 
> .css-e0b41j-CardIcon.e1nu42g86 > span.css-1dpgz7t-Icon-Root.efypr2h0,
> .css-19e7a1o-CardIcon.e1nu42g86 > span.css-1dpgz7t-Icon-Root.efypr2h0,
> .css-qswy13-CardIcon.e1nu42g86 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
> background-color: white;
> }
> .css-glpvqg-Button-Root.e8sxues1 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
> background-color: #0b0;
> }
> .css-os8dre-RoundWrapper {
> background-color: unset;
> }
> .css-os8dre-RoundWrapper.e1syuo1q0 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
> background-color: white;
> }
> 
> .eozj5ct2.css-1l95172-Icon-Root-MoreButtonIcon.efypr2h0,
> .e1nu42g81 {
> opacity: unset;
> transform: rotate(-90deg);
> background-color: transparent;
> }
> .css-8zfs37-sc-ItemContextMenuButton,
> .css-8zfs37-sc-ItemContextMenuButton.eo5deeg1 {
> visibility: hidden;
> }
> 
> .css-19ku62l-sc-ItemContextMenuButton.eo5deeg1 {
> transform: rotate(-90deg);
> visibility: visible;
> }
> .css-4d1u4p-ActionButton:hover,
> .eozj5ct2.css-1l95172-Icon-Root-MoreButtonIcon.efypr2h0:hover,
> .e1nu42g81:hover {
> transform: rotate(-90deg);
> opacity: 0.5;
>   
> }
> .eozj5ct2.css-1l95172-Icon-Root-MoreButtonIcon.efypr2h0 {
> background-color: var(--color-mono-100);
> }
> .css-uf4jfm-sc-Extension.e1im01um6 {
> color: var(--color-mono-30);;
> }
> .css-1jzbmsj-FlowCardHint-Icon {
> background-color:white;
> border-radius: 6px;
> padding:0;
> margin-left: 4px;
> transform: translateY(-10px);
> border: 1px solid #fff;
> 
> }
> .css-oz5z5j-ZoneActivity.e1mg4iro0
> {
> color: var(--color-mono-20);
> }
> .css-19rj6pl-IndicatorLightContainer {
> background-color: rgba(255,255,0,1);
> }
> .css-fplr7v-DeviceTile-Root[value="false"] {
> opacity: 0.15;
> }
> .css-glpvqg-Button-Root.e8sxues1 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
> background-color: var(--color-mono-0);
> }
> .css-tyf752-Base.e1smyq3q0 {
> background-color: var(--color-mono-20);
> }
> .css-l7bkth-h2.e1cp72ro3,
> .css-l9bkth-h2.e1cp72ro3,
> .css-1m5m9vt-body1.e1cp72ro1 {
> color: var(--color-mono-20);
> }
> button[disabled] {
> background-color:var(--color-mono-30);;
> }
> .css-utgxvx-Button.e1s1bn0i0:hover,
> .css-glpvqg-Button-Root.e8sxues1:hover,
> .css-glpvqg-Button-Root.e8sxues1:hover {
> color: var(--color-text-light);
> background-color: var(--color-mono-95);  
> transform: scale(1.01);
> }
> .css-ujc80q-Button-Root.e8sxues1 {
> color: var(--color-mono-100);
> background-color: var(--color-blue);  
> transform: scale(1.01);
> opacity: 0.8;
> }
> .css-1e2ljcw-Unit.e1b4rrb93,
> .css-d9fda6-SectionSubTitle.e1sgjjj32 {
> color: var(--color-mono-15)
> }
> 
> ```

Yes, my browser is in dark mode. On windows you have to set windows in dark mode

---

<div class="post-metadata">

**Author:** ![Martijn\_Hoogenbosch](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martijn_hoogenbosch/32/10647_2.png) [@Martijn\_Hoogenbosch](https://community.homey.app/u/Martijn_Hoogenbosch)\
**Post date:** [April 6, 2021, 9:57am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/52 "2021-04-06T09:57:56Z")

</div>

Last question, in your screenshot I can clearly see the correct icons, when I add your CSS the icons are blank, bit weird if you ask me.

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/b/1/b14ea3c84ec45d6228184874f59896d696460a0c.png)

---

<div class="post-metadata">

**Author:** ![tb1962](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/tb1962/32/7888_2.png) [@tb1962](https://community.homey.app/u/tb1962)\
**Post date:** [April 6, 2021, 10:01am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/53 "2021-04-06T10:01:27Z")

</div>

I will look into this, this evening. I must have missed some classes

---

<div class="post-metadata">

**Author:** ![tb1962](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/tb1962/32/7888_2.png) [@tb1962](https://community.homey.app/u/tb1962)\
**Post date:** [April 6, 2021, 5:53pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/54 "2021-04-06T17:53:43Z")

</div>

I have modified the css a little. Not everything is correct but things will break when Athom deploys a new version.

If you like this darkmode theme but don’t want windows in dark mode, you can remove the  
@media query around the body block starting at line 10 and ending at line 68 (but keep body block)

```
   :root {
  --shadedbackground-color: ##ee;
  --textcolor: #000;
  --color-homeyname: #000;
  --background-color: #fff;
  --contextmenu-background-color: #444;
  --default-button-color: #aaa;
}

@media (prefers-color-scheme: dark) {
body {
    --color-line:#5a5a5a;
    --input-border:var(--color-line);
    --color-white: #000;
    --color-mono-100: #ffffff;
    --color-mono-95: #FAFBFD;
    --color-mono-90: #F1F2F6;
    --color-mono-80: #e9eaee;
    --color-mono-70: #DDDEE2;
    --color-mono-60: #D1D2D5;
    --color-mono-50: #c4c5c8;
    --color-mono-40: #ACADB0;
    --color-mono-30: #939496;
    --color-mono-20: #7A7B7D;
    --color-mono-15: #626264;
    --color-mono-10: #49494A;
    --color-mono-05: #313132;
    --color-mono-02: rgb(255,255,255);
    --color-mono-01: #0C0C0C;
    --color-mono-0: #000;
    --color-black: #000000;
    --color-mono-o-02: rgba(255,255,255, 0.02);
    --color-mono-o-10: rgba(255,255,255, 0.1);
    --color-mono-o-50: rgba(255,255,255, 0.5);
    --color-white-o-50: rgba(0,0,0,0.5);
    --color-white-o-75: rgba(0,0,0,0.75);
    --color-white-o-100: rgba(0,0,0,1);
    --color-black-o-50: rgba(255,255,255,0.5);
    --color-ice-white: #121319;
    --color-night-black: #f6f7fb;
    --color-text: var(--color-mono-0);
    --color-text-light: var(--color-mono-0);
    --color-text-light-hover: var(--color-mono-50);
    --color-text-highlight: var(--color-blue);
    --color-text-invert: var(--color-mono-0);
    --color-text-invert-50: var(--color-white-o-50);
    --color-text-disabled: var(--color-mono-30);
    --color-text-inactive: var(--color-mono-20);
    --color-line-light: var(--color-mono-10);
  --color-background-hover: #999;
  --color-component: rgb(50,50,50);
  --shadedbackground-color: #fff;
  --color-body: #000;
  --textcolor: #fff;
  --button-color:#fff;
  --default-button-color: #fff;
  --color-text: #000;
  --color-blue:#07f;
  --color-highlight: #ff0;
  --color-homeyname: #fff;
  --icon-color-dark:#fff;
  --color-icon-dark:#fff;
  --background-color: rgb(30,30,30);
  --contextmenu-background-color: #fff;
  background-color: var(--background-color);
  color: var(--textcolor);
}
}
.css-2ld8rn-SearchField-Input,
.css-1yur33m-Base.e1smyq3q0,
.css-m338ur-DeviceTile-TopContainer.epcc9q43,
.css-1dpgz7t-Icon-Root.efypr2h0
.css-1py9yg8-tbody tr:hover,
.css-1py9yg8-tbody tr,
.css-1ip6r5q-DeviceCapabilityListItem-Label.e9o5z8t1,
.css-1pmd02-sc-Weather.e17mmtdn0,
.css-1ge3mo5-DeviceName.e8j0ho4 {
  color: var(--color-mono-100);
}
.css-y80g9p-Title.e1ngchep0,
.css-14a3rl8-Title, 
.css-1xqp3xf-Title, 
.css-1xqp3xf-Title,
.css-15fy0ar-body2-CardTitle,
.css-ujc80q-Button-Root.e8sxues1{
  color: var(--textcolor)
}
.css-1293549-Container.e12emes70 > span.css-1dpgz7t-Icon-Root.efypr2h0
{
  background-color: var(--color-mono-100);
}
.css-ujc80q-Button-Root.e8sxues1 {
  background-color: var(--color-blue);
}
.e1im01um4 {
  height: 22px;
}
.css-mes151-SearchField-Input {
  background-color: var(--button-color);
}
.css-1dpgz7t-Icon-Root.efypr2h0 {
  background-color: var(--button-color-text);
}
.css-15fy0ar-body2-CardTitle {
  font-weight: bold;
  font-size: 18px;
}
.css-1hu8qec-sc-Center {
    width: 100%;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.css-ppwutp-Section {
    margin: 0px;
}
section.css-ppwutp-Section.e1s1bn0i5 {
    width: 20%;
}
section.css-ppwutp-Section.e1s1bn0i5:last-of-type {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
    flex: 1
}

.css-rrlt7p-Content.e1s1bn0i3 {
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
}
.flow-card {
  margin: 10px;
  font-size: 13px;
  height: 120px;
  width: 340px;
  box-shadow: unset;
  transition: unset;
}
.css-sib1sa-Nav-Container {
  font-size: 12px;
}
.css-y1785u-sc-ItemRoot {
  height: fit-content;
}
.css-sotwb8-sc-ItemDetails {
  height: 22px;
}
.css-94pg0d-sc-ItemDetails:hover.eo5deeg4,
.css-huzgua-sc-ItemLabel eo5deeg4,
.css-sotwb8-sc-ItemDetails:hover, .css-94pg0d-sc-ItemDetails:hover {
  background-color: transparent;
  color:#fff;
}

.css-id2vso-sc-ItemDetails,
.css-94pg0d-sc-ItemDetails {
  height: 22px;
}
.css-fcjpfp-sc-StickyActions {
  padding-left: 40%;
  margin-left: -60px;
}
.css-1xqp3xf-Title {
  width: 100%;
}
.css-163q0dt-Root {
  width: 100%;
}
.css-18garvg-Textarea, .css-fcjpfp-sc-StickyActions {
  background: transparent;
}
.css-glpvqg-Button-Root {
  background: var(--default-button-color);
}

.css-6mfsau-sc-Header e1csbp2v3 {
  width: 70%;
  max-width: 100%;
  height: 40px;
}
.css-18garvg-Textarea.e1vsakk20 {
  width: 70%;
  height: 40px;
  max-height: 40px;
  border: none;
  color: var(--textcolor);
  caret-color: var(--textcolor);
}
.css-a0trfj-Header-HomeyName.e1hl2b440 {
  color: var(--color-homeyname);
}
.css-utgxvx-Button.e1s1bn0i0 {
  margin-left: 10px;
  margin-right: 10px;
  width: 87%;

}
.css-6mfsau-sc-Header.e1csbp2v3 {
  margin: 0;
  border-bottom: 1px solid;
  padding: 0 10%;
  max-width: unset;
}
.css-oq2sid-Line.e1vsakk21 {
  display: none;
}
.css-pi077z-sc-Button.et9mcxt0 {
  color: var(--text-color);
  font-size: 16px;
}
.css-mes151-SearchField-Input:not([value=""]), .css-mes151-SearchField-Input:focus {
  color: var(--textcolor);
}
.css-h40jet-overlay {
  background-color: #fff;
  border-radius: var(--borderRadius-default);

}
.css-p2paa9-sc-Content {
  padding: calc( var(--su-root) * 3 ) calc( var(--su-root) * 3 );
}
.css-6mfsau-sc-Header.e1csbp2v3 {
    margin: 0 !important;
    border-bottom: 1px solid !important;
    padding: 0 10% !important;
    max-width: unset !important;
    position: fixed;
    z-index: 999;
    background-color: var(--background-color);
    top: 80px;
    opacity: 90%;
}
.css-1e8329n-Header-Container {
    display: flex;
    z-index: var(--zIndex-header);
    margin-top: 20px;
    margin-bottom: 20px;
    flex: 0 0 40px;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    min-height: 0px;
}
.css-17owrf8-h3, .css-8uve29-DeviceTile-Header,
.css-1ulkaww-h1,
.css-9xi6tn-SectionTitle {
  color: var(--textcolor)
}
.css-9xi6tn-SectionTitle {
  background-color: var(--button-color-text);
}
.css-12u75a7-Button-Root.e8sxues1 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
    background-color: var(--color-text)
}
.monaco-editor .margin
{
    background-color: #E5D9BD;
}

monaco-editor, .monaco-editor .inputarea.ime-input {
    background-color: #F5EACD;
}
.css-some1b,
.css-117q3uw-sc-Editor,
.monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input {
  background-color: #F5EACD;
  
}
div.view-lines {
  padding-left: 0px;
  left:4px;
}
.monaco-editor .inputarea {
  border: none;
}
.current-line {
  background-color:#FFFACD;
  border: none;
}
.monaco-editor .view-overlays {
  padding-left: 0px;
  left: 4px;
}
.view-overlays div, .cigr,.cigra {
    padding-left: 0px;
    left:0px;
}

.css-1troxg2-sc-IconWrapper,
.css-1pbk2nf-CardIcon.e1nu42g86 {
  background-color: var(--color-mono-20);
}

.css-1ru0ags-sc-Heading,
.css-bj5rw5-ArgumentBase,
.css-bj5rw5-ArgumentBase,
.css-a4os0a-body2-sc-CardTitle {
  color: var(--color-mono-100)
}
.css-1gm55sn-sc-IconWrapper > span:first-of-type,
.css-1ew1tjp-sc-CardIcon > span:first-of-type,
.css-1oyvl1c-sc-IconWrapper > span:first-of-type,
.css-1cyeuzb-sc-IconWrapper > span:first-of-type,
.css-1l6izd9-sc-IconWrapper > span:first-of-type,
.css-1rl3tat-sc-IconWrapper > span:first-of-type,
.css-1b44zfx-CardIcon > span:first-of-type,
.css-psqvu2-sc-CardIcon > span:first-of-type,
.css-d4oq54-sc-IconWrapper > span:first-of-type,
.css-zru3em-sc-IconWrapper > span:first-of-type,
.css-1kn59xg-sc-IconWrapper > span:first-of-type,
.css-1troxg2-sc-IconWrapper > span:first-of-type,
.css-1171vma-sc-CardIcon > span:first-of-type,
.css-1badi50-CardIcon > span:first-of-type,
.css-1pbk2nf-CardIcon > span:first-of-type,
.css-1jzbmsj-FlowCardHint-Icon.e5jasbj1 > span:first-of-type,
.css-1yj6fto-CardIcon > span:first-of-type,
.css-1yv6hw9-CardIcon > span:first-of-type,
.css-1ck9etg-CardIcon > span:first-of-type {
  background-color: black;
}
.css-1psktj1-sc-CardIcon > span:first-of-type,
.css-1utjvo4-sc-IconWrapper > span:first-of-type,
.css-mb7rd8-sc-CardIcon > span:first-of-type,
.css-1gxhbu4-sc-IconWrapper > span:first-of-type,
.css-h3555p-sc-IconWrapper > span:first-of-type,
.css-64uawx-sc-CardIcon > span:first-of-type,
.css-1yvfyp7-sc-IconWrapper > span:first-of-type,
.css-1jxfsgp-sc-CardIcon > span:first-of-type,
.css-42u0cj-sc-IconWrapper > span:first-of-type,
.css-s77mou-sc-IconWrapper > span:first-of-type,
.css-vzdp8n-sc-CardIcon > span:first-of-type,
.css-1xct97i-sc-IconWrapper > span:first-of-type,
.css-uubfww-sc-IconWrapper > span:first-of-type,
.css-emsjvp-sc-IconWrapper > span:first-of-type,
.css-1v9un48-sc-CardIcon > span:first-of-type,
.css-2ew1tjp-sc-CardIcon > span:first-of-type,
.css-1qlxmu0-ArgumentBase.ekk9fzm0,
.css-onw83h-CardIcon > span:first-of-type,
.css-onw83h-IconWrapper > span:first-of-type,
.css-u7w57-sc-IconWrapper > span:first-of-type,
.css-19i8b2z-sc-IconWrapper > span:first-of-type,
.css-12yp2rj-CardIcon > span:first-of-type,
.css-18m61nk-CardIcon > span:first-of-type,
.css-nns3x8-CardIcon > span:first-of-type,
.css-8q1vlr-CardIcon > span:first-of-type,
.css-1i4ezcc-CardIcon > span:first-of-type,
.css-eli0cn-CardIcon > span:first-of-type,
.css-ujc80q-Button-Root.e8sxues1 > span:first-of-type,
.css-gfqu3y-BorderWrapper.e1syuo1q1 > span:first-of-type,
.e1nu42g81 > span.css-1dpgz7t-Icon-Root.efypr2h0, 
.css-e0b41j-CardIcon > span:first-of-type,
.css-19e7a1o-CardIcon > span:first-of-type,
.css-qswy13-CardIcon > span:first-of-type {
    background-color: white;
}
.css-glpvqg-Button-Root.e8sxues1 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
  background-color: #0b0;
}
.css-os8dre-RoundWrapper {
  background-color: unset;
}
.css-os8dre-RoundWrapper.e1syuo1q0 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
  background-color: white;
}

.eozj5ct2.css-1l95172-Icon-Root-MoreButtonIcon.efypr2h0,
.e1nu42g81 {
  opacity: unset;
  transform: rotate(-90deg);
  background-color: transparent;
}
.css-8zfs37-sc-ItemContextMenuButton,
.css-8zfs37-sc-ItemContextMenuButton.eo5deeg1 {
  visibility: hidden;
}

.css-19ku62l-sc-ItemContextMenuButton.eo5deeg1 {
  transform: rotate(-90deg);
  visibility: visible;
}
.css-4d1u4p-ActionButton:hover,
.eozj5ct2.css-1l95172-Icon-Root-MoreButtonIcon.efypr2h0:hover,
.e1nu42g81:hover {
  transform: rotate(-90deg);
  opacity: 0.5;
  
}
.eozj5ct2.css-1l95172-Icon-Root-MoreButtonIcon.efypr2h0 {
  background-color: var(--color-mono-100);
}
.css-uf4jfm-sc-Extension.e1im01um6 {
  color: var(--color-mono-30);;
}
.css-1jzbmsj-FlowCardHint-Icon {
  background-color:white;
  border-radius: 6px;
  padding:0;
  margin-left: 4px;
  transform: translateY(-10px);
  border: 1px solid #fff;

}
.css-oz5z5j-ZoneActivity.e1mg4iro0
{
  color: var(--color-mono-20);
}
.css-19rj6pl-IndicatorLightContainer {
  background-color: rgba(255,255,0,1);
}
.css-fplr7v-DeviceTile-Root[value="false"] {
  opacity: 0.15;
}
.css-glpvqg-Button-Root.e8sxues1 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
  background-color: var(--color-mono-0);
}
.css-tyf752-Base.e1smyq3q0 {
  background-color: var(--color-mono-20);
}
.css-l7bkth-h2.e1cp72ro3,
.css-l9bkth-h2.e1cp72ro3,
.css-1m5m9vt-body1.e1cp72ro1 {
  color: var(--color-mono-20);
}
button[disabled] {
  background-color:var(--color-mono-30);;
}
.css-utgxvx-Button.e1s1bn0i0:hover,
.css-glpvqg-Button-Root.e8sxues1:hover,
.css-glpvqg-Button-Root.e8sxues1:hover {
    color: var(--color-text-light);
    background-color: var(--color-mono-95);  
    transform: scale(1.01);
}
.css-ujc80q-Button-Root.e8sxues1 {
  color: var(--color-mono-100);
  background-color: var(--color-blue);  
  transform: scale(1.01);
  opacity: 0.8;
}
.css-1e2ljcw-Unit.e1b4rrb93,
.css-d9fda6-SectionSubTitle.e1sgjjj32 {
  color: var(--color-mono-15)
}
.css-gxn0rm-sc-Header {
  background-color: var(--color-mono-10);  
}

.css-ujc80q-Button-Root.e8sxues1 > .css-1ly55jo-value.e19mul4b0 {
  background-color:transparent;
  color: white;
}
```

---

<div class="post-metadata">

**Author:** ![Caseda](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/caseda/32/138695_2.png) [@Caseda](https://community.homey.app/u/Caseda)\
**Post date:** [April 6, 2021, 6:22pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/55 "2021-04-06T18:22:07Z")

</div>

Please use the \</\> (when having the code selected) button! when posting such long code next time (it will put it in a nice box), for now I have done it for you to keep the topic clean.  
You’ve done it before with `````, so you know how it can work (too).

---

<div class="post-metadata">

**Author:** ![tb1962](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/tb1962/32/7888_2.png) [@tb1962](https://community.homey.app/u/tb1962)\
**Post date:** [April 6, 2021, 6:26pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/56 "2021-04-06T18:26:24Z")

</div>

Ok, thanx

---

<div class="post-metadata">

**Author:** ![Rocodamelshekima](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rocodamelshekima/32/8209_2.png) [@Rocodamelshekima](https://community.homey.app/u/Rocodamelshekima)\
**Post date:** [April 18, 2021, 12:14pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/57 "2021-04-18T12:14:35Z")

</div>

And it’s gone again. Is there also a way to make this more reliable? Every new version of the app changes the whole layout.

---

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [April 18, 2021, 12:22pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/58 "2021-04-18T12:22:51Z")

</div>

Nope, Athom could making it a lot user friendly when they stop changing the names/ids, but they know that, cause… well they know what users want. 😉

---

<div class="post-metadata">

**Author:** ![Rocodamelshekima](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rocodamelshekima/32/8209_2.png) [@Rocodamelshekima](https://community.homey.app/u/Rocodamelshekima)\
**Post date:** [April 18, 2021, 12:46pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/59 "2021-04-18T12:46:01Z")

</div>

Do i miss something here?

```
/* Show flows in landscape */
.css-14scrpd {
    width: 100%;
  display: flex;    
}
.css-1ab8s7t {
    width: 33%;
}

/* Adjust flowcards width for landcape view */
.css-2gc5z4 {
  width: 95%;
}

.css-1iuu5lg {
  width: 82%;
}
```

---

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [April 18, 2021, 5:22pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/60 "2021-04-18T17:22:16Z")

</div>

Added 2 more Classes and added it to the opening post(s), thanks!

[Previous page](https://community.homey.app/t/homey-web-app-css-customization/39682.md?page=2)

[Next page](https://community.homey.app/t/homey-web-app-css-customization/39682.md?page=4)