hugo-notice icon indicating copy to clipboard operation
hugo-notice copied to clipboard

Published 20 hours ago • verified publisher icon martignoni

feat: Add darkmode support

Open Dephilia opened this issue 2 years ago • 0 comments

I use Obsidian for my Markdown editor. And I'd like to have the same function of the callout block in Obsidian for Hugo. Fortunately this plugin is pretty nice for my requirement, I like it.

In my blog, I have dark mode support. However this plugin has only light mode which makes the notice block seem to be weird under dark mode.

Here is my work after adding dark mode support. However the colors for dark mode that I chose may not the best. Hope someone can help for this.

Light mode (The original) Screen Shot 2022-05-26 at 22 00 14

Dark mode (New) Screen Shot 2022-05-26 at 22 00 08

Mainly, I use variables to switch the colors. By detecting the dark class in body <body class='dark'>, the color will change.

.notice {
    --root-color: #000;
    --root-background: #e7f2fa;
    --title-color: #fff;
    --title-background: #6ab0de;
    --warning-title: rgba(217, 83, 79, 0.9);
    --warning-content: #fae2e2;
    --info-title: #f0b37e;
    --info-content: #fff2db;
    --note-title: #6ab0de;
    --note-content: #e7f2fa;
    --tip-title: rgba(92, 184, 92, 0.8);
    --tip-content: #e6f9e6;
}
body.dark .notice {
    --root-color: #fff;
    --root-background: #e7f2fa;
    --title-color: #fff;
    --title-background: #6ab0de;
    --warning-title: rgba(130, 49, 47, 0.9);
    --warning-content: #341312;
    --info-title: #906b4b;
    --info-content: #392a1e;
    --note-title: #3f6985;
    --note-content: #192a35;
    --tip-title: rgba(46, 92, 46, 0.8);
    --tip-content: #122412;
}

.notice.warning .notice-title {
    background: var(--warning-title);
}

Hope this is helpful😄

Dephilia avatar May 26 '22 14:05 Dephilia