Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tessus/joplin-custom-css
📝 My custom styles for Joplin, the open source note taking app
https://github.com/tessus/joplin-custom-css
css joplin theme
Last synced: 15 days ago
JSON representation
📝 My custom styles for Joplin, the open source note taking app
- Host: GitHub
- URL: https://github.com/tessus/joplin-custom-css
- Owner: tessus
- Created: 2020-02-12T11:30:32.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-14T00:20:37.000Z (over 1 year ago)
- Last Synced: 2024-10-14T10:16:25.339Z (28 days ago)
- Topics: css, joplin, theme
- Language: CSS
- Homepage: https://joplinapp.org
- Size: 1.8 MB
- Stars: 95
- Watchers: 10
- Forks: 30
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-joplin - tessus's custom styles - [UI], [Editor]. (Themes)
README
# K.C.'s custom styles for Joplin
Inspired by [Devon's repo](https://github.com/devonzuegel/joplin-custom-css) I've created my own style for Joplin. It's nothing fancy, but should work with all dark themes.
In the future I might add specific styles for other themes.I've also added a [`sample.md`](sample.md) markdown file, which I used for testing the css.
## How to install
There are different ways you can install and use the theme.
### Theme Config Utility
- Clone the repository
- Run `./tcu`See the [section](#tcu) below for a more detailed description of the utility.
### Manual Install
- Clone the repository into your Joplin profile directory. If you don't know where it is, go to `Preferences` and it will show you the location.
- Create symlinks to the `.css` files. (Remove or rename your current css files, if they already exist.)
- Create a new branch for your own changes. This will make it easier when new updates are available.```
cd ~/.config/joplin-desktop
git clone https://github.com/tessus/joplin-custom-css.git
ln -s joplin-custom-css/Dark/userchrome.css
ln -s joplin-custom-css/Dark/userstyle.css
cd joplin-custom-css
git checkout -b my-css
# make changes to the css files and commit them
# when a new update is available, merge or rebase
git fetch origin master:master && git rebase master
```## Dark
![](images/Dark.png)
## tcu
Currently there's only one theme in the repository, so there's no need to specify it.
A backup of the css files will be created automatically in case data would be lost otherwise.
```
tcu - Theme Config Utilityusage: tcu [-t|--theme THEME] [-p|--profile PROFILE_DIR] [-x|--no-theme] [-c|--copy] [-d|--debug] [-V|--version] [-h] [--help]
-t, --theme THEME
activate THEME
available themes:
dark
none (same as -x, --no-theme)-p, --profile PROFILE_DIR
Joplin profile directory-x, --no-theme
deactivate current theme-d, --debug
print debug information-c, --copy
copy files instead of creating symbolic links-V, --version
version information-h
usage information--help
this help
```## Credits
Many of the CSS snippets were taken from different topics on the [Joplin forum](https://discourse.joplinapp.org/). A few of them I used ad verbatim, others I had to adjust to match my theme, and others served as an inspiration.