# TUTORIAL – Change section, page, or project background color **URL:** \ **Category:** Tutorials\ **Tags:** custom-css, background-color\ **Created:** [February 16, 2022, 11:43am UTC](https://community.weweb.io/t/tutorial-change-section-page-or-project-background-color/238 "2022-02-16T11:43:26Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [February 16, 2022, 11:43am UTC](https://community.weweb.io/t/tutorial-change-section-page-or-project-background-color/238/1 "2022-02-16T11:43:26Z")
In WeWeb, you can add CSS styles at section, page, or project level. ## Change a Section’s Background Color - Select the section on which you want to apply the change - Go to the Styling \> Background menu - Change the background color ![change section background color](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/1600040a8cf93c935b58f0f006040b7111d96e09.gif) ## Change a Page’s Background Color - Go to Page Settings \> Custom Code - Add the style you want in the head ![change page background color](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/3fac37dd1ce8eb70168870cdf93ce57759dbf60f.gif) > ⚠ Custom code at page level does not currently render in preview mode. You need to publish your project to view the changes ⚠ ## Change a Project’s Background Color - Go to Project Settings \> Custom Code - Add the style you want in the head ![change project background color](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/f16d58d596b6aeb240019f31ac6d0f559d431880.png) > ⚠ Custom code at project level does not currently render in preview mode. You need to publish your project to view the changes ⚠ ---
**Author:** ![Matthieu](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/matthieu/32/1288_2.png) [@Matthieu](https://community.weweb.io/u/Matthieu)\ **Post date:** [January 26, 2023, 2:26pm UTC](https://community.weweb.io/t/tutorial-change-section-page-or-project-background-color/238/2 "2023-01-26T14:26:58Z")
Thanks @Joyce That was exactly what I needed. Is there a chance I can use a referenced color in the custom code using some sort of SCSS / LESS value ? ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [February 1, 2023, 9:34pm UTC](https://community.weweb.io/t/tutorial-change-section-page-or-project-background-color/238/3 "2023-02-01T21:34:49Z")
Hey @Matthieu, do you mean using a color from the project’s design system? I’m not sure. I’ll need to check with the dev team and get back to you on that one. ---
**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\ **Post date:** [February 2, 2023, 10:18am UTC](https://community.weweb.io/t/tutorial-change-section-page-or-project-background-color/238/4 "2023-02-02T10:18:02Z")
Internally we use css variable with id, so its doable, but a bit tricky to obtain these id at the moment. Two hacks to get these ids: - Open any formula, and bind this to your colors. Switch to js, and the id will be display. Then you can use var(–YOUR\_ID) on your css style. ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/8dcb53c83d4c703edb7bc604df5980e4e354097d.png) - Open the devtool on your editor, and search for the html element (the one from the iframe if you are in the editor). You will see a bunch of css variable defined here, including your colors. ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/5686ca4d4d4226532567a815068f5490d3dc68da.png) Hope this help ! ---
**Author:** ![Matthieu](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/matthieu/32/1288_2.png) [@Matthieu](https://community.weweb.io/u/Matthieu)\ **Post date:** [February 2, 2023, 3:35pm UTC](https://community.weweb.io/t/tutorial-change-section-page-or-project-background-color/238/5 "2023-02-02T15:35:38Z")
Thanks @joyce & @aurelie That was exactly what I need. 😍 And @Flo took a look at my project this morning and the ugliness of it convinced him to do something about setting the color of the `html` tag in the editor and have it rendered. (BTW do you know how I can mark a topic as solved?) Have a nice day. Matth- ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [February 2, 2023, 4:01pm UTC](https://community.weweb.io/t/tutorial-change-section-page-or-project-background-color/238/6 "2023-02-02T16:01:25Z")
> [@Matthieu](#): > > the ugliness of it convinced him to do something about setting the color of the `html` tag in the editor and have it rendered looool nicely done 😆 ---
**Author:** ![Matthieu](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/matthieu/32/1288_2.png) [@Matthieu](https://community.weweb.io/u/Matthieu)\ **Post date:** [February 2, 2023, 4:12pm UTC](https://community.weweb.io/t/tutorial-change-section-page-or-project-background-color/238/7 "2023-02-02T16:12:44Z")
I know right 😅 ---
**Author:** ![Matthieu](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/matthieu/32/1288_2.png) [@Matthieu](https://community.weweb.io/u/Matthieu)\ **Post date:** [February 16, 2023, 1:29pm UTC](https://community.weweb.io/t/tutorial-change-section-page-or-project-background-color/238/8 "2023-02-16T13:29:44Z")
Actually @Damien gave me a nice snippet of code !! In the app triggers: ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/74623db437635f0ca0a93741607ccfe75f9d8877.png) Create a new WF on app load before collection fetch: ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/a60be11d6255adb7a83bf6297fa681b6ab2e5a8d.png) With a custom JS such as: ```auto wwLib.getFrontDocument().documentElement.style.background = context.colors['bf29175d-7580-412b-aac3-ea6e3add6e76'] ``` Or hard code your fav color. I’d rather use my referenced color here. AND TADAAAA: you’ve got a nice background even for the HTML while editing in the studio. ---
**Author:** ![WimDC](https://avatars.discourse-cdn.com/v4/letter/w/8e7dd6/32.png) [@WimDC](https://community.weweb.io/u/WimDC)\ **Post date:** [August 7, 2025, 6:17pm UTC](https://community.weweb.io/t/tutorial-change-section-page-or-project-background-color/238/9 "2025-08-07T18:17:06Z")
Hi, I’m trying to do this with the code in the first image (background color of whole page), but I get an error : ![2025-08-07_201543](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/3c3837ddc41622b205ee54276f7c4852d89afdf7.png)