# How to change node-red header color?

**URL:** <https://discourse.nodered.org/t/how-to-change-node-red-header-color/76751>\
**Category:** General\
**Created:** [20 March 2023 14:09 UTC](https://discourse.nodered.org/t/how-to-change-node-red-header-color/76751 "2023-03-20T14:09:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![andreza](https://avatars.discourse-cdn.com/v4/letter/a/f07891/32.png) [@andreza](https://discourse.nodered.org/u/andreza)\
**Post date:** [20 March 2023 14:09 UTC](https://discourse.nodered.org/t/how-to-change-node-red-header-color/76751/1 "2023-03-20T14:09:33Z")

</div>

How do i change the black header color of node-red?  
I tried several times but was unsuccessful.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [20 March 2023 14:31 UTC](https://discourse.nodered.org/t/how-to-change-node-red-header-color/76751/2 "2023-03-20T14:31:21Z")

</div>

Edit settings.css and add a custom CSS file for the editor  
Below  
editorTheme: {  
insert this: (change the css file pathname to suit your setup)

```auto
       page: {
          css: "/home/pi/.node-red/editor.css"
       },

```

Now in ~/.node-red/editor.css you can specify various styling options for the editor such as

```auto
#red-ui-header {
background-color: pink;
}

```

You need to restart Node-red to load the CSS file.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [19 May 2023 14:31 UTC](https://discourse.nodered.org/t/how-to-change-node-red-header-color/76751/3 "2023-05-19T14:31:44Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.