You can ask questions about migrating your UI theme for v5.9.0 or newer.
Documentation:
The new theming system is available as of v5.9.0-beta.1:
The discussion with khouwdevin in the emails:
khouwdevin:
I want to ask about development server, how to run it on windows? I can’t use dev-server in terminal
Takuya:
It requires Bun. Have you installed it?
khouwdevin:
I have installed, but it’s still not working, I will try to get it working and I will update you, might be windows problem.
Takuya:
Are you on our Discord server? Maybe someone familiar with Windows could help you.
Stay motivated and inspired by connecting with other tech note-takers - Inkdrop User Manual
khouwdevin:
Ok thank you, I will ask there, and I have another questions, how to change the vim cursor when in normal mode (the block cursor), also is there any chance to change the scrollbar thumb color?
Takuya:
vim cursor should be changed in the syntax theme via--fat-cursor-color.
The CSS variables for scrollbar are:
--scrollbar-width--scrollbar-track-background--scrollbar-thumb-background
khouwdevin:
Ok thank you Takuya for the help, I’m currently working on the migration. I will let you know if I finish it.
Takuya:
I guess it’d be hard to find available variables without using dev-server.
Check out the following source files instead for now:base-ui-theme/src/site/globals/site.overrides at main · inkdropapp/base-ui-theme · GitHub
https://github.com/inkdropapp/css/blob/main/tokens.cssThanks, Khouw!
Takuya:
I’ve also updated the dev-tools plugin today, which allows you to hot-reload your theme on the app.
Creating a theme - Inkdrop API Reference
Hope it boosts your theming workflow.
khouwdevin:
Sorry to bother you again, but I can’t find how to change the button when hover, I have two issues when the button color changing when hovering and the background color changing, can you help what are the variables for those?And I want to update, I manage to migrate the theme and I think it’s halfway to finish, I need to check and to polish, and I will attach you the picture how it now.
Takuya:
Could we move our discussion to the user forum?
Because it would be helpful for other theme authors.
I will create a topic on it if it’s ok.Regarding the progress, it looks great!
Would it be possible to share your current working codebase?
khouwdevin:
I want to update, at the end I managed to run the server on WSL over Ubuntu, I think there’re problems happen in Windows, I will attach the errors that I found, and I have pushed the UI code to Github, and I will send you the final image for the UI, hope you like it and it helps.
khouwdevin:
Okay, that’s great to help others too.For my current progress, I have pushed to my Github, here’s the link GitHub - khouwdevin/inkdrop-goldgreen-dark-ui: Gold, green and dark UI for Inkdrop!.
Devin,
Regarding the error on Windows, can you try the following command?
bunx dev-server
I assumed that you have ./node_modules/.bin in the $PATH , but it seems to be not always the case for everyone
@Daiki48 created a note while working on the migration, which would be helpful for other theme authors:
it’s not working, but for the generate-palette is working, I think it’s related to the script, when I’m using powershell it’s not working, but it’s working on bash in Linux over WSL.
Got it, I’ve fixed it. Can you try @inkdropapp/theme-dev-helpers@0.3.7 on WSL?
1 Like
Looks like it’s not possible to support PowerShell.
I have tried on WSL, it’s working. For the theme-dev-helper it’s fine I think, so my workflow will be, run the dev-server on WSL to check available variables and then change the variables in Windows using the inkdrop hot reload. Thanks for the help, really appreciate it!
1 Like
Cool! Thank you for updating your theme! Cheers
Takuya-san, Thanks again for your quick support 
I tried @inkdropapp/theme-dev-helpers@0.3.7 and it work 
Fixed note Inkdrop theme to be compatible with v5.9.0
1 Like
Awesome, thanks!
What error message do you get and why should it not work on Windows?
For me its working great on Windows. (bun x dev-server)
I didn’t check again for v0.3.7 on Windows, yes it’s working on Windows for the v0.3.7, thanks for letting me know it’s working. And I think the previous version is using bash, which not compatible with Powershell in Windows but for now it’s using bun directly so it will be running okay.
Unfortunately, it doesn’t load theme CSS files when running via PowerShell.
For some reason, Vite tries to load on file:// protocol instead of http://localhost:5173/FILE-PATH.
Oh, I see. I haven’t changed any variables yet, I’ve just prepared an empty theme that I’ll adjust later.
For some reason, Vite tries to load on
file://protocol instead ofhttp://localhost:5173/FILE-PATH.
The following change should fix this.
dev-server.tsx:
- const cssFiles = styleSheets.map(ss => `${baseProjectPath}/styles/${ss}`)
+ const cssFiles = styleSheets.map(ss => `/styles/${ss}`)
However, this would also mean that hot reload no longer works and you would have to reload the page manually.
The text of the CSS variable also resolves the default value instead of the overridden value (only the colored box is correct).
So unfortunately this is not really a solution.
I guess i will use Linux or WSL
1 Like
Thanks for checking it. The dev server needs the absolute path ( baseProjectPath ) because your theme files are outside the dev server directory.