Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gonzalovsilva/joplin-dark-theme

Last synced: 4 months ago
JSON representation

Host: GitHub
URL: https://github.com/gonzalovsilva/joplin-dark-theme
Owner: gonzalovsilva
Created: 2021-05-11T11:32:51.000Z (almost 4 years ago)
Default Branch: main
Last Pushed: 2024-10-27T20:29:35.000Z (4 months ago)
Last Synced: 2024-10-28T00:52:58.180Z (4 months ago)
Language: CSS
Size: 22.4 MB
Stars: 59
Watchers: 4
Forks: 14
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

awesome-joplin - gonzalovsilva's custom styles - [UI], [Editor], [Fonts], [Dark]. A material theme inspired from One Dark Pro. (Themes)

README

        # How my [Joplin](https://joplinapp.org/) looks like

Based on the dark theme from [@xplosionmind](https://github.com/xplosionmind/joplin-theme)

Modified to look more like the [One Dark Pro](https://github.com/Binaryify/OneDark-Pro) on vscode.

Took some inspiration on the PHPStorm [Nord](https://www.nordtheme.com/ports/jetbrains) theme.

## Features

- Added margins to the editor

- Add custom headers (with 1 color per header)

- Custom notes separator

- Better reading experience (subjective)

- fixed note links contrast with new modern icon

- responsive multi-column markdown render

- 2-column export for pdf

## Todo

- [ ] Clean CSS

## What it looks like

[![youtube video demo](https://img.youtube.com/vi/f7V8PbmumOY/0.jpg)](https://www.youtube.com/watch?v=f7V8PbmumOY)

![how_my_joplin_looks_like.gif](./_resources/3ff4c2509d9c4095996bc6db57c004c9.gif)

![side_by_side_note_taking_joplin.gif](./_resources/5e0aa07405f84903ac89881f1663bf93.gif)

## Responsive markdown render

![responsive-demo.gif](./_resources/responsive-demo.gif)

## Installation

`userchrome.css` is used to style the entire app, `userstyle.css` is used to style the parsed markdown, instead.

On newer versions of Joplin, you'll need to activate the `Legacy Markdown Editor` :

![Use_legacy_markdown_editor](./_resources/Use_legacy_markdown_editor.png)

In order to use these stylesheets, place them in `~/.config/joplin-desktop/` on linux, and in `%userprofile%\.config\joplin-desktop\` on windows.

### fonts used in this custom theme :

- Editor font family : [Fira Code](https://github.com/tonsky/FiraCode) font size at 13

- [Noto Sans JP](https://fonts.google.com/specimen/Noto+Sans+JP)

- [Roboto](https://fonts.google.com/specimen/Roboto)

## How to enable those header styles (h1 to h6)

If you want to use those, don't forget to enable the rich markdown plugin and check this option bellow :

![Rich Markdown plugin option to check](_resources/additional_cc_classes.png)

## PDF 2-column example (for grayscale printing)

![pdf-grayscale-demo](_resources/pdf-grayscale-example.png)