Skip to content

fix: update keyboard shortcut and correct CSS variable typo #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
craftzdog merged 4 commits into from
Jul 21, 2025
Merged

fix: update keyboard shortcut and correct CSS variable typo #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ca87964
fix: update keyboard shortcut and correct CSS variable typo
crafts69guy Jul 17, 2025
8bdd868
Merge branch 'inkdropapp:main' into patch-1
crafts69guy Jul 19, 2025
f8f3e8f
docs(create-a-them/page): revert keyboard shortcut
cncuong Jul 19, 2025
87fc1e8
docs(guides): update shortcut reload app
cncuong Jul 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/app/guides/create-a-theme/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <kbd>Alt+Cmd+Ctrl+R</kbd> / <kbd>Alt+Ctrl+R</kbd>
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 <kbd>Alt+Cmd+Shift+R</kbd> / <kbd>Alt+Ctrl+R</kbd>

Now you can use Chrome's Developer Tools.
Right-click an HTML element you can to inspect its styles.
Expand Down Expand Up @@ -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 `<USER_DATA>/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 <kbd>Alt+Cmd+Ctrl+R</kbd> / <kbd>Alt+Ctrl+R</kbd>
6. Reload Inkdrop using <kbd>Alt+Cmd+Shift+R</kbd> / <kbd>Alt+Ctrl+R</kbd>
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**

Expand Down Expand Up @@ -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 `<USER_DATA>/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 <kbd>Alt+Cmd+Ctrl+R</kbd> / <kbd>Alt+Ctrl+R</kbd>
7. Reload Inkdrop using <kbd>Alt+Cmd+Shift+R</kbd> / <kbd>Alt+Ctrl+R</kbd>
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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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 `<USER_DATA>/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 <kbd>Alt+Cmd+Ctrl+R</kbd> / <kbd>Alt+Ctrl+R</kbd>
6. Reload Inkdrop using <kbd>Alt+Cmd+Shift+R</kbd> / <kbd>Alt+Ctrl+R</kbd>
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**

Expand Down
2 changes: 1 addition & 1 deletion src/app/guides/plugin-word-count/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions src/app/guides/text-annotations/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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.

![Result](/images/adding-styles-for-text-annotation_result.png)
Expand Down