Hey, Inkdroppers. It’s Takuya here.
I’m happy to release v5.9.0 officially 
The full-text search engine is now language-agnostic
This is the same update on mobile v5.4.0
This update would solve this issue: Odd searching issue when searching for text
The app had been using the language-dependent tokenization processes called Porter stemming algorithm and a Japanese-specific segmentation algorithm. In some cases, they cause some odd searching issue, where you can’t find notes with particular keywords.
I recently found that SQLite3 officially supports the trigram tokenizer. I managed to migrate to it. Now, you can use any languages including Chinese, Japanese, Arabic, etc., in your notes! Also, it fully supports partial matching, so it is optimal for searching code snippets. For example, it can properly find a note with a code fragment like "er } = require(".
Highlight matched keywords in the note list
As you can see in the above screenshot, it can now highlight matched keywords in the note list, which would help you more quickly find your desired note.
UI Theme Improvements
The acrylic translucent background support is back on Windows 11!
Since Electron started supporting the backgroundMaterial option for Windows 11+, the acrylic effect has returned now!
However, there is a critical bug preventing it from working properly on frameless windows. To resolve this, I had to add a system window title bar, but it actually doesn’t look so bad.
The default light and dark themes support the acrylic translucent background out of the box, so Vibrant Dark UI will be deprecated soon.
Check out the documentation on how to make your theme support the acrylic background mode.
Minor design improvements
I’ve rewritten the default UI themes for migrating to the new theming system. Here are what they look like now:
Editor drawer animations
New themes: Solarized Light and Dark UI
They also support the acrylic background! I love them.
I hope you like them!
Theming is now simpler than ever
I’m so excited to announce that Inkdrop has got a new theming system!
I’ve been working on refactoring the app’s theming system to make it easier to customize and maintain for future versions. The UI components were originally from Semantic UI, and Inkdrop has relied on its well-designed theming system based on LESS, an alternative stylesheet language with some extended syntaxes like variables.
However, modern CSS now supports a lot of features that LESS has provided, such as CSS variables and CSS nesting. Moreover, CSS supports cascade layers, which allow you to control the specificity and order of rule sets across stylesheets. They would be very useful for theming in Inkdrop.
The main issue was that Semantic UI themes include everything from resets and layouts to buttons, dropdowns, and menus. This is because Semantic UI’s theming architecture wasn’t designed to be dynamically loaded or switched. This limitation has prevented me from adding new UI components and updating current designs. Also, it was hard to understand the LESS-based theming architecture for contributors, including Gulp tasks for building it.
The new theming system is much simpler. All you have to do is customize CSS variables. No pre-compilations needed. For example, here is a part of the new Solarized Dark UI theme:
:root {
--primary-color: hsl(var(--hsl-blue-500) / 90%);
--input-background: var(--color-bg);
--page-background: var(--color-bg);
--text-color: hsl(var(--hsl-fg));
--link-hover-color: var(--color-blue-300);
--sidebar-background: var(--color-bg);
--note-list-bar-background: hsl(var(--hsl-bg-muted-highlight));
--note-list-bar-border-right: 1px solid hsl(var(--hsl-base02));
}
Instead of using LESS variables to let you customize component styles, the app now refers to these CSS variables to apply customizations on top of the default styles with CSS cascading layers. This way, I can safely change the existing styles and add new components without making breaking changes to the existing themes. If I were to add new components, I could define new CSS variables with fallback values, something like:
.new-component {
background: var(--new-component-background, var(--strong-transparent-black));
}
If --new-component-background isn’t defined in your theme, it automatically falls back to --strong-transparent-block. Neat.
Please check out the updated guide on how to create a theme here!
dev-server
But how do you explore available CSS variables? It’s easy. I’ve made a tool that lists all the variables you can edit, and it also previews the current values.
The app has pre-defined color tokens:
And it previews some UI components with hot-reloading:
I hope you enjoy creating your themes with these tools!
They are mentioned in the guide here.
Possibility for the mobile support
Users have been requesting more themes on the mobile app (1, 2, 3). I’ve been exploring a way to port custom themes to the mobile version. Previously, this was impossible since the mobile app is built with React Native, where CSS can’t be simply applied to the UI components. But as the new theming system relies on the CSS variables, you can now generate a JSON file from the theme. You can simply run the generate-palette command in the theme repository. Check out the documentation for more details.
It still needs more work though, I can’t wait to bring your themes into the mobile app!
Migrating your themes to the new system
While the app still has a backward-compatibility for the old UI themes, I would strongly encourage the theme creators to update their UI themes, or they will eventually be broken since I’m planning to add new features with new UI components. So, please check out the updated guide in the docs.
If you have any questions, feel free to post questions on the “Developers & API” category on the user forum here.
Change the Inkdrop target version to “^5.9.0”
Do not forget to update the “engines.inkdrop” field in your package.json to ^5.9.0 so that the update won’t be installed on the older version and surprize the users. It should be something like this:
{
...
"engines": {
"inkdrop": "^5.9.0"
}
}
Other improvements
- Support toggling
inlinecode with ` when selecting text (Thanks Sachin_A 2)- Add command
core:toggle-inline-code
- Add command
- feat(context-menu): add ‘Paste as Plain Text’ to the editor context menu
- Bump up Electron to 31.6.0
- Bump up PouchDB to 9.0.0
- Hopefully it will solve this error
- Display the loading indicator when loading more plugins (Thanks Palmar)
- Allow raw HTML when Copy as Simple HTML (Thanks fuyuton)
Bug fixes
- fix(dialog):
updatedAtshould not be updated when the note gets moved - fix(theme): Cannot enable Vibrant dark theme on the light mode on the system (Thanks SDO and Marco)
- fix(redux): prevent performing some actions on the non-existing notebooks (Thanks Akiya-san
- Prevent opening another note when failing to save the current note
- Prevent creating a new note in the notebook that does not exist
- Display an error dialog when failing to create a new note
- fix(layouts): editor view icons overlap with Search / Replace buttons (Thanks Marco)
- fix(layout): missing window buttons on the error blank slate (Thanks gaeulbyul)
- fix(preview): odd spacing in the metadata pane (Thanks Lukas and Dmitry)
- fix(preferences-plugins): queries should be debounced
- fix(theme): Missing olive tag color (Thanks Lukas)
- fix(preferences-plugins): Blank screen from search on filter of Installed plugins (Thanks Bundit)
- fix(editor): ‘Paste URL as link’ pastes the raw link after a heading (Thanks Lukas)
- fix(editor): Cannot move a note to trash if i have unsaved changes (Thanks Lukas)
Download now
Thank you for your feedback, as always❤️