Docz cannot "find" custom theme

[doczjs]

Docz cannot "find" custom theme

[Swapnull]

@mrmartineau Should it not have a trailing / as it is a folder? Like this

export default {
  theme: '../../src/docz-theme-fx/',
}

That works for me when I point to a custom theme that contains an index.js :)

---

I think that will only work if the entry point is index.js though, not sure if you will have to actually supply the index name if its a typescript file? Like -

export default {
  theme: '../../src/docz-theme-fx/index.tsx',
}

[mrmartineau]

@Swapnull thanks for your help, but I still cannot get this to work. Neither adding a trailing slash, or the path to the full file works. Should the copy I created need compiling for it to work?

[Swapnull]

Hey, Here is what I am doing - https://github.com/Swapnull/docz-test and that seems to work.
That was just a copy from the base version and then taking it out of typescript for ease :)

Not sure it needs compiling first? Hope that helps :)

[mrmartineau]

@Swapnull thanks again, but I tried using your version too and it still didn't work. Can you tell me if there's anything else that I should do beyond having the theme within my project and setting the correct path in the config?

[pedronauck]

Hi @mrmartineau, as you can see in the Theming section on Project configuration, theme filepath need to be relative to your src folder or the root folder of your project...

This is defined in webpack on resolve.modules configuration:
https://github.com/pedronauck/docz/blob/master/packages/docz-core/src/bundlers/webpack/config.ts#L141-L143

So, if you pass a filepath on theme, webpack will search this file on root, src, or node_modules, but just project files will be parsed by loader, node_modules will be rejected!

[mrmartineau]

Hi @pedronauck, I still cannot get this to work... when you mention src above, the docs say to use source instead, is that what you're referring to?

My config is as follows:

export default {
  theme: 'src/docz-theme-fx',
  source: './',
}

That config should work, right?

My project structure is as follows:

. (root)
 - src
   - components
   - docz-theme-fx (this is a copy of the default theme with a few changes)

The value in root.jsx is exactly the same as the value in the config, e.g.

import Theme from 'src/docz-theme-fx'

Can you show me an example of what the above line should look like with a custom theme?

[renatorib]

Hey @mrmartineau, can you provide a repo with minimal failing setup so I can take a look?

[Swapnull]

@mrmartineau does it not need to be theme: 'src/docz-theme-fx/src/ ? I thought it had to point to the src file inside the theme, assuming you copied the basic theme?

[mrmartineau]

@Swapnull adding src to the path (like so: theme: 'src/docz-theme-fx/src) was what was needed. Thank you.

I used the non-Typescript version that you created (above) and it is now working, but I had to install recompose and lodash.merge to get it to work fully.

The shame of it is, is that I wanted to update the <Playground> component to have a themeable (or at the very least, a dark background), which I edited, but I realise that while the styles can be modified, no new props can be added to a theme without them being in docz core. @pedronauck am I correct in that assumption? If so, I will look at submitting a PR for it to go into core rather than my theme.

Thanks for your help guys

[pedronauck]

You can path your own render component like here @mrmartineau
https://github.com/pedronauck/docz/blob/master/packages/docz-theme-default/src/index.tsx#L19