From ca87964e833af05e3b7872a0e29b6f34ec8fe6d4 Mon Sep 17 00:00:00 2001
From: "crafts69.guy" <64419455+crafts69guy@users.noreply.github.com>
Date: Thu, 17 Jul 2025 16:28:51 +0700
Subject: [PATCH 1/3] fix: update keyboard shortcut and correct CSS variable
typo
This commit updates two small but important aspects of the codebase:
1. **Keyboard Shortcut Update**
The shortcut for triggering the application reload has been updated to use `Alt+Cmd+Shift+R` (on macOS) and `Alt+Shift+R` (on Windows/Linux), instead of the previous `Alt+Cmd+Ctrl+R` / `Alt+Ctrl+R`.
This change aligns with other system conventions and avoids conflicts with existing shortcuts.
Old: `Alt+Cmd+Ctrl+R` / `Alt+Ctrl+R`
New: `Alt+Cmd+Shift+R` / `Alt+Shift+R`
2. **CSS Variable Typo Fix**
The CSS `label` color was previously defined with an incorrect number of dashes in the custom property name: `hsl(var(----hsl-gray-800 / 30%)` has been corrected to: `hsl(var(--hsl-gray-800 / 30%))`
---
src/app/guides/create-a-theme/page.mdx | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/src/app/guides/create-a-theme/page.mdx b/src/app/guides/create-a-theme/page.mdx
index 477cc00..03bd321 100644
--- a/src/app/guides/create-a-theme/page.mdx
+++ b/src/app/guides/create-a-theme/page.mdx
@@ -41,7 +41,7 @@ Themes are pretty straightforward but it's still helpful to be familiar with a f
### Enabling Development Mode
**Development Mode** enables the "**Inspect Element**" context menu in Inkdrop, which helps you build your themes easier.
-Select the menu _Inkdrop > Preferences_ on macOS or _File > Settings_ on Windows and Linux, click the _General_ tab on the left hand navigation, and check the "_Development Mode_", then reload the app by pressing Alt+Cmd+Ctrl+R / Alt+Ctrl+R
+Select the menu _Inkdrop > Preferences_ on macOS or _File > Settings_ on Windows and Linux, click the _General_ tab on the left hand navigation, and check the "_Development Mode_", then reload the app by pressing Alt+Cmd+Shift+R / Alt+Shift+R
Now you can use Chrome's Developer Tools.
Right-click an HTML element you can to inspect its styles.
@@ -80,7 +80,7 @@ To create a syntax theme, do the following:
3. Open a terminal in the theme's directory
4. Change the name of the theme in the theme's `package.json` file
5. Run `ipm link --dev` to symlink your repository to `/inkdrop/dev/packages`. You can find the user data directory as described on [this page](https://docs.inkdrop.app/reference/user-data-directory).
-6. Reload Inkdrop using Alt+Cmd+Ctrl+R / Alt+Ctrl+R
+6. Reload Inkdrop using Alt+Cmd+Shift+R / Alt+Shift+R
7. Enable the theme via the "_Syntax Theme_" drop-down in the "Themes" tab of the Preferences
8. Enable hot reloading by selecting the menu **Plugins → dev-tools → Start hot reloading themes**
@@ -115,7 +115,7 @@ To create a UI theme, do the following:
4. Change the name of the theme in the theme's `package.json` file. If your theme is going to be a dark theme, you should also change the `themeAppearance` key to `dark` in the `package.json` file.
5. Run `bun install` to install dependencies
6. Run `ipm link --dev` to symlink your repository to `/inkdrop/dev/packages`. You can find the user data directory as described on [this page](https://docs.inkdrop.app/reference/user-data-directory).
-7. Reload Inkdrop using Alt+Cmd+Ctrl+R / Alt+Ctrl+R
+7. Reload Inkdrop using Alt+Cmd+Shift+R / Alt+Shift+R
8. Enable the theme via the "_UI Theme_" drop-down in the "Themes" tab of the Preferences
9. Start hot reloading by selecting the menu **Plugins → dev-tools → Start hot reloading themes**
10. Run `bunx dev-server` to start the development server
@@ -165,7 +165,7 @@ There are three tabs in the tool:
- **Variables**: Lists all the CSS variables used in the app. As you can see, it includes not only colors but also border radii, sizes, font weights, and more. However, you don’t need to change every variable for your theme
- **Color Tokens**: Lists all the primitive color variables
- Variables starting with `--color-` can be used as color values
- - Variables starting with `--hsl-` define HSL color parameters, such as `215deg 28% 17%`, which are useful for adjusting opacity, for example, `hsl(var(----hsl-gray-800 / 30%)`
+ - Variables starting with `--hsl-` define HSL color parameters, such as `215deg 28% 17%`, which are useful for adjusting opacity, for example, `hsl(var(--hsl-gray-800 / 30%))`
- **Components**: Previews some components with the current theme. The tool supports hot reloadig, so it will update colors as you modify the variables.
### Acrylic background support
@@ -237,7 +237,7 @@ To create a preview theme, do the following:
3. Open a terminal in the theme's directory
4. Change the name of the theme in the theme's `package.json` file
5. Run `ipm link --dev` to symlink your repository to `/inkdrop/dev/packages`. You can find the user data directory as described on [this page](https://docs.inkdrop.app/reference/user-data-directory).
-6. Reload Inkdrop using Alt+Cmd+Ctrl+R / Alt+Ctrl+R
+6. Reload Inkdrop using Alt+Cmd+Shift+R / Alt+Shift+R
7. Enable the theme via the "_Preview Theme_" drop-down in the "Themes" tab of the Preferences
8. Start hot reloading by selecting the menu **Plugins → dev-tools → Start hot reloading themes**
From f8f3e8f85e7378feb95292d6dcae888e49919c50 Mon Sep 17 00:00:00 2001
From: NgocCuong
Date: Sat, 19 Jul 2025 09:43:58 +0700
Subject: [PATCH 2/3] docs(create-a-them/page): revert keyboard shortcut
---
src/app/guides/create-a-theme/page.mdx | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/app/guides/create-a-theme/page.mdx b/src/app/guides/create-a-theme/page.mdx
index 03bd321..b9878cb 100644
--- a/src/app/guides/create-a-theme/page.mdx
+++ b/src/app/guides/create-a-theme/page.mdx
@@ -41,7 +41,7 @@ Themes are pretty straightforward but it's still helpful to be familiar with a f
### Enabling Development Mode
**Development Mode** enables the "**Inspect Element**" context menu in Inkdrop, which helps you build your themes easier.
-Select the menu _Inkdrop > Preferences_ on macOS or _File > Settings_ on Windows and Linux, click the _General_ tab on the left hand navigation, and check the "_Development Mode_", then reload the app by pressing Alt+Cmd+Shift+R / Alt+Shift+R
+Select the menu _Inkdrop > Preferences_ on macOS or _File > Settings_ on Windows and Linux, click the _General_ tab on the left hand navigation, and check the "_Development Mode_", then reload the app by pressing Alt+Cmd+Shift+R / Alt+Ctrl+R
Now you can use Chrome's Developer Tools.
Right-click an HTML element you can to inspect its styles.
@@ -80,7 +80,7 @@ To create a syntax theme, do the following:
3. Open a terminal in the theme's directory
4. Change the name of the theme in the theme's `package.json` file
5. Run `ipm link --dev` to symlink your repository to `/inkdrop/dev/packages`. You can find the user data directory as described on [this page](https://docs.inkdrop.app/reference/user-data-directory).
-6. Reload Inkdrop using Alt+Cmd+Shift+R / Alt+Shift+R
+6. Reload Inkdrop using Alt+Cmd+Shift+R / Alt+Ctrl+R
7. Enable the theme via the "_Syntax Theme_" drop-down in the "Themes" tab of the Preferences
8. Enable hot reloading by selecting the menu **Plugins → dev-tools → Start hot reloading themes**
@@ -115,7 +115,7 @@ To create a UI theme, do the following:
4. Change the name of the theme in the theme's `package.json` file. If your theme is going to be a dark theme, you should also change the `themeAppearance` key to `dark` in the `package.json` file.
5. Run `bun install` to install dependencies
6. Run `ipm link --dev` to symlink your repository to `/inkdrop/dev/packages`. You can find the user data directory as described on [this page](https://docs.inkdrop.app/reference/user-data-directory).
-7. Reload Inkdrop using Alt+Cmd+Shift+R / Alt+Shift+R
+7. Reload Inkdrop using Alt+Cmd+Shift+R / Alt+Ctrl+R
8. Enable the theme via the "_UI Theme_" drop-down in the "Themes" tab of the Preferences
9. Start hot reloading by selecting the menu **Plugins → dev-tools → Start hot reloading themes**
10. Run `bunx dev-server` to start the development server
@@ -237,7 +237,7 @@ To create a preview theme, do the following:
3. Open a terminal in the theme's directory
4. Change the name of the theme in the theme's `package.json` file
5. Run `ipm link --dev` to symlink your repository to `/inkdrop/dev/packages`. You can find the user data directory as described on [this page](https://docs.inkdrop.app/reference/user-data-directory).
-6. Reload Inkdrop using Alt+Cmd+Shift+R / Alt+Shift+R
+6. Reload Inkdrop using Alt+Cmd+Shift+R / Alt+Ctrl+R
7. Enable the theme via the "_Preview Theme_" drop-down in the "Themes" tab of the Preferences
8. Start hot reloading by selecting the menu **Plugins → dev-tools → Start hot reloading themes**
From 87fc1e8cd9e62970a48f478f97e20925b93f5ec2 Mon Sep 17 00:00:00 2001
From: NgocCuong
Date: Sat, 19 Jul 2025 09:55:53 +0700
Subject: [PATCH 3/3] docs(guides): update shortcut reload app
---
src/app/guides/plugin-word-count/page.mdx | 2 +-
src/app/guides/text-annotations/page.mdx | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/app/guides/plugin-word-count/page.mdx b/src/app/guides/plugin-word-count/page.mdx
index c8b8302..62b3656 100644
--- a/src/app/guides/plugin-word-count/page.mdx
+++ b/src/app/guides/plugin-word-count/page.mdx
@@ -221,7 +221,7 @@ You can install the plugin locally for development.
Run `ipm link --dev` to symlink your repository to `/dev/packages` in [the user data directory](https://docs.inkdrop.app/manual/basic-usage#user-data-directory).
-Let Inkdrop run in **Development Mode** by selecting the menu _Inkdrop > Preferences_ on macOS or _File > Settings_ on Windows and Linux, clicking the _General_ tab on the left hand navigation, and check the "_Development Mode_", then reload the app by pressing `Alt+Cmd+Ctrl+L` / `Alt+Ctrl+L`.
+Let Inkdrop run in **Development Mode** by selecting the menu _Inkdrop > Preferences_ on macOS or _File > Settings_ on Windows and Linux, clicking the _General_ tab on the left hand navigation, and check the "_Development Mode_", then reload the app by pressing `Alt+Cmd+Shift+R` / `Alt+Ctrl+R`.
### Understanding the Generated Code
diff --git a/src/app/guides/text-annotations/page.mdx b/src/app/guides/text-annotations/page.mdx
index 2957ce9..5cc6ced 100644
--- a/src/app/guides/text-annotations/page.mdx
+++ b/src/app/guides/text-annotations/page.mdx
@@ -33,7 +33,7 @@ And you can define stylesheets only applied to notes in this notebook.
## Enable Development Mode
-Let Inkdrop run in **Development Mode** by selecting the _Inkdrop > Preferences_ menu, clicking the _General_ tab on the left hand navigation, and check the "_Development Mode_", then reload the app by pressing `Alt+Cmd+Ctrl+L` / `Alt+Ctrl+L`
+Let Inkdrop run in **Development Mode** by selecting the _Inkdrop > Preferences_ menu, clicking the _General_ tab on the left hand navigation, and check the "_Development Mode_", then reload the app by pressing `Alt+Cmd+Shift+R` / `Alt+Ctrl+R`
## Check the class name of the editor
@@ -83,7 +83,7 @@ Create a `styles.less` in [your data directory](https://docs.inkdrop.app/manual/
}
```
-Reload the app by selecting the _Developer -> Reload_ menu or by pressing `Alt+Cmd+Ctrl+L` / `Alt+Ctrl+L`.
+Reload the app by selecting the _Developer -> Reload_ menu or by pressing `Alt+Cmd+Shift+R` / `Alt+Ctrl+R`.
Then, boom! You should see that your notes got special highlightings for italic and strong emphasises.
