fix: html/body background not applied in appearance mode (#13989)

# Pull Request Template

## Description

This PR fixes the white background bleed visible in the widget, article
viewer, and Help Center when dark mode is active.
This change was previously merged but later reverted due to a background
being added for the unread bubble.

Reverted PR: https://github.com/chatwoot/chatwoot/pull/13955,
https://github.com/chatwoot/chatwoot/pull/13981

**What was happening**

While scrolling, the `<body>` element retained a white background in
dark mode. This occurred because dark mode classes were only applied to
inner container elements, not the root.

**What changed**

* **Widget:** Updated the `useDarkMode` composable to sync the `dark`
class to `<html>` using `watchEffect`, allowing `<body>` to inherit dark
theme variables. Also added background styles to `html`, `body`, and
`#app` in `woot.scss`.
* **Help center portal:** Moved `bg-white dark:bg-slate-900` from
`<main>` to `<body>` in the portal layout so the entire page background
responds correctly to dark mode, including within the widget iframe.
* **ArticleViewer:** Replaced hardcoded `bg-white` with `bg-n-solid-1`
to ensure better theming.


Fixes
https://linear.app/chatwoot/issue/CW-6704/widget-body-colour-not-implemented

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

### Screencasts

### Before

**Widget**


https://github.com/user-attachments/assets/e0224ad1-81a6-440a-a824-e115fb806728

**Help center**


https://github.com/user-attachments/assets/40a8ded5-5360-474d-9ec5-fd23e037c845



### After

**Widget**


https://github.com/user-attachments/assets/dd37cc68-99fc-4d60-b2ae-cf41f9d4d38c

<img width="347" height="265" alt="image"
src="https://github.com/user-attachments/assets/89460b36-c8ed-4579-9737-c258c6fe5da5"
/>


**Help center**


https://github.com/user-attachments/assets/bc998c4e-ef77-46fa-ac7f-4ea16d912ce3




## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

This commit is contained in:

Sivin Varghese

2026-07-16 12:21:01 +05:30

committed by

GitHub

co-authored by

Muhsin Keloth

parent ab01ab7853

commit 9cb6c501b5

3 changed files with 7 additions and 3 deletions

									
										app/javascript/widget/App.vue
									
		+4
		
												View File
												
				@@ -66,6 +66,9 @@ export default {

				        ? getLanguageDirection(this.$root.$i18n.locale)

				        : false;

				    },

				    isUnreadOrCampaignView() {

				      return ['unread-messages', 'campaigns'].includes(this.$route.name);

				    },

				  },

				  watch: {

				    activeCampaign() {

				@@ -374,6 +377,7 @@ export default {

				      'is-widget-right': isRightAligned,

				      'is-bubble-hidden': hideMessageBubble,

				      'is-flat-design': isWidgetStyleFlat,

				      'bg-n-slate-2 dark:bg-n-solid-1': !isUnreadOrCampaignView,

				      dark: prefersDarkMode,

				    }"

				  >

									
										app/javascript/widget/views/ArticleViewer.vue
									
		+1
		-1
	
												View File
												
				@@ -10,7 +10,7 @@ export default {

				</script>

				<template>

				  <div class="bg-white h-full">

				  <div class="bg-n-solid-1 h-full">

				    <IframeLoader :url="$route.query.link" />

				  </div>

				</template>