HHH - HierarchyHighlightHeadings Theme

Plugs and Libraries
1

HHH Theme

Having delved into tree-based file systems and tree-UI heading picker, wouldn’t it be intriguing to experiment with a tree-like hierarchically highlighted heading theme as well?

The title (that cursor’s @) and its subtitles are highlighted

This JS-adopted plug shares some insights from @Mr.Red’s JS injection tech, @malys’s theme and @Thaurin’s plug’s event.listen.

There is also a pure CSS-version that requires no installation; however, its highlighting affects the child headings of other sibling headings — a limitation intrinsic to CSS that can be addressed with JavaScript.

This plug works in light theme (and mobile), too, but less attractive.

Meet other themes

1 Like
2

This is so awesome i definitely would use this!

I hope you don’t mind, but I took the liberty and tweaked the colors and hover effect a little bit to be more pronounced. here is the result:

i would also recommend (was recommended me too by @mjf ) to use oklch() colors instead of rgb(), or #RGB colore. they’re more predictible and easier manipulable.

1 Like
3

Never mind, let’s blend: Just as in《Annihilation》and《Prometheus》, where all forms of life fuse through the blending of DNA, so too do human and AI interweave within the code. :dotted_line_face:

Incidentally, Treeview Extension to Drag & Resize might also benefit from below: ?

event.listen {
  name = 'system:ready',
  run = function(e)
    editor.invokeCommand "Tree View: Toggle"
    js.import("/.fs/Library/PanelDragResize.js").enableDrag()
  end
}

Additionally, I find that 2 plugs will be affected by your css hack:)

Is it time to fully implement this ?

1 Like
4

Like i say before, every contribution improve code and at the end, SB ecosystem is richer than ever and plugs quality is increasing.

Please share and publish your code, use friendly licence=> ecosystem stimulation.

@ChenZhu-Xie awesome plug

2 Likes