Heading background not working with popovers

Custom CSS & Theme Design
1

Steps to reproduce

Backgrounds for my heading are defined as simple gradients along these lines:

  --my-h1-lg: linear-gradient(to right, color-mix(in srgb, var(--h1-color) 20%, var(--my-h12-blendstart)), color-mix(in srgb, var(--h1-color) 50%, var(--my-h12-blendend)));
  --my-h2-lg: linear-gradient(to right, color-mix(in srgb, var(--h2-color) 40%, var(--my-h12-blendstart)), color-mix(in srgb, var(--h2-color) 70%, var(--my-h12-blendend)));
  --my-h3-lg: linear-gradient(to right, color-mix(in srgb, var(--h3-color) 15%, var(--my-h34-blendstart)), color-mix(in srgb, var(--h3-color) 20%, var(--my-h34-blendend)));
  --my-h4-lg: linear-gradient(to right, color-mix(in srgb, var(--h4-color) 5%, var(--my-h34-blendstart)), color-mix(in srgb, var(--h4-color) 10%, var(--my-h34-blendend)));
  --my-h5-lg: linear-gradient(to right, color-mix(in srgb, var(--h5-color) 30%, var(--my-h56-blendstart)), color-mix(in srgb, var(--h5-color) 2%, var(--my-h56-blendend)));
  --my-h6-lg: linear-gradient(to right, color-mix(in srgb, var(--h6-color) 4%, var(--my-h56-blendstart)), color-mix(in srgb, var(--h6-color) 2%, var(--my-h56-blendend)));

They look as follows

image
image716×214 14.8 KB

With Obsidian’s built in Page Preview / Hover functionality, the pop will look like this:

image

Did you follow the troubleshooting guide? [Y]

I’ve gone through app.css and cannot seem to locate where this may be happening

Expected result

Heading which are white text with a colored background should be displayed

See image above

Actual result

See image above

Environment

SYSTEM INFO:
	Obsidian version: v1.7.0
	Installer version: v1.6.7
	Operating system: Darwin Kernel Version 23.6.0: Fri Jul  5 17:56:41 PDT 2024; root:xnu-10063.141.1~2/RELEASE_ARM64_T6000 23.6.0
	Login status: logged in
	Catalyst license: vip
	Insider build toggle: on
	Live preview: on
	Base theme: adapt to system
	Community theme: none
	Snippets enabled: 3
	Restricted mode: on

Thanks

Additional information

2

I am not sure this is a bug but I’ll double check

1 Like
3

Whats the rest of the CSS and the other snippets enabled here?

What’s shared doesn’t do anything on its own.

1 Like
4

I’m not sure that I understand your question?

There is no markdown that will set the background of an image. Hence snippets are required:

2 of the snippets just define some colors

The one that sets heading aspects is:

/**********Headings************/

.theme-light {
  color-scheme: light;

  --h1-color: var(--color-note);
  --h2-color: var(--color-note);
  --h3-color: var(--color-black);
  --h4-color: var(--color-black);
  --h5-color: color-mix(in srgb, var(--my-theme-c1) 85%, var(--color-blue));
  --h6-color: color-mix(in srgb, var(--my-theme-c1) 85%, var(--color-blue));
  
  --heading-formatting: var(--color-darkblue);

  --my-h12-underline: color-mix(in srgb, var(--my-theme-c2) 85%, var(--color-black));
  --my-h34-underline: var(--color-black);
  --my-h56-underline: var(--my-theme-c1);
  --my-h1-sidebar: var(--color-gray); 
  --my-h12-blendstart: var(--color-black);
  --my-h12-blendend: color-mix(in srgb, var(--color-black), var(--color-white) 75% );
  --my-h34-blendstart: var(--color-white);
  --my-h34-blendend: var(--color-lightgray);
  --my-h56-blendstart: color-mix(in srgb, var(--my-theme-c1) 10%, var(--color-note));
  --my-h56-blendend: var(--color-note);

  --my-h1-lg: linear-gradient(to right, color-mix(in srgb, var(--h1-color) 20%, var(--my-h12-blendstart)), color-mix(in srgb, var(--h1-color) 50%, var(--my-h12-blendend)));
  --my-h2-lg: linear-gradient(to right, color-mix(in srgb, var(--h2-color) 40%, var(--my-h12-blendstart)), color-mix(in srgb, var(--h2-color) 70%, var(--my-h12-blendend)));
  --my-h3-lg: linear-gradient(to right, color-mix(in srgb, var(--h3-color) 15%, var(--my-h34-blendstart)), color-mix(in srgb, var(--h3-color) 20%, var(--my-h34-blendend)));
  --my-h4-lg: linear-gradient(to right, color-mix(in srgb, var(--h4-color) 5%, var(--my-h34-blendstart)), color-mix(in srgb, var(--h4-color) 10%, var(--my-h34-blendend)));
  --my-h5-lg: linear-gradient(to right, color-mix(in srgb, var(--h5-color) 30%, var(--my-h56-blendstart)), color-mix(in srgb, var(--h5-color) 2%, var(--my-h56-blendend)));
  --my-h6-lg: linear-gradient(to right, color-mix(in srgb, var(--h6-color) 4%, var(--my-h56-blendstart)), color-mix(in srgb, var(--h6-color) 2%, var(--my-h56-blendend)));
}

