h16nning / typora-gitbook-theme

This is a Typora theme is inspired by gitbook.com. Most of the user interface has been overhauled. It contains three variants: two light variants and one dark theme.

Gitbook Theme For Typora

This typora theme is inspired by the Gitbook document style. It features three variants: Azure, Slate and Teal.

Designed and tested on Windows 10 and macOS. Not tested, but it should also work for Linux.

Installation instructions

1. Download the zipped project package here and un-zip it.
2. Copy the gitbook-azure.css, gitbook-slate.css and gitbook-teal.css file as well as the folder named gitbook to your Typora theme library. It is important that you put this folder in there too as it contains important files and fonts, which are required for the theme to work properly.
3. Launch or restart Typora and choose Gitbook Azure, Gitbook Slate, Gitbook Teal from the theme menu.

Contributing

Feel free to submit an issue, if something does not work / look right or you have any suggestions. If you would like to, you can also create your own variations of this theme (and / or open a pull request).

Please note that this theme is still in development. Updates are to expect.

Modfications

If you prefer the colors of the slate variant used previous to version 1.9 (these were slightly lighter and more slate-like), you can open the file gitbook-slate.css and change the second line from @import "gitbook/slate-colors.css"; to @import "gitbook/old-slate-colors.css";. After that you have to save the file and restart Typora for the colors to update properly. Sometimes it may also be necessary to switch to a different theme and then back to the Gitbook Slate theme after changing this.

You can also put these modifications into a seperate css file as chchen-standford points out here.

Details

Older Screenshots

These screenshots are not fully up to date but they show the slate and teal variants and some Windows specific views.

typora-gitbook-theme's Issues

Graphical bug in the Themes Menu

There is a graphical bug in the Themes Menu of Typora which causes parts of the preview getting rendered above the checkmark.

Big left blank area

The left blank area of this theme is much bigger than the official theme "Github", which causes the display area to decrease.

Readability in "Preference" Page

Hello! It has been a quite while since last update. I'm not sure whether you are still updating, but here is the issue I recently met with the newest updating from Typora.

When I enter the typora preference page -> Export, (as you may see in the picture) the background color blend with the font color, it is almost impossible to read it in the Slate theme.

Again, thank you soooo much for bring this excellent theme for us.

add tag before headers

awesome theme, we love it so much ~
could you pls add this little tag before headers, really helpful for us to add header on order, thx~

How to adjust the width?

Reduce left padding in code block

Hi, thanks for your theme, it's really beautiful.
I'm a mac user, I'd like none padding in code block, like default theme GitHub. However, I have set padding to 0rem, but it's also different with GitHubtheme. Is there any way to further reduce the left padding in the code block to be like Github theme?

typora-gitbook-theme/src/gitbook-azure.css

Lines 499 to 504 in d57b824

	/*CODE*/
	.CodeMirror {
	padding: 1rem;
	font-family: var(--code-font-family);
	}

1. This Gitbook-Azure theme(padding=1rem):
   
2. This Gitbook-Azure theme(padding=0rem):
   
3. Default Github theme:
   

small detail when writing the language

Congratulations on creating this theme, I really love it.
I just found a minute detail

macOS Catalina 10.15.7
Typora 0.9.9.35.2

What about diagram support?

Hello,

I think theme doesn't support diagrams. Default themes come with this feature. Can you add this?

Gitbook Azure Theme:

Github Theme:

slate显示为白色

slate不是暗黑模式吗？我的背景显示为白色

The highlight color in the equation block is difficult to recognize in some cases

Would you consider offering a GitBook theme on Obsidian?

Your theme made me fall in love with writing! Thank you for your excellent work.

I wonder if it is possible to make this theme available on Obsidian?

The cursor of the first character in a list item is slightly higher

The problem exists in both ordered and unordered list. For example, when inserting an ordered list, type 1. followed by a space. Then an empty list is created, and it is found that the cursor is slightly higher than expected. It returns to normal after entering any character in the list.

Compare the height of the bottom of the cursor with the height of "1." in the following two pictures:

I found this problem on macOS. There is no such problem under Windows.

In the code block, the line number is displayed incorrectly

In the code block, it seems that the line number can only display two digits. When the line number exceeds 99, an exception is displayed.

As shown below:

This problem is both on macOS and Windows.

