diff --git a/apps/desktop/src-tauri/src/main.rs b/apps/desktop/src-tauri/src/main.rs index ccd97e1ae..359a99933 100644 --- a/apps/desktop/src-tauri/src/main.rs +++ b/apps/desktop/src-tauri/src/main.rs @@ -59,9 +59,9 @@ async fn main() -> Result<(), Box> { #[cfg(target_os = "macos")] { - use macos::{lock_app_theme, AppThemeType}; + // use macos::{lock_app_theme, AppThemeType}; - lock_app_theme(AppThemeType::Dark as _); + // lock_app_theme(AppThemeType::Dark as _); } app.windows().iter().for_each(|(_, window)| { diff --git a/apps/desktop/src/index.html b/apps/desktop/src/index.html index 519e2dd14..0a1c2d024 100644 --- a/apps/desktop/src/index.html +++ b/apps/desktop/src/index.html @@ -1,5 +1,5 @@ - + diff --git a/apps/web/src/index.html b/apps/web/src/index.html index d6c4e1b07..0ec95cc2b 100644 --- a/apps/web/src/index.html +++ b/apps/web/src/index.html @@ -1,5 +1,5 @@ - + Spacedrive diff --git a/packages/interface/src/App.tsx b/packages/interface/src/App.tsx index 8db615e57..9756e7336 100644 --- a/packages/interface/src/App.tsx +++ b/packages/interface/src/App.tsx @@ -23,7 +23,13 @@ export default function SpacedriveInterface() { {/* The `context={defaultContext}` part is required for this to work on Windows. Why, idk, don't question it */} {import.meta.env.DEV && ( - + )} diff --git a/packages/interface/src/AppLayout.tsx b/packages/interface/src/AppLayout.tsx index 994be0ff6..a507411b3 100644 --- a/packages/interface/src/AppLayout.tsx +++ b/packages/interface/src/AppLayout.tsx @@ -32,7 +32,7 @@ export function AppLayout() { >
- +
diff --git a/packages/interface/src/components/key/KeyMounter.tsx b/packages/interface/src/components/key/KeyMounter.tsx index 147836c82..3a7895e9b 100644 --- a/packages/interface/src/components/key/KeyMounter.tsx +++ b/packages/interface/src/components/key/KeyMounter.tsx @@ -77,6 +77,7 @@ export function KeyMounter() { Hashing diff --git a/packages/interface/src/components/layout/Sidebar.tsx b/packages/interface/src/components/layout/Sidebar.tsx index 9039430ac..78dab67ca 100644 --- a/packages/interface/src/components/layout/Sidebar.tsx +++ b/packages/interface/src/components/layout/Sidebar.tsx @@ -172,8 +172,8 @@ export function Sidebar() { return (
@@ -242,35 +242,38 @@ export function Sidebar() { {library && } -
+ {/*
*/} -
- - {({ isActive }) => ( - - )} - - - - - } - > -
- -
- +
+
+ + {({ isActive }) => ( + + )} + + + + + } + > +
+ +
+ +
+ Development Build
); diff --git a/packages/interface/src/hooks/useMediaQuery.ts b/packages/interface/src/hooks/useMediaQuery.ts new file mode 100644 index 000000000..e69de29bb diff --git a/packages/ui/src/ContextMenu.tsx b/packages/ui/src/ContextMenu.tsx index 11464d537..dda24e175 100644 --- a/packages/ui/src/ContextMenu.tsx +++ b/packages/ui/src/ContextMenu.tsx @@ -12,7 +12,7 @@ const MENU_CLASSES = ` flex flex-col min-w-[8rem] px-1 py-0.5 text-left text-sm text-menu-ink - bg-menu border-menu-border backdrop-blur + bg-menu border-menu-border border border-transparent shadow-md shadow-menu-shade/20 select-none cursor-default rounded-md diff --git a/packages/ui/src/Select.tsx b/packages/ui/src/Select.tsx index 3b12c6b75..99c3ddd1b 100644 --- a/packages/ui/src/Select.tsx +++ b/packages/ui/src/Select.tsx @@ -53,7 +53,7 @@ export function SelectOption(props: PropsWithChildren<{ value: string }>) { className={clsx( 'relative flex items-center pl-6 px-1 py-0.5 pr-4 text-xs', 'rounded font-sm cursor-pointer select-none text-ink', - 'focus:outline-none radix-disabled:opacity-50 radix-state-checked:bg-accent' + 'focus:outline-none radix-disabled:opacity-50 hover:bg-accent ' )} value={props.value} > diff --git a/packages/ui/style/colors.scss b/packages/ui/style/colors.scss index 125cc914a..eecc1ea5a 100644 --- a/packages/ui/style/colors.scss +++ b/packages/ui/style/colors.scss @@ -1,6 +1,6 @@ - -.vanilla-light { +@media (prefers-color-scheme: light) { +.vanilla-theme { // global --color-black: 0, 0%, 0%; --color-white: 0, 0%, 100%; @@ -18,7 +18,7 @@ --color-sidebar-line: 230, 10%, 85%; --color-sidebar-divider: 230, 15%, 93%; --color-sidebar-button: 230, 15%, 100%; - --color-sidebar-selected: 230, 10%, 90%; + --color-sidebar-selected: 230, 10%, 80%; --color-sidebar-separator: 230, 15%, 100%; --color-sidebar-shade: 230, 15%, 100%; @@ -35,7 +35,6 @@ --color-app-hover: 230, 5%, 100%; --color-app-shade: 230, 15%, 50%; --color-app-frame: 0, 0%, 100%; - // menu --color-menu: 230, 16%, 14%; --color-menu-line: 230, 5%, 18%; @@ -45,9 +44,10 @@ --color-menu-selected: 230, 5%, 30%; --color-menu-shade: 230, 5%, 0%; } +} - -.vanilla-dark { +@media (prefers-color-scheme: dark) { +.vanilla-theme { // global --color-black: 0, 0%, 0%; --color-white: 0, 0%, 100%; @@ -81,15 +81,14 @@ --color-app-hover: 230, 15%, 20%; --color-app-shade: 230, 15%, 0%; --color-app-frame: 230, 15%, 25%; - - // menu - --color-menu: 230, 16%, 14%; - --color-menu-line: 230, 5%, 18%; - --color-menu-ink: 230, 5%, 100%; - --color-menu-faint: 230, 5%, 80%; - --color-menu-hover: 230, 5%, 30%; - --color-menu-selected: 230, 5%, 30%; - --color-menu-shade: 230, 5%, 0%; + // menu + --color-menu: 230, 16%, 7%; + --color-menu-line: 230, 5%, 18%; + --color-menu-ink: 230, 5%, 100%; + --color-menu-faint: 230, 5%, 80%; + --color-menu-hover: 230, 5%, 30%; + --color-menu-selected: 230, 5%, 30%; + --color-menu-shade: 230, 5%, 0%; + } } - // ruby: 295