search

timlrx / tailwind-nextjs-starter-blog

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
https://tailwind-nextjs-starter-blog.vercel.app/
MIT License
8.45k stars 1.96k forks source link

How do we style KBar? #811

Closed juskek closed 7 months ago

juskek commented 8 months ago

Hey there, great template!

Is it possible to style KBar? I've removed dark mode from the site but KBar is still in dark mode

image
juskek commented 8 months ago

Had to set darkMode: 'false' in tailwind.config.js

Would be cool if there was a way to style the KBar directly though

PxlSyl commented 8 months ago

Had to set darkMode: 'false' in tailwind.config.js

Would be cool if there was a way to style the KBar directly though

It' possible, but you'll need to copy paste the kbar components from Pliny in your app, and reorganize imports. I did it for my unofficial i18n version (in my case, to manage translations)

timlrx commented 8 months ago

Hi @juskek, it follows the tailwind dark mode setting of the site. Rather than modify tailwind.config.js, I suggest keeping the default and modifying siteMetadata - this will propagate the changes correctly (if you toggle the theme switch on the demo website, you can see that the kbar search also changes accordingly).

For other changes and maximum flexibility, it will be easier to copy the code from pliny and modify the tailwind styles accordingly.