self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-11-24 08:12:24 +02:00
Code Issues Releases Activity

Desktop: Fixes #4754: Roboto font in plugins (#4755)

Browse Source
This commit is contained in:
Brett Bender 2021-04-24 01:51:21 -07:00 committed by GitHub
parent da8cc73df6
commit 108b5b4cdc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 55 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -109,6 +109,7 @@ The Web Clipper is a browser extension that allows you to save web pages and scr
- [Data API](https://github.com/laurent22/joplin/blob/dev/readme/api/references/rest_api.md)
- [Plugin manifest](https://github.com/laurent22/joplin/blob/dev/readme/api/references/plugin_manifest.md)
- [Plugin loading rules](https://github.com/laurent22/joplin/blob/dev/readme/api/references/plugin_loading_rules.md)
- [Plugin theming](https://github.com/laurent22/joplin/blob/dev/readme/api/references/plugin_theming.md)
- Development

1
packages/app-desktop/index.html
View File

@ -10,7 +10,6 @@
<title>Joplin</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style/icons/style.css">
<!-- TODO: Remove once all icons have been swapped -->
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="node_modules/react-datetime/css/react-datetime.css">
<link rel="stylesheet" href="node_modules/smalltalk/css/smalltalk.css">

3
packages/app-desktop/services/plugins/UserWebviewIndex.html
View File

@ -3,6 +3,9 @@
<head>
<meta charset="UTF-8">
<script src="UserWebviewIndex.js"></script>
<link rel="stylesheet" href="../../style/icons/style.css">
<link rel="stylesheet" href="../../node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="../../node_modules/roboto-fontface/css/roboto/roboto-fontface.css">
<style>
html {
overflow: hidden;

51
readme/api/references/plugin_theming.md Normal file
View File

@ -0,0 +1,51 @@
# Plugin theming
## CSS
Plugins add custom content to the UI using
[webview panels](https://joplinapp.org/api/references/plugin_api/classes/joplinviewspanels.html).
The HTML content of a a panel is styled with CSS.
To keep the look and feel of a plugin consistent with the rest of the Joplin UI,
you are automatically provided with variables derived from the current theme.
Variables follow the naming convention `--joplin-{property}` and are used
in your plugin's stylesheet as shown here.
```css
/* webview.css */
.container {
color: var(--joplin-color);
font-family: var(--joplin-font-family);
}
```
## Icons
In addition to variables, you have access to a set of standard font assets that ship with Joplin.
These include:
* [Roboto](https://fonts.google.com/specimen/Roboto?preview.text_type=custom) - (the standard UI font, `font-family` referenced above)
* [Font Awesome](https://fontawesome.com/icons?d=gallery&p=2&m=free) - icon library
* [icoMoon](https://icomoon.io/#preview-free) - icon library (subset, see [style.css](https://github.com/laurent22/joplin/blob/dev/packages/app-desktop/style/icons/style.css))
To display an icon, use CSS and HTML like the following.
```css
/* style icons to match the theme */
.toolbarIcon {
font-size: var(--joplin-toolbar-icon-size);
}
.primary {
color: var(--joplin-color);
}
.secondary {
color: var(--joplin-color-2);
}
```
```html
<i class="toolbarIcon primary fas fa-music"></i> Font Awesome music icon
<br />
<i class="toolbarIcon secondary icon-notebooks"></i> icoMoon notebook icon
```