I’m running into a problem with my code — it’s almost finished, but there’s one major issue.
Whenever I switch to Reading Mode, the callouts disappear.
This only happens when using light themes, specifically page-white and page-manila.
In Live Preview, everything works perfectly, so the issue seems to affect only Reading Mode in those themes.
For a bit more context, here’s the GitHub (just search my name on it) repository and some reference images:
Live Preview:
Reading Mode:
Code:
/*------------------------------------------------------------------------------
Notebook Background Color Schemes by CyanVoxel v2.2.3
These a few CSS classes that mimic a few of my real-world pages and pen colors.
Go ahead and try it out! You can change or add new color variables or entire new
classes and combinations. Inside Obsidian, apply a page class with an optional
pen color class to see the effects. Add the recolor-images class to recolor
the images in your notes, too!
Website used to generate Color Filters:
https://angel-rs.github.io/css-color-filter-generator
------------------------------------------------------------------------------*/
/* Global Variables */
:root {
/* Base Pen Colors */
--pen-white: #edf1fc;
--pen-gray: #5f5d58;
--pen-black: #26241f;
--pen-red: #e14a49;
--pen-green: #15b64f;
--pen-blue: #3f76ed;
--pen-light-blue: #54b6f8;
--pen-purple: #9b4ff0;
--neutral-pen-black: #272727;
--neutral-pen-black-trans: #27272722;
/* Page Colors */
--page-white: #ffffff;
--page-manila: #f3deaf;
--page-blue: #3f76ed;
--grid-size: 32px;
}
/* Recolors images on the page with the current accent color. */
.recolor-images img {
filter: var(--image-effect);
}
/* ---------------------------- Page Backgrounds ---------------------------- */
/* All Pages */
.page-manila,
.page-white,
.page-blueprint {
--text-normal: var(--accent-color);
--text-muted: var(--accent-color);
--text-faint: var(--accent-color-trans);
--h1-color: var(--accent-color);
--h2-color: var(--accent-color);
--h3-color: var(--accent-color);
--h4-color: var(--accent-color);
--h5-color: var(--accent-color);
--h6-color: var(--accent-color);
--link-color: var(--pen-blue);
--link-color-hover: var(--pen-light-blue);
--link-unresolved-color: var(--pen-red);
--hr-color: var(--accent-color);
--blockquote-border-color: var(--accent-color);
--callout-blend-mode: var(--highlight-mix-blend-mode);
--callout-bug: var(--accent-color);
--callout-default: var(--accent-color);
--callout-error: var(--accent-color);
--callout-example: var(--accent-color);
--callout-fail: var(--accent-color);
--callout-important: var(--accent-color);
--callout-info: var(--accent-color);
--callout-question: var(--accent-color);
--callout-success: var(--accent-color);
--callout-summary: var(--accent-color);
--callout-tip: var(--accent-color);
--callout-todo: var(--accent-color);
--callout-warning: var(--accent-color);
--embed-border-left: 2px solid var(--accent-color);
--collapse-icon-color-collapsed: var(--accent-color);
--checkbox-color: var(--accent-color);
--checkbox-marker-color: var(--page-color);
--checkbox-color-hover: var(--accent-color-trans);
--checkbox-border-color: var(--accent-color);
--checklist-done-color: var(--accent-color);
--list-marker-color: var(--accent-color);
--interactive-accent: var(--accent-color);
--metadata-label-text-color: var(--accent-color);
--metadata-input-text-color: var(--accent-color);
--metadata-input-background-active: var(--accent-color-trans);
--tag-color: var(--accent-color);
--tag-background: var(--accent-color-trans);
--pill-cover-hover: color-mix(in srgb, var(--accent-color) 60%, transparent);
--background-modifier-border-focus: var(--accent-color);
--background-modifier-border: var(--accent-color-trans);
--background-modifier-hover: color-mix(
in srgb,
var(--accent-color) 60%,
transparent
);
color: var(--accent-color);
background-color: var(--page-color);
}
/* ----------------------- Manila/Tan Page Background ----------------------- */
/* Defaults to Black Pen */
.page-manila {
--page-color: var(--page-manila);
--accent-color: var(--pen-black);
--accent-color-trans: color-mix(
in srgb,
var(--accent-color) 15%,
transparent
);
--image-effect: brightness(0) saturate(100%) invert(14%) sepia(19%)
saturate(296%) hue-rotate(5deg) brightness(90%) contrast(96%);
color-scheme: light;
}
.embed-manila img {
background-color: var(--page-manila);
}
/* --------------------------- White Page Background ------------------------ */
/* Defaults to Black Pen */
.page-white {
--page-color: var(--page-white);
--accent-color: var(--neutral-pen-black);
--accent-color-trans: color-mix(
in srgb,
var(--accent-color) 15%,
transparent
);
--image-effect: brightness(0) saturate(100%) invert(14%) sepia(19%)
saturate(296%) hue-rotate(5deg) brightness(90%) contrast(96%);
color-scheme: light;
}
.embed-white img {
background-color: var(--page-white);
}
/* -------------------------- Blueprint Styled Page ------------------------- */
/* Defaults to White Pen */
.page-blueprint {
--page-color: var(--page-blue);
--accent-color: var(--pen-white);
--accent-color-trans: color-mix(
in srgb,
var(--accent-color) 15%,
transparent
);
--image-effect: brightness(0) saturate(100%) invert(89%) sepia(1%)
saturate(2714%) hue-rotate(196deg) brightness(107%) contrast(98%);
color-scheme: dark;
--link-color: color-mix(in srgb, var(--pen-light-blue) 60%, var(--pen-white));
--link-color-hover: color-mix(
in srgb,
var(--pen-light-blue) 20%,
var(--pen-white)
);
}
.embed-blueprint img {
background-color: var(--page-blue);
}
/* Adds a grid layout on page background */
.page-grid {
background-image: linear-gradient(
0deg,
transparent 0px,
var(--accent-color-trans) 1px,
var(--accent-color-trans) 2px,
transparent 3px
),
linear-gradient(
90deg,
transparent calc(var(--grid-size) - 3px),
var(--accent-color-trans) calc(var(--grid-size) - 2px),
var(--accent-color-trans) calc(var(--grid-size) - 1px),
transparent var(--grid-size)
);
background-size: var(--grid-size) var(--grid-size);
}
/* ------------------------------- Pen Colors ------------------------------- */
/* Image Effects generated with:
https://angel-rs.github.io/css-color-filter-generator */
/* Callouts */
:is(
.page-white,
.page-manila,
.page-blueprint,
.pen-white,
.pen-blue,
.pen-red,
.pen-green,
.pen-black,
.pen-gray,
.pen-purple
)
:is(.callout > .callout-title, svg) {
color: color-mix(in srgb, var(--accent-color) 60%, transparent);
}
:is(.page-manila, .page-white, .page-blueprint) .callout {
background-color: var(--accent-color-trans) !important;
}
/* Code Blocks */
:is(.page-white, .page-manila, .page-blueprint) :is(code,
.HyperMD-codeblock, .cm-inline-code) {
--code-normal: var(--accent-color);
--code-background: color-mix(
in srgb,
var(--page-color) 80%,
black
) !important;
}
:is(.page-white, .page-manila, .page-blueprint) div > pre {
--code-background: color-mix(
in srgb,
var(--page-color) 80%,
black
) !important;
}
:is(.pen-white, .pen-blue, .pen-red, .pen-green, .pen-black, .pen-gray, .pen-purple):not(.page-manila):not(.page-white):not(.page-blueprint) :is(code, .HyperMD-codeblock, .cm-inline-code) {
--code-normal: var(--accent-color);
}
/* Tables */
:is(.pen-white, .pen-blue, .pen-red, .pen-green, .pen-black, .pen-gray, .pen-purple, .page-manila, .page-white, .page-blueprint) table th {
color: var(--accent-color);
font-weight: bold;
}
/* ------------------------------- Pen Colors ------------------------------- */
.pen-white {
--accent-color: var(--pen-white);
--accent-color-trans: color-mix(in srgb, var(--pen-white) 15%, transparent);
color: var(--accent-color);
--hr-color: var(--accent-color);
--image-effect: brightness(0) saturate(100%) invert(89%) sepia(1%)
saturate(2714%) hue-rotate(196deg) brightness(107%) contrast(98%);
}
.pen-blue {
--accent-color: var(--pen-blue);
--accent-color-trans: color-mix(in srgb, var(--pen-blue) 15%, transparent);
color: var(--accent-color);
--hr-color: var(--accent-color);
--image-effect: brightness(0) saturate(100%) invert(36%) sepia(95%)
saturate(945%) hue-rotate(199deg) brightness(95%) contrast(95%);
}
.pen-red {
--accent-color: var(--pen-red);
--accent-color-trans: color-mix(in srgb, var(--pen-red) 15%, transparent);
color: var(--accent-color);
--hr-color: var(--accent-color);
--image-effect: brightness(0) saturate(100%) invert(40%) sepia(41%)
saturate(1024%) hue-rotate(316deg) brightness(99%) contrast(94%);
}
.pen-green {
--accent-color: var(--pen-green);
--accent-color-trans: color-mix(in srgb, var(--pen-green) 15%, transparent);
color: var(--accent-color);
--hr-color: var(--accent-color);
--image-effect: brightness(0) saturate(100%) invert(52%) sepia(60%)
saturate(2521%) hue-rotate(105deg) brightness(96%) contrast(84%);
}
.pen-black {
--accent-color: var(--pen-black);
--accent-color-trans: color-mix(in srgb, var(--pen-black) 15%, transparent);
color: var(--accent-color);
--hr-color: var(--accent-color);
--image-effect: brightness(0) saturate(100%) invert(14%) sepia(19%)
saturate(296%) hue-rotate(5deg) brightness(90%) contrast(96%);
}
.pen-gray {
--accent-color: var(--pen-gray);
--accent-color-trans: color-mix(in srgb, var(--pen-gray) 15%, transparent);
color: var(--accent-color);
--hr-color: var(--accent-color);
--image-effect: brightness(0) saturate(100%) invert(35%) sepia(13%)
saturate(189%) hue-rotate(5deg) brightness(96%) contrast(86%);
}
.pen-purple {
--accent-color: var(--pen-purple);
--accent-color-trans: color-mix(in srgb, var(--pen-purple) 15%, transparent);
color: var(--accent-color);
--hr-color: var(--accent-color);
--image-effect: brightness(0) saturate(100%) invert(33%) sepia(59%)
saturate(2620%) hue-rotate(249deg) brightness(98%) contrast(93%);
}
.pen-white, .pen-blue, .pen-red, .pen-green, .pen-black, .pen-gray, .pen-purple {
--checklist-done-color: var(--accent-color);
}