Hey there, I hope you've been doing well. I'm using your Jupiter theme and it's beautiful, but I was wondering if there was a way to make the light/dark mode switch also work for custom cursors!
sure, i'm gonna go ahead and assume you're using an image (at most 128x128, or major browsers won't display them) for your custom cursor.
if you already have the images uploaded somewhere, add the following lines into your Custom CSS (instructions).
/* Both modes/Dark mode, default cursor */
html { cursor: url("https://YOURURLHERE.png"), default }
/* Both modes/Dark mode, cursor for hovering over links */
html a { cursor: url("https://YOURURLHERE.png"), default }
/* Light mode, default cursor */
html.light { cursor: url("https://YOURURLHERE.png"), default }
/* Light mode, cursor for hovering over links */
html.light a { cursor: url("https://YOURURLHERE.png"), default }
if you don't already have the images uploaded somewhere, go into the Edit HTML panel from the Customize page and Ctrl+F/Cmd+F to "Images" to find this section:
and add the following lines underneath the LM Avatar line:
<meta name="image:Cursor" content="">
<meta name="image:Link cursor" content="">
<meta name="image:Cursor" content="">
<meta name="image:LM Link cursor" content="">
then Ctrl+F/Cmd+F to "CustomCSS" to find this section:
and replace it with the following lines:
{block:IfCursorImage}
{block:IfNotLinkCursorImage}a,{/block:IfNotLinkCursorImage}
html { cursor: url("{image:Cursor}"), default }
{/block:IfCursorImage}
{block:IfLinkCursorImage}
html a { cursor: url("{image:Link cursor}"), default }
{/block:IfLinkCursorImage}
{block:IfLMCursorImage}
{block:IfNotLMLinkCursorImage}html.light a,{/block:IfNotLMLinkCursorImage}
html.light { cursor: url("{image:LM Cursor}"), default }
{/block:IfLMCursorImage}
{block:IfLMLinkCursorImage}
html.light a { cursor: url("{image:LM Link cursor}"), default }
{/block:IfLMLinkCursorImage}
/* Custom CSS */
{CustomCSS}
</style>
hit save, and you'll now be able to add images directly from the Customize panel. again, (LM) Cursor is the default, and (LM) Link cursor is for hovering over links.
