diff --git a/index.html b/index.html
index 31695d5..345357b 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
-
+
diff --git a/src/app/editorgrid.ts b/src/app/editorgrid.ts
index f4c3237..c8b12ea 100644
--- a/src/app/editorgrid.ts
+++ b/src/app/editorgrid.ts
@@ -63,7 +63,9 @@ const EditorWrapper = (
return v.div(
{ class: "flex flex-col group" },
v.div(
- { class: "flex group-focus-within:bg-blue-300" },
+ {
+ class: "flex group-focus-within:bg-blue-300 dark:group-focus-within:bg-blue-900",
+ },
v.span({ class: "mx-1 flex-1" }, () => editor.val.title()),
u.InlineButton(() => editor.val.close(), "Close", "❌"),
),
@@ -98,7 +100,7 @@ const TabHeader = (tab: State, del: () => void, k: number) =>
v.div(
{
class: () =>
- `flex-auto flex ${currentTab.val === k ? "bg-green-500" : ""}`,
+ `flex-auto flex ${currentTab.val === k ? "bg-green-500 dark:bg-green-700" : ""}`,
onclick: () => (currentTab.val = k),
},
v.span({ class: "mx-1 flex-1" }, "Tab " + k),
diff --git a/src/app/foldernav.ts b/src/app/foldernav.ts
index ce4a5b7..80f46fc 100644
--- a/src/app/foldernav.ts
+++ b/src/app/foldernav.ts
@@ -38,7 +38,7 @@ window.electronAPI.onFsEvent(async (ev: { event: string; path: string }) => {
ev.event === "unlink"
) {
// Debounce-ish: schedule a refresh
- if(!refreshScheduled) {
+ if (!refreshScheduled) {
refreshScheduled = true;
setTimeout(() => refreshFolder(), 50);
}
@@ -90,7 +90,7 @@ const FsItemView = (tree: FolderTree): HTMLElement => {
if (tree.type === "file")
return v.p(
{
- class: "cursor-pointer hover:bg-gray-100",
+ class: "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700",
onclick: async () =>
addEditor(await OpenFile.openFile(tree.path)),
},
@@ -100,20 +100,22 @@ const FsItemView = (tree: FolderTree): HTMLElement => {
const isOpen = van.state(false);
const children = () =>
isOpen.val
- ? v.ul({}, tree.children?.map(FsItemView))
+ ? v.ul({ class: "pl-4" }, tree.children?.map(FsItemView))
: v.div({ ariaBusy: true });
const folder = v.details(
{
class: "flex-auto inline",
ontoggle: () => (isOpen.val = folder.open),
},
- v.summary(tree.name),
+ v.summary(
+ {
+ class: "cursor-pointer flex hover:bg-gray-100 dark:hover:bg-gray-700",
+ },
+ v.span(() => (isOpen.val ? "📂" : "📁")),
+ tree.name,
+ ),
children,
);
- return v.div(
- { class: "cursor-pointer flex hover:bg-gray-100" },
- v.span(() => (isOpen.val ? "📂" : "📁")),
- folder,
- );
+ return folder;
};
diff --git a/src/app/utils.ts b/src/app/utils.ts
index afd3fda..a831a3d 100644
--- a/src/app/utils.ts
+++ b/src/app/utils.ts
@@ -2,7 +2,7 @@ import van from "vanjs-core";
const v = van.tags;
export const Button = (onclick: () => void, text: string) =>
- v.button({ class: "bg-green-500 p-2", onclick }, text);
+ v.button({ class: "bg-green-500 dark:bg-green-700 p-2", onclick }, text);
export const InlineButton = (
onclick: () => void,