Skip to content

Update Dark mode #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ajantrania wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Update Dark mode #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dd735db
Improve Icon Layout
ajantrania Nov 13, 2025
354082a
Update dark mode theme
ajantrania Nov 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .vscode/tasks.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
},
{
"type": "shell",
"command": "act --platform ubuntu-latest=catthehacker/ubuntu:act-24.04 --container-architecture linux/arm64 --bind --env-file <(aws configure export-credentials --format env --profile=archodex-dev-AdministratorAccess) --use-new-action-cache --reuse --job deploy",
"command": "act --platform ubuntu-latest=catthehacker/ubuntu:act-24.04 --container-architecture linux/arm64 --env-file <(aws configure export-credentials --format env --profile=archodex-dev-AdministratorAccess) --use-new-action-cache --reuse --job deploy",
"problemMatcher": [],
"group": {
"kind": "build"
Expand Down
12 changes: 7 additions & 5 deletions src/ELKEdge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,16 @@ type ELKEdge = Edge<ELKEdgeData, 'elk'>;

const edgeClassName = (selected = false, eventChainHovered = false) => {
// Stroke colors must be !important to override react-flow's default styles
const classes = ['stroke-foreground', 'dark:stroke-primary'];
const classes = [];

if (selected) {
classes.push('stroke-primary', 'stroke-[2px]');
if (selected && eventChainHovered) {
classes.push('stroke-edge-selected', 'stroke-[3px]');
} else if (selected) {
classes.push('stroke-edge-selected', 'stroke-[2px]');
} else if (eventChainHovered) {
classes.push('opacity-40', 'stroke-[2px]');
classes.push('stroke-edge-hover', 'stroke-[2px]');
} else {
classes.push('opacity-40');
classes.push('stroke-edge');
}

return classes.join(' ');
Expand Down
4 changes: 2 additions & 2 deletions src/Flow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ defs > marker {
stroke: var(--color-foreground);

html.dark & {
fill: var(--color-primary);
stroke: var(--color-primary);
fill: var(--edge);
stroke: var(--edge);
}
}

Expand Down
6 changes: 2 additions & 4 deletions src/QueryGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,11 +264,9 @@ const Inner: React.FC<QueryGraphProps> = ({ nodes, edges, eventChainLinks, laidO
// React flow has built-in styling that is hard to override...
className={[
'bg-background',
'shadow-[0_0_2px_1px_rgba(0,0,0,0.08)]',
'*:not-last:border-b',
// Shadows don't work as well in dark mode
'dark:shadow-none',
'dark:border',
'border',
'shadow-md',
// Color for disabled button icons
'*:disabled:[&_svg]:stroke-[#ddd]',
'*:disabled:[&_svg]:dark:stroke-[#777]',
Expand Down
10 changes: 4 additions & 6 deletions src/ResourceNode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ const containerClassName = (selected: boolean, data: ResourceNodeData) => {
'after:rounded-md',
'after:border-primary',
'after:pointer-events-none',
'after:border-[1px]',
];

if (selected) {
Expand Down Expand Up @@ -437,12 +438,9 @@ const ResourceNode = ({ id, selected, data }: NodeProps<ResourceNode>) => {
'flex-col',
'rounded-md',
'overflow-hidden',
'shadow-lg',
'hover:shadow-2xl',
'focus:shadow-2xl',
'dark:shadow-lg-dark',
'dark:hover:shadow-2xl-dark',
'dark:focus:shadow-2xl-dark',
'hover:outline-hover',
'hover:outline-2',
'hover:outline-offset-4',
'pointer-events-auto',
].join(' ')}
ref={tutorialSendGridSecretRef}
Expand Down
12 changes: 8 additions & 4 deletions src/ResourcesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,8 @@ const ResourcesTable: React.FC<ResourcesTableProps> = ({ resources, selectedReso
sortingFn: (rowA, rowB) =>
nodeIdFromResourceId(rowA.original.id).localeCompare(nodeIdFromResourceId(rowB.original.id)),
cell: ({ getValue }) => (
<div className="h-full flex items-center">
<ResourceIcons id={getValue<ResourceId>()} />
<div className="h-full flex items-center gap-1">
<ResourceIcons id={getValue<ResourceId>()} heightInPixels={32} />
<div className="flex items-center">
<ResourceLink id={getValue<ResourceId>()} />
</div>
Expand Down Expand Up @@ -104,13 +104,17 @@ const ResourcesTable: React.FC<ResourcesTableProps> = ({ resources, selectedReso
accessorKey: 'first_seen_at',
header: `First Seen (${TZ_OFFSET})`,
sortingFn: 'datetime',
cell: ({ getValue }) => <span className="text-nowrap">{new Date(getValue<string>()).toLocaleString()}</span>,
cell: ({ getValue }) => (
<span className="text-table-muted text-nowrap">{new Date(getValue<string>()).toLocaleString()}</span>
),
},
{
accessorKey: 'last_seen_at',
header: `Last Seen (${TZ_OFFSET})`,
sortingFn: 'datetime',
cell: ({ getValue }) => <span className="text-nowrap">{new Date(getValue<string>()).toLocaleString()}</span>,
cell: ({ getValue }) => (
<span className="text-table-muted text-nowrap">{new Date(getValue<string>()).toLocaleString()}</span>
),
},
],
initialState: { sorting: [{ id: 'id', desc: false }] },
Expand Down
2 changes: 1 addition & 1 deletion src/components/ResourceIcons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const ResourceIcons: React.FC<ResourceIconsProps> = ({
</TooltipProvider>,
);

return <>{icons}</>;
return <div className="flex gap-0.5">{icons}</div>;
};

const iconClassName = (highlighted: boolean) => {
Expand Down
59 changes: 36 additions & 23 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,14 @@
--color-sidebar: var(--sidebar-background);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);

--shadow-lg-dark: 0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--shadow-2xl-dark: 0 25px 50px -12px rgb(255 255 255 / 0.25);
--color-hover: var(--hover);
--color-edge: var(--edge);
--color-edge-hover: var(--edge-hover);
--color-edge-selected: var(--edge-selected);

--resource-title-height: 46px;
--env-badge-size: 20px;
Expand Down Expand Up @@ -112,7 +112,6 @@
--sidebar-background: var(--color-neutral-50);
--sidebar-foreground: black;
--sidebar-primary: black;
--sidebar-primary-foreground: var(--color-neutral-50);
--sidebar-accent: var(--color-neutral-100);
--sidebar-accent-foreground: black;
--sidebar-border: var(--color-neutral-200);
Expand All @@ -139,40 +138,54 @@
--ring: #ee847b;
--radius: 0.5rem;

--hover: var(--primary);

--edge: var(--color-neutral-400);
--edge-hover: var(--hover);
--edge-selected: var(--primary);

--node-title-text: var(--primary);
}
.dark {
--sidebar-background: var(--color-neutral-950);
--sidebar-foreground: white;
--sidebar-primary: white;
--sidebar-primary-foreground: var(--color-neutral-950);
--sidebar-accent: var(--color-neutral-800);
--base: oklch(25% 0.015 250);
Copy link
Member

@txase txase Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm curious if you tried the tailwindcss slate, gray, or zinc colors? An arbitrary base is fine, just wondering if it's worth using one of their standard colors so it's easier to read this value for what it is. Or maybe a comment about how it's close to a gray-800?

Copy link
Member Author

@ajantrania ajantrania Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tailwind gray scale is a bit more blue than what I had here, but I think it works (though gray-900 is closer). I'll switch to that

image

For another PR, but this is the WWW following a similar theme:
image

--base: var(--color-gray-900);

--sidebar-background: oklch(from var(--base) calc(l - 0.025) c h);
--sidebar-foreground: var(--foreground);
--sidebar-primary: var(--foreground);
--sidebar-accent: oklch(from var(--base) calc(l + 0.03) c h);
--sidebar-accent-foreground: white;
--sidebar-border: var(--color-neutral-800);
--sidebar-border: var(--border);
--sidebar-ring: #ee847b;

--background: black;
--foreground: white;
--card: black;
--card-foreground: black;
--popover: black;
--popover-foreground: white;
--background: var(--base);
--foreground: var(--color-neutral-200);
--card: var(--base);
--card-foreground: var(--foreground);
--popover: oklch(from var(--base) calc(l + 0.1) c h);
--popover-foreground: var(--foreground);
--primary: #ee847b;
--primary-foreground: black;
--primary-foreground: var(--base);
--secondary: var(--color-neutral-900);
--secondary-foreground: white;
--muted: var(--color-neutral-900);
--muted: oklch(from var(--base) calc(l + 0.03) c h);
--muted-foreground: var(--color-neutral-400);
--accent: var(--color-neutral-900);
--accent-foreground: white;
--destructive: hsl(0 100% 30%);
--destructive: hsl(355 80 50);
--destructive-foreground: black;
--border: var(--color-neutral-800);
--input: var(--color-neutral-800);
--border: var(--color-neutral-700);
--input: var(--border);
--ring: #ee847b;
--radius: 0.5rem;

--node-title-text: var(--color-foreground);
--hover: oklch(from var(--primary) calc(l + 0.1) c h);

--edge: oklch(from var(--primary) calc(l - 0.2) calc(c * 0.25) h);
--edge-hover: var(--hover);
--edge-selected: var(--primary);

--node-title-text: var(--color-neutral-100);
}
}

Expand Down