code line number display has overlap

As shown in the following graph, when the line number is greater than 10, with gitbook theme set as the default one, open typora directly, this phenomenon will appear.

However, after switching into a different theme and switch back, the problem will disappear.

Typora: 0.9.96

Minor Math Block Counter Error

Hi! Again, thank you for bring this theme to us and helped me a lot!

Running on Win 10; Version 1.6.1

When I add the math block at first, the counter is (1), as it should be. However, after I modified it somehow, it jumpped to (2)

This is the oringal one which display correct

$$ prod_{i=1}^n p_i^{-p_i},\ where\ D\ is\ Diversity\ Index $$

This is after modification:

$$ D=\prod_{i=1}^n p_i^{-p_i},\ where\ D\ is\ Diversity\ Index $$

If you enter it correctly at the first time, this bug will not appear. I tried several time later, but I still can't tell what action it is.

Minor Display Issue When Selecting Texts

Hi! As I circled out in the picture that when selecting a part of text containning highlighted text, the background of beginning of each line and the end of each line is not properly hightlighted.

Background Color for Gitbook Slate

Gitbook Azure/Slate are my primary Typora themes. Thanks for sharing these beautiful themes!

Right now I am still using v1.8 because I like the bluish background better. The new background in v1.9.1 is a little too dark for me. I wonder if you could code the CSS in a way that is very easy to tweak the background color, perhaps by changing one or two global variables under :root?

Issue on code blocks

Typora latest update has broken the code blocks (tested under macOS). See (line six):

Word Highlight while Searching

As you may see in the picture. When I'm searching for some words that is highlighted by ==word== syntax was changed in to the same color as the background. Maybe change it to another color would be better?

Wish i can have a .docx output style file

Hello guys, recently my work need i write document in .docx, and i really like your typora theme work, so i was wondering, if you guys can support a .docx stylesheet file for Word, Thanks!

The table toolbar will cover the table header when editing a table.

Bug description
The table toolbar will cover the table header when editing a table.

Version used

Screenshots
This is what it looks like without editing the form：

What it looks like when editing the table

The saved button and its icon in the sidebar are not in the horizontal

Describe the bug
The saved button and its icon in the sidebar are not in the horizontal plane. Please fix it. Thank you.

Screenshots

Slate Azure still has scroll bar issue in the code line numbers column

On MacOS, Slate Azure theme still has the scroll bar issue in code line numbers column. Problem is fixed for Teal and Slate. Hopefully, this is an easy fix, or please let me know what I need to change in my CSS. Actually ... the spacing in Azure looks different from Teal and Slate as well. Have I done something wrong during installs? Azure just seems like the odd one out of the three.

Rounded Cornor of Highlighted Part

Thank you for the theme!!! I really love it, but I found there are some details are not very good.

As you may see in the picture below, the cornor of highlight is only rounded at the begining and at the end. And when it come to a new line, it is 90 degree sharp, which I think is not very consistant with the design.
Could you make an improvment on it?

Minor Display Issue of Math Block

Running on Win 10.

When using a BIG symboy like \sum, the lower part will go out from the box when having preview. No problem found in final view. Don't know whether it is Typora's problem.

BTW, I haven't fix the problem #8 by the 1.6.1 release. I paste the unzipped zip folder to the theme folder, but the connor is still sharp as it was.

Shake problem.

I commit an issue in Typora, click here to jump , finally I find that the problem only happen in Gitbook theme.

transition cause focus problem

In Windows 10 system , Typora version : 0.10.11. if not focus(select) on sidebar item,sidebar drop item will flash across . i debug this issue, It's cause by transition code.

.file-tree-node:not(.file-node-root):not(.file-node-expanded)
    .file-node-background {
    transition-duration: 0.2s;
    transition-property: background-color;
}

remove this code, problem resolve. maybe another solution?

Readability of Links in Highlighted Mode

Similar issue with the last one I posted. The font color is exactly the same as highlighted background when editing. Merely visible when I put my cursor on the link. Could you change the font color a bit to increase the readability?

Thank you sooooo much for making this theme! It is now my favorite theme!

Too many blanks in outline

There's too many blanks between different level of titles in outline, is there corresponding solution?

Search Panel displayed incorrectly

The "regex" button and the "whole word" button are overlapping.