diff --git a/web-app/src/containers/ColorPickerAppBgColor.tsx b/web-app/src/containers/ColorPickerAppBgColor.tsx index d75540154..ef48ca690 100644 --- a/web-app/src/containers/ColorPickerAppBgColor.tsx +++ b/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) diff --git a/web-app/src/hooks/useAppearance.ts b/web-app/src/hooks/useAppearance.ts index bca1ec0e5..0e8617f11 100644 --- a/web-app/src/hooks/useAppearance.ts +++ b/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, diff --git a/web-app/src/providers/AppearanceProvider.tsx b/web-app/src/providers/AppearanceProvider.tsx index fac89f79a..0f7837eb3 100644 --- a/web-app/src/providers/AppearanceProvider.tsx +++ b/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({