fix: remove dark theme from blabsy (#449)

Author: coodos

platforms/blabsy/src/components/common/seo.tsx

@@ -2,7 +2,7 @@ import { useRouter } from 'next/router';
 import Head from 'next/head';
 import { siteURL } from '@lib/env';
 
-type MainLayoutProps = {
+type SEOProps = {
     title: string;
     image?: string;
     description?: string;
@@ -12,7 +12,7 @@ export function SEO({
     title,
     image,
     description
-}: MainLayoutProps): JSX.Element {
+}: SEOProps): JSX.Element {
     const { asPath } = useRouter();
 
     return (

platforms/blabsy/src/components/modal/display-modal.tsx

@@ -1,20 +1,13 @@
 import { UserAvatar } from '@components/user/user-avatar';
 import { UserName } from '@components/user/user-name';
-import { InputThemeRadio } from '@components/input/input-theme-radio';
 import { Button } from '@components/ui/button';
 import { InputAccentRadio } from '@components/input/input-accent-radio';
-import type { Theme, Accent } from '@lib/types/theme';
+import type { Accent } from '@lib/types/theme';
 
 type DisplayModalProps = {
     closeModal: () => void;
 };
 
-const themes: Readonly<[Theme, string][]> = [
-    ['light', 'Default'],
-    ['dim', 'Dim'],
-    ['dark', 'Lights out']
-];
-
 const accentsColor: Readonly<Accent[]> = [
     'blue',
     'yellow',
@@ -77,23 +70,7 @@ export function DisplayModal({ closeModal }: DisplayModalProps): JSX.Element {
                     ))}
                 </div>
             </div>
-            <div className='flex w-full flex-col gap-1'>
-                <p className='text-sm font-bold text-light-secondary dark:text-dark-secondary'>
-                    Background
-                </p>
-                <div
-                    className='hover-animation grid grid-rows-3 gap-3 rounded-2xl bg-main-sidebar-background
-                     px-4 py-3 xs:grid-cols-3 xs:grid-rows-none'
-                >
-                    {themes.map(([themeType, label]) => (
-                        <InputThemeRadio
-                            type={themeType}
-                            label={label}
-                            key={themeType}
-                        />
-                    ))}
-                </div>
-            </div>
+            {/* Theme selection removed - always dark mode */}
             <Button
                 className='bg-main-accent px-4 py-1.5 font-bold
                    text-white hover:bg-main-accent/90 active:bg-main-accent/75'

platforms/blabsy/src/lib/context/theme-context.tsx

@@ -22,14 +22,8 @@ type ThemeContextProviderProps = {
 };
 
 function setInitialTheme(): Theme {
-    if (typeof window === 'undefined') return 'dark';
-
-    const savedTheme = localStorage.getItem('theme') as Theme | null;
-    const prefersDark = window.matchMedia(
-        '(prefers-color-scheme: dark)'
-    ).matches;
-
-    return savedTheme ?? (prefersDark ? 'dark' : 'light');
+    // Always return dark theme - no light mode option
+    return 'dark';
 }
 
 function setInitialAccent(): Accent {
@@ -50,50 +44,60 @@ export function ThemeContextProvider({
     const { id: userId, theme: userTheme, accent: userAccent } = user ?? {};
 
     useEffect(() => {
-        if (user && userTheme) setTheme(userTheme);
+        // Always force dark theme, ignore user theme preference
+        setTheme('dark');
     }, [userId, userTheme]);
 
     useEffect(() => {
         if (user && userAccent) setAccent(userAccent);
     }, [userId, userAccent]);
 
     useEffect(() => {
-        const flipTheme = (theme: Theme): NodeJS.Timeout | undefined => {
+        const flipTheme = (): NodeJS.Timeout | undefined => {
             const root = document.documentElement;
-            const targetTheme = theme === 'dim' ? 'dark' : theme;
-
-            if (targetTheme === 'dark') root.classList.add('dark');
-            else root.classList.remove('dark');
+            // Always use dark theme
+            const forcedTheme: Theme = 'dark';
+            
+            // Always ensure dark class is present and never remove it
+            root.classList.add('dark');
+            // Prevent any accidental removal
+            if (!root.classList.contains('dark')) {
+                root.classList.add('dark');
+            }
 
             root.style.setProperty(
                 '--main-background',
-                `var(--${theme}-background)`
+                `var(--${forcedTheme}-background)`
             );
 
             root.style.setProperty(
                 '--main-search-background',
-                `var(--${theme}-search-background)`
+                `var(--${forcedTheme}-search-background)`
             );
 
             root.style.setProperty(
                 '--main-sidebar-background',
-                `var(--${theme}-sidebar-background)`
+                `var(--${forcedTheme}-sidebar-background)`
             );
 
             if (user) {
-                localStorage.setItem('theme', theme);
+                localStorage.setItem('theme', forcedTheme);
                 return setTimeout(
-                    () => void updateUserTheme(user.id, { theme }),
+                    () => void updateUserTheme(user.id, { theme: forcedTheme }),
                     500
                 );
             }
 
             return undefined;
         };
 
-        const timeoutId = flipTheme(theme);
+        const timeoutId = flipTheme();
+        // Ensure dark class is always applied on mount and updates
+        const root = document.documentElement;
+        root.classList.add('dark');
+        
         return () => clearTimeout(timeoutId);
-    }, [userId, theme]);
+    }, [userId]);
 
     useEffect(() => {
         const flipAccent = (accent: Accent): NodeJS.Timeout | undefined => {
@@ -118,7 +122,10 @@ export function ThemeContextProvider({
 
     const changeTheme = ({
         target: { value }
-    }: ChangeEvent<HTMLInputElement>): void => setTheme(value as Theme);
+    }: ChangeEvent<HTMLInputElement>): void => {
+        // Ignore theme changes - always keep dark mode
+        setTheme('dark');
+    };
 
     const changeAccent = ({
         target: { value }

platforms/blabsy/src/pages/404.tsx

@@ -1,17 +1,15 @@
 import Error from 'next/error';
-import { useTheme } from '@lib/context/theme-context';
 import { SEO } from '@components/common/seo';
 
 export default function NotFound(): JSX.Element {
-    const { theme } = useTheme();
-
-    const isDarkMode = ['dim', 'dark'].includes(theme);
+    // Always use dark mode
+    const isDarkMode = true;
 
     return (
         <>
             <SEO
                 title='Page not found / Blabsy'
-                description='Sorry we couldn’t find the page you were looking for.'
+                description='Sorry we could not find the page you were looking for.'
                 image='/404.png'
             />
             <Error statusCode={404} withDarkMode={isDarkMode} />

platforms/blabsy/src/pages/_document.tsx

@@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from 'next/document';
 
 export default function Document(): JSX.Element {
     return (
-        <Html lang='en'>
+        <Html lang='en' className='dark'>
             <Head />
             <body>
                 <Main />