9cb6c501b5
# 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>
17 lines
282 B
Vue
17 lines
282 B
Vue
<script>
|
|
import IframeLoader from 'shared/components/IframeLoader.vue';
|
|
|
|
export default {
|
|
name: 'ArticleViewer',
|
|
components: {
|
|
IframeLoader,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-n-solid-1 h-full">
|
|
<IframeLoader :url="$route.query.link" />
|
|
</div>
|
|
</template>
|