[Feature request] Styling H1-H6 Headings

[bwoah-md]

I was thinking if you could add an option in style settings to add "Support for Custom Fonts, Font Weights, Font Size, H1 to H6 Divider, Alignment, Font Variants and Font Color to Headings" (its too much to ask for but I just thought I could list down all the features that I have used so far. As of right now, I only use font weight and font color to headings personally.)

This is how currently I am using a custom CSS snippet for headings and colors. It works fine with most of the color palattes. (If you want, you can change the hex values for the "default" heading color when the option is enabled alongside an option to change it.)

/* Common font weight for all headings in both modes */
.HyperMD-header .cm-header-1, .markdown-rendered h1,
.HyperMD-header .cm-header-2, .markdown-rendered h2,
.HyperMD-header .cm-header-3, .markdown-rendered h3,
.HyperMD-header .cm-header-4, .markdown-rendered h4,
.HyperMD-header .cm-header-5, .markdown-rendered h5,
.HyperMD-header .cm-header-6, .markdown-rendered h6 {
    font-weight: 300;
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
    .HyperMD-header .cm-header-1, .markdown-rendered h1 {
        color: #F8BBD0; /* Pastel pink */
    }

    .HyperMD-header .cm-header-2, .markdown-rendered h2 {
        color: #B3E5FC; /* Pastel blue */
    }

    .HyperMD-header .cm-header-3, .markdown-rendered h3 {
        color: #C5E1A5; /* Pastel green */
    }

    .HyperMD-header .cm-header-4, .markdown-rendered h4 {
        color: #FFCCBC; /* Pastel orange */
    }

    .HyperMD-header .cm-header-5, .markdown-rendered h5 {
        color: #D1C4E9; /* Pastel purple */
    }

    .HyperMD-header .cm-header-6, .markdown-rendered h6 {
        color: #FFE0B2; /* Pastel yellow */
    }
}

/* Light mode styles */
@media (prefers-color-scheme: light) {
    .HyperMD-header .cm-header-1, .markdown-rendered h1 {
        color: #bf7d7d; /* Darker pastel pink */
    }

    .HyperMD-header .cm-header-2, .markdown-rendered h2 {
        color: #668cb5; /* Darker pastel blue */
    }

    .HyperMD-header .cm-header-3, .markdown-rendered h3 {
        color: #84a451; /* Darker pastel green */
    }

    .HyperMD-header .cm-header-4, .markdown-rendered h4 {
        color: #d86646; /* Darker pastel orange */
    }

    .HyperMD-header .cm-header-5, .markdown-rendered h5 {
        color: #754bc7; /* Darker pastel purple */
    }

    .HyperMD-header .cm-header-6, .markdown-rendered h6 {
        color: #bd844f; /* Darker pastel yellow */
    }
}

Results

Green Red

[Erallie]

@bwoah-md It is something I can consider doing. But seeing as people can change the fonts under Settings → Appearance → Font, I thought it less necessary. But I guess people might want to have different fonts and stuff for headers than for regular text. So I'll think on this one.

If more people express that they are wanting this feature, I will add it.

[bwoah-md]

Yes sure 😊