LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
# Pull Request Template

## Description

This PR fixes the white background bleed visible in the widget, widget
article viewer and help center when dark mode is active.

**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

**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
This commit is contained in:
Sivin Varghese
2026-03-31 16:55:21 +05:30
committed by GitHub
parent b4b5de9b46
commit 5de7ae492c
4 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/widget/assets/scss/woot.scss
View File

@@ -7,7 +7,7 @@
html, html,
body { body {
@apply antialiased h-full; @apply antialiased h-full bg-n-slate-2 dark:bg-n-solid-1;
} }
.is-mobile { .is-mobile {

6
app/javascript/widget/composables/useDarkMode.js
View File

@@ -1,4 +1,4 @@
import { computed } from 'vue'; import { computed, watchEffect } from 'vue';
import { useMapGetter } from 'dashboard/composables/store'; import { useMapGetter } from 'dashboard/composables/store';
const isDarkModeAuto = mode => mode === 'auto'; const isDarkModeAuto = mode => mode === 'auto';
@@ -23,6 +23,10 @@ export function useDarkMode() {
calculatePrefersDarkMode(darkMode.value, systemPreference.value) calculatePrefersDarkMode(darkMode.value, systemPreference.value)
); );
watchEffect(() => {
document.documentElement.classList.toggle('dark', prefersDarkMode.value);
});
return { return {
darkMode, darkMode,
prefersDarkMode, prefersDarkMode,

2
app/javascript/widget/views/ArticleViewer.vue
View File

@@ -10,7 +10,7 @@ export default {
</script> </script>
<template> <template>
<div class="bg-white h-full"> <div class="bg-n-solid-1 h-full">
<IframeLoader :url="$route.query.link" /> <IframeLoader :url="$route.query.link" />
</div> </div>
</template> </template>

4
app/views/layouts/portal.html.erb
View File

@@ -58,9 +58,9 @@ By default, it renders:
} }
</script> </script>
</head> </head>
<body> <body class="bg-white dark:bg-slate-900">
<div id="portal" class="antialiased"> <div id="portal" class="antialiased">
<main class="flex flex-col min-h-screen bg-white main-content dark:bg-slate-900" role="main"> <main class="flex flex-col min-h-screen main-content" role="main">
<% if !@is_plain_layout_enabled %> <% if !@is_plain_layout_enabled %>
<%= render "public/api/v1/portals/header", portal: @portal %> <%= render "public/api/v1/portals/header", portal: @portal %>
<% end %> <% end %>