fix/solid background for linux and web (#5163)

web-app/src/containers/ColorPickerAppBgColor.tsx

@@ -16,38 +16,38 @@ export function ColorPickerAppBgColor() {
       r: 20,
       g: 20,
       b: 20,
-      a: 0.4,
+      a: IS_LINUX || !IS_TAURI ? 1 : 0.4,
     },
     {
       r: 250,
       g: 250,
       b: 250,
-      a: 0.4,
+      a: IS_LINUX || !IS_TAURI ? 1 : 0.4,
     },
     {
       r: 70,
       g: 79,
       b: 229,
-      a: 0.5,
+      a: IS_LINUX || !IS_TAURI ? 1 : 0.5,
     },
     {
       r: 238,
       g: 130,
       b: 238,
-      a: 0.5,
+      a: IS_LINUX || !IS_TAURI ? 1 : 0.5,
     },
 
     {
       r: 255,
       g: 99,
       b: 71,
-      a: 0.5,
+      a: IS_LINUX || !IS_TAURI ? 1 : 0.5,
     },
     {
       r: 255,
       g: 165,
       b: 0,
-      a: 0.5,
+      a: IS_LINUX || !IS_TAURI ? 1 : 0.5,
     },
   ]
 
@@ -64,7 +64,7 @@ export function ColorPickerAppBgColor() {
             key={i}
             className={cn(
               'size-4 rounded-full border border-main-view-fg/20',
-              isSelected && 'ring-2 ring-blue-500 border-none'
+              isSelected && 'ring-2 ring-accent border-none'
             )}
             onClick={() => {
               setAppBgColor(item)

web-app/src/hooks/useAppearance.ts

@@ -40,8 +40,18 @@ export const fontSizeOptions = [
 
 // Default appearance settings
 const defaultFontSize: FontSize = '15px'
-const defaultAppBgColor: RgbaColor = { r: 0, g: 0, b: 0, a: 0.4 }
-const defaultLightAppBgColor: RgbaColor = { r: 255, g: 255, b: 255, a: 0.4 }
+const defaultAppBgColor: RgbaColor = {
+  r: 0,
+  g: 0,
+  b: 0,
+  a: IS_LINUX || !IS_TAURI ? 1 : 0.4,
+}
+const defaultLightAppBgColor: RgbaColor = {
+  r: 255,
+  g: 255,
+  b: 255,
+  a: IS_LINUX || !IS_TAURI ? 1 : 0.4,
+}
 const defaultAppMainViewBgColor: RgbaColor = { r: 25, g: 25, b: 25, a: 1 }
 const defaultLightAppMainViewBgColor: RgbaColor = {
   r: 250,

web-app/src/providers/AppearanceProvider.tsx

@@ -35,6 +35,22 @@ export function AppearanceProvider() {
     // Apply font size
     document.documentElement.style.setProperty('--font-size-base', fontSize)
 
+    // Hide alpha slider when IS_LINUX || !IS_TAURI
+    const shouldHideAlpha = IS_LINUX || !IS_TAURI
+    let alphaStyleElement = document.getElementById('alpha-slider-style')
+
+    if (shouldHideAlpha) {
+      if (!alphaStyleElement) {
+        alphaStyleElement = document.createElement('style')
+        alphaStyleElement.id = 'alpha-slider-style'
+        document.head.appendChild(alphaStyleElement)
+      }
+      alphaStyleElement.textContent =
+        '.react-colorful__alpha { display: none !important; }'
+    } else if (alphaStyleElement) {
+      alphaStyleElement.remove()
+    }
+
     // Apply app background color
     // Import culori functions dynamically to avoid SSR issues
     import('culori').then(({ rgb, oklch, formatCss }) => {
@@ -44,7 +60,7 @@ export function AppearanceProvider() {
         r: appBgColor.r / 255,
         g: appBgColor.g / 255,
         b: appBgColor.b / 255,
-        alpha: appBgColor.a,
+        alpha: IS_LINUX || !IS_TAURI ? 1 : appBgColor.a,
       })
 
       const culoriRgbMainView = rgb({