search

egoist / docute

📚 Effortless documentation, done right.
https://docute.egoist.dev
MIT License
3.8k stars 427 forks source link

Feature: custom css for light/dark themes #206

Closed jthegedus closed 5 years ago

jthegedus commented 5 years ago

Love the new Dark mode #189 support. As an addition, it would be awesome if we could provide two .css files each containing separate :root{} css variables for our own custom light/dark theme customization:

theme: {
  "light": "/themes/light.css"
  "dark": "/themes/dark.css"
},

If this is already possible via the existing setup and I've misunderstood, I apologize for the noise.

egoist commented 5 years ago

Maybe allow the cssVariables option to be a function:

new Docute({
  cssVariables(theme) {
     return theme === 'dark' ? {} : {}
  }
})

wdyt?

https://docute.org/guide/customization#custom-style

jthegedus commented 5 years ago

Would that be used like this?

    return theme === 'dark' ? {
        --success-color: #42b983;   
    } : {
      --success-color: #008000,
    }

Could you elaborate on that a bit more?

egoist commented 5 years ago

check out the link in my previous comment

jthegedus commented 5 years ago

I did, must have been a cached version of the site as that subheading wasn't there. Opening in a different browser showed the linked section.

Looks like a good solution to me!

egoist commented 5 years ago

:tada: This issue has been resolved in version 4.12.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

jthegedus commented 5 years ago

Mate, you work fast! Thanks so much :tada: