CSS theme - Ohmine Dark Theme v3

Lounge
21

Hi @Nacandev ,

Sorry for the delay, I took a real weekend without computer :wink:
No I don't have that problem. The font has a normal size and is not too light. I also didn't notice that some elements didn't print. Anyway, what doesn't print are the functions related to the plugins but it's related to the export function of Joplin not to your theme. Example, I use a lot the spoiler plugin for my presentations...

:[
Title

Body

]:

... but when I export it prints the visible code in the document.

PS: @skim1124 this font is interesting ! But I would rather see it with a light theme :thinking:

1 Like
22

Here's the font in action in a light theme in Typora.

Screenshot_1
Screenshot_12081×1543 96.4 KB

2 Likes
23

Sounds great! :partying_face:

Did you try to print out the PDF on a paper? I'm acturally want to make sure it's clear on a paper.

I didn't use that plugin but I just install it and give a try. And I found that even I try a few ways to display the spoiler out through the CSS, it's still doesn't works.

24

Thanks for the screenshot. Indeed, I think it is good in light mode :+1:

25

Yes I tried to print. The gray of the font is light but quite readable.

It's strange. For me, it works...

image
image1039×617 62.3 KB

image
image1038×798 16 KB

image
image1031×829 62.5 KB

26

Thank you! I'm gonna try to make them go darker on the next version, causes I can't make sure it would be enough clear on all printer.

Oh! I'm sorry about my poor English. What I means is I'm trying to print it out, but after try several ways and still doesn't work.

Overall, I think the plugin is great. I didn't use it only because I don't need the spoiler function.

1 Like
27

No worries. We understand each other now :wink:

That’s great !

Another question I've been asking myself. Do you think it would be interesting to offer the possibility to have a table of contents. I remember a CSS theme for Org-mode that allowed to have a floating table of contents in the top right corner, it was very convenient for some uses :thinking:

28

Why don't you use the Outline plugin which is already in Joplin?

29

Yes, of course. I use this plugin extensively but it is mostly useful for personal use. With the development of sharing features (Joplin cloud), it would be interesting to be able to share notes with the table of contents. The PDF export doesn't include a clickable table of contents either and for long notes it's a shame. But we should certainly see with @laurent if he plans to integrate the possibility to customize the CSS of shared notes.

30

Oh, that's make sense, but I think you can still create the markdown TOC.

You will be allow to click the link in an Export PDF not Print PDF.

You can copy the below test sample and export to PDF to give a try.

[H2 Heading Sample 2](#h2-heading-sample-2)
[H6 Heading Sample 2](#h6-heading-sample-2)
[H2 Heading Sample 3](#h2-heading-sample-3)
[H6 Heading Sample 3](#h6-heading-sample-3)


# H1 Heading Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

## H2 Heading Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

### H3 Heading Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

#### H4 Heading Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

##### H5 Heading Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

###### H6 Heading Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

# H1 Heading Sample 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

## H2 Heading Sample 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

### H3 Heading Sample 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
#### H4 Heading Sample 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

##### H5 Heading Sample 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

###### H6 Heading Sample 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

# H1 Heading Sample 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

## H2 Heading Sample 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

### H3 Heading Sample 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

#### H4 Heading Sample 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

##### H5 Heading Sample 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

###### H6 Heading Sample 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1 Like
31

It's a good tip but probably a bit tedious if you use it frequently. But thanks for sharing.

32

Ya, I understand that, but it seems we've no choice in the moment. Would you like to try the Generate TOC Table of Contents for Markdown Online (derlin.github.io)? At least to save a bit time while to create a TOC.

1 Like
33

Why not. In general and whatever the output format, I think it would be better to use Pandoc and its multiple options to customize the conversion...

1 Like
34

If you enable the Table of Contents Extension in the Markdown section of Joplin settings you can just add [[TOC]] to the top of a note to automatically create a table of contents. This is based on the headers (H1, H2, H3 etc) used in the note. If this note is exported fom Joplin to PDF the links are "clickable".

EDIT
And the TOC appears / works in a published note.

2 Likes
35

Your reply always surprises me! :star_struck: Superb

36

Oh... That’s great !

37

Have a look at the Plugins section of the Joplin Markdown guide. The title Plugins is misleading it is an old term used in earlier Joplin versions. It actually relates to the options available in the Markdown section of the settings. So all of these are built into Joplin (but not necessarily switched on).

There's other useful stuff available like footnotes, definition lists, abbreviation pop-ups and more!

2 Likes
38

@Nacandev ... A comment on the theme.
When you search for a note, Joplin proposes to show an indication of the notebook that contains this note. This indication appears under the title with the default theme. With your theme, it appears after the title dialog box, which has the effect of making the creation date invisible.

image
image1349×999 145 KB

Can you reproduce this?

1 Like
39

I use the footnotes, but I had missed the table of contents. Thank you.

40

Oh, will be fix this in the upcoming update, thanks! I didn't realize that will overlap on the dates.

1 Like