Help Needed to Change Pane Separator Color

Hello,

I use MagicUser theme and there is an exceptional issue for me: the pink color. Using the “Style Settings” support of the application, I have set up the color combination I want. However, with one exception: I cannot change the pink color of the Pane Separator. Could you provide an option for this? Thank you…

1 Like

It looks like the pink is only happening when hovering and resizing it, yeah?

You could try this. The value can be a color name ( yellow ), a hex, a rgba, etc.

.workspace-leaf-resize-handle:hover {
    background-color: yellow;
    border-color: yellow;
}

Screenshot 2024-06-13 151008

There’s also an aptly named custom property that works as well. One and done:

body {
    --divider-color-hover: olive;
}
3 Likes

Thanks for using MagicUser theme.

Please check theme version 20.5.0. You can select the divider hover color for light and dark modes (Style Settings). The default color is now the same as the active icon (blue).

Style Settings:
UI SettingsMain Theme Colors → Divider hover color

If it is working well you can also close the issue on its repository. Thanks

All the best

1 Like

Thanks for the responses. You are amazing! And I love you all so much <3<3<3<3<3

I acted a bit hastily and changed the relevant code in “theme.css”. For those interested, let me share that location too:

/* Dividers */
–divider-color: var(–mu-divider-color);
–divider-color-hover: var(–mu-divider-color-hover);
–divider-width: 1px;
–divider-width-hover: 3px;
–divider-vertical-height: calc(100% - var(–header-height));

1 Like

For next time, don’t edit the theme.css file itself. Any changes you make will be overwritten with a theme update. Use a CSS snippet instead. :slightly_smiling_face:

https://help.obsidian.md/Extending+Obsidian/CSS+snippets

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.