body {
  --h1-style: normal;
  --h2-style: normal;
  --h3-style: normal;
  --h4-style: normal;
  --h5-style: normal;
  --h6-style: normal;

  --h1-variant: normal;
  --h2-variant: normal;
  --h3-variant: normal;
  --h4-variant: normal;
  --h5-variant: normal;
  --h6-variant: normal;

  --h1-size: 1.40em;
  --h2-size: 1.35em;
  --h3-size: 1.30em;
  --h4-size: 1.25em;
  --h5-size: 1.2em;
  --h6-size: 1.1em;

  --h1-line-height: 1em;
  --h2-line-height: 1em;
  --h3-line-height: 1em;
  --h4-line-height: 1em;
  --h5-line-height: 1em;
  --h6-line-height: 1em;

  --h1-weight: 900;
  --h2-weight: 800;
  --h3-weight: 700;
  --h4-weight: 700;
  --h5-weight: 500;
  --h6-weight: 500;

  /* Headings ITS Specific */
  --h1-border-line-width: 0px;
  --h2-border-line-width: 0px;
  --h3-border-line-width: 0px;
  --h4-border-line-width: 0px;
  --h5-border-line-width: 0px;
  --h6-border-line-width: 0px;

  /* View header */
  --header-height: 40px;

  /* Inline title */
  --inline-title-color: var(--color-magenta);
  --inline-title-font: var(--font-monospace);
  --inline-title-line-height: 0.9em;
  --inline-title-size: var(--h6-size);
  --inline-title-margin-bottom: 0.2em;
  --inline-title-style: var(--h6-style);
  --inline-title-variant: var(--h6-variant);
  --inline-title-weight: var(--h6-weight);
}

:root :is(h1,h2,h3,h4,h5,h6) {
  margin-top: 0px;
  margin-bottom: 2px; /* var(--p-spacing); */
}

:root div:has(:is(h1,h2,h3,h4,h5,h6))+div>p {
  margin-top: 0px;
  margin-bottom: 2px; /* var(--p-spacing); */
}

h1, h2, h3, h4, h5, h6, .markdown-rendered h1, .markdown-rendered h2, .markdown-rendered h3, .markdown-rendered h4, .markdown-rendered h5, .markdown-rendered h6, .HyperMD-header-1, .HyperMD-header-2, .HyperMD-header-3, .HyperMD-header-4, .HyperMD-header-5, .HyperMD-header-6, .HyperMD-list-line .cm-header-1, .HyperMD-list-line .cm-header-2, .HyperMD-list-line .cm-header-3, .HyperMD-list-line .cm-header-4, .HyperMD-list-line .cm-header-5, .HyperMD-list-line .cm-header-6 {
  /*margin-top: 0px;
  margin-bottom: 2px;*/
}

.markdown-reading-view h1,
.mod-cm6 .cm-editor .HyperMD-header-1 {
  color: var(--h1-color);
  border-bottom: 6px solid var(--my-h12-underline);
  /*border-left: 6px solid var(--my-h1-sidebar);*/
  padding-left: 3px;
  letter-spacing: 1.5px;
  background-image: var(--my-h1-lg);
  padding-top: 1px;
  padding-bottom: 6px;
}

.markdown-reading-view h2,
.mod-cm6 .cm-editor .HyperMD-header-2 {
  color: var(--h2-color);
  letter-spacing: 1.4px;
  border-bottom: 4px solid var(--my-h12-underline);
  background-image: var(--my-h2-lg);
  padding-left: 3px;
  padding-top: 5px;
  padding-bottom: 4px;
  margin-left: 0px;
}

.markdown-reading-view h3,
.mod-cm6 .cm-editor .HyperMD-header-3 {
  color: var(--h3-color);
  letter-spacing: 1.3px;
  border-bottom: 3.5px solid var(--my-h34-underline);
  background-image: var(--my-h3-lg);
  padding-left: 3px;
  padding-top: 1px;
  padding-bottom: 4px;
}

.markdown-reading-view h4,
.mod-cm6 .cm-editor .HyperMD-header-4 {
  color: var(--h4-color);
  border-bottom: 3px solid var(--my-h34-underline);
  letter-spacing: 1.2px;
  background-image: var(--my-h4-lg);
  padding-left: 3px;
  padding-top: 5px;
  padding-bottom: 2px;
}

.markdown-reading-view h5,
.mod-cm6 .cm-editor .HyperMD-header-5 {
  color: var(--h5-color);
  letter-spacing: 1.1px;
  border-bottom: 2px solid var(--my-h56-underline);
  background-image: var(--my-h5-lg);
  padding-left: 3px;
  padding-top: 1px;
  padding-bottom: 5px;
}

.markdown-reading-view h6,
.mod-cm6 .cm-editor .HyperMD-header-6 {
  color: var(--h6-color);
  letter-spacing: 1px;
  border-bottom: 1.5px solid var(--my-h56-underline);
  background-image: var(--my-h6-lg);
  padding-left: 3px;
  padding-top: 3px;
  padding-bottom: 3px;
}


:is(h2, h3, h4, h5, h6),
.HyperMD-header {
    position: relative;
    &::after {
        --indicator-offset: 6px;
        --indicator-alignment: center;
        content: var(--indicator);
        position: static;
        top: 0;
        bottom: 0;
        display: inline-flex;
        align-items: center;
        color: var(--color-muted);
        font-size: 9px;
        font-weight: var(--font-bold);
        font-style: normal;
        float: right;
        padding: 0px;
        padding-right: 5px;
        /*padding-bottom: 1px;*/
    }
}
:is(.HyperMD-header-2, h2) {
    --indicator: "Ⅱ";
}
:is(.HyperMD-header-3, h3) {
    --indicator: "Ⅲ";
}
:is(.HyperMD-header-4, h4) {
    --indicator: "Ⅳ";
}
:is(.HyperMD-header-5, h5) {
    --indicator: "Ⅴ";
}
:is(.HyperMD-header-6, h6) {
    --indicator: "Ⅵ";
}

Thanks

5

Your CSS snippet doesn’t seem to work for me. But instead of .markdown-reading-view h1 and the like, you’d want to use .markdown-rendered h1 to target both popovers and reading view