How to 'highlight' the border between panes?

I use Atom Dark and I fumble at resizing panes several dozen times a day.

Is it possible to make that break/border more pronounced?

Thanks!

Can you see it?
image

You can use the built-in Developer Tools to inspect any element like you can do in your web browser. Find the selector you want to change and add a CSS rule to it in your user stylesheet (styles.less).

Example:

:root {
  --highlighted-border-color: rgba(255, 255, 255, calc(1/3));
}

.atom-dock-inner.atom-dock-open.left {
    border-right: 1px solid var(--highlighted-border-color);
}
1 Like

I will never use atom the same again. Thanks @idleberg !!

This is what I ended up throwing in my styles.less

:root {
	--highlighted-border-color: hsl(205, 90%, 22%);
}

body
	> atom-workspace
	> atom-workspace-axis
	> atom-workspace-axis
	> atom-pane-container
	> atom-pane-axis
	> atom-pane-resize-handle {
	border: 4px solid var(--highlighted-border-color);
}

body
	> atom-workspace
	> atom-workspace-axis
	> atom-panel-container.left
	> atom-dock
	> div
	> div.atom-dock-mask
	> div
	> div.atom-dock-resize-handle.left.atom-dock-resize-handle-resizable {
	border: 2px solid var(--highlighted-border-color);
}