How customize docs style

[jonathanbergson]

I am using @nuxt/content-theme-docs to create a documentation. And I have a few questions.

1. Isn't there a standard style for titles etc?
2. How do I replace the rendering of the HTML elements?
3. My css file is not loading, what could be happening?

// nuxt.config.js
import theme from '@nuxt/content-theme-docs'

export default theme({
  docs: {
    primaryColor: '#2980b9'
  },
  css: ['~/assets/css/main.css']
})

[nozomuikuta]

@jonathanbergson

When you use Content Doc Themes, srcDir option aliased by ~ or @ is not where your nuxt.config.js is.

It's actually node_modules/@nuxt/content-theme-docs/src.

Besides to srcDir, Nuxt provides rootDir option aliased by ~~ or @@ whose default is process.cwd(), where your nuxt.config.js usually is, or more accurately where you run nuxt command.

So, the code below would work (sorry, I don't have time to check if it works 🙏 ):

import theme from '@nuxt/content-theme-docs'

export default theme({
  css: ['~~/path/from/your/project/root/to/css']
})

FYR: It will be also worth checking alias option.

[nozomuikuta]

Oops, you were asking 3 questions.

1. Isn't there a standard style for titles etc?
2. How do I replace the rendering of the HTML elements?
3. My css file is not loading, what could be happening?

I believe 3rd one is resolved.

As for 1st question, I'm not sure what you mean.
But if you mean you are looking for default styles of Content Theme Docs, they are in node_modules/@nuxt/content-theme-docs/src/assets/css, or here in this repository.

As for 2nd question, you can replace default components of Content Theme Docs, using overwriting-components feature of Nuxt Components. But, there is a bug in Content Theme Docs in terms of overwriting configuration, so you should check my comment in #328.

[jonathanbergson]

Thank you,
Now my css has been applied.

About my question: Isn't there a standard style for titles etc?
All headings elements (h1, h2, h3, h4, h5, h6) have the same style:

[nozomuikuta]

@jonathanbergson

Theme Docs uses a famous CSS framework, Tailwind CSS, as you can see its name as file name in DevTool panel.

More accurately, Theme Docs uses a Nuxt modules that wraps Tailwind CSS, nuxt/tailwind (or, @nuxtjs/tailwindcss as a npm package).

You can take a look at these OSS projects to find out default Theme Docs styles.
Please be aware that Theme Docs uses Tailwind CSS v1.x.

By the way, you might also want to take a look at the page that explains how to override Theme Docs' default Tailwind CSS config.