How to add custom css for markdown?

[mandip1213]

I have checked all the prerequisites below and I'm yet experiencing a problem

• Read the README.md
• Have the extended version of Hugo installed
• Used the exampleSite's config.toml as a reference
• I have included my repository link. Instead of pasting long snippets here.

Describe the bug
Its not a bug but a feature query. How can I change the default css applied to the markdown, How can I do it without breaking the whole site. Where should I put the css code? And how can I change the default blue background color? Sorry if the question sounds too naive, I am just getting started with hugo.

Avoid long-winded descriptions

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Microsoft edge

[chipzoller]

A discussion was better for this so I've converted it. I believe @onweru answered this is another issue. Have you searched?

[onweru]

Retesting to confirm.

[onweru]

@rootwork, @mandip1213,

I just reproduced it on my local. So yeah, it should work. All i did is create a new assets/sass/_variables.sass from the site dir.

[onweru]

A tangential idea 🤔. We should probably move completely to using CSS variables (at least for all colors), to make working with that file easier. I think CSS variables now enjoy better support than when I first wrote the variables down.

[mandip1213]

@onweru Can you share the code what you have done. Here I tried to create my own _variables.sass but nothing changes in my case.

[onweru]

@mandip1213,

I copied your code to my local and it turns out you had errors on lines 97 and 121. This way, hugo was erroring out. Here is how the correct code for those lines should look like 👇🏼

// line 97
background-image: url("#{imagesPath}night-moon.jpg");
// line 121
background-image: url("#{imagesPath}night-moon.jpg");