Giter VIP home page Giter VIP logo

typora-github-night-theme's Introduction

GitHub Night Themes for Typora

Three dark themes for Typora, a multi-platform Markdown Editor, that reproduces the new GitHub Dark Themes, recently deployed on their website — Default Dark, Dark dimmed, Dark High Contrast.

Installation

  1. Download the zipped project package or the latest stable release.
  2. Launch Typora and open Preferences from the app menu.
  3. Go to the Appearance tab, and choose Open Theme Folder.
  4. Copy all the github-night*.css files and the github-night folder to your Typora theme library.
  5. Launch or restart Typora and choose one of the GitHub Night themes from the theme menu.

Status

The themes are usable on all three platforms. Since I have only macOS at my disposal right now to test, the themes might look weird on Windows/Linux and still need improvements.

For that matter, Issues and Pull Requests are very welcome!

Screenshots

All the screenshots below feature the default GitHub Dark theme, "GitHub Night".

Articles

Source Mode

Focus Mode

Code Blocks & Folders Menu

Plan

Other theme in Typora

I made another theme for Typora, a dark blue one. It's called "Hivacruz" and you can find it here: https://github.com/kinoute/typora-hivacruz-theme.

Other themes in other apps

I made other themes for different applications. Here there are:

Credits

  • Created by Yann Defretin.
  • Based on the official GitHub Dark Themes available on their website.
  • The main font used is Nunito designed by Vernon Adams.
  • The font used for Code Blocks is San Francisco Mono by Apple.

typora-github-night-theme's People

Contributors

egglessness avatar fulldecent avatar kinoute avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

typora-github-night-theme's Issues

Custom fonts not working

I'm using Typora (version 0.10.11) and github night theme (version 0.5.0) in Windows 10.
I want to use custom fonts, so I followed the instruction, creating base.user.css under theme folder and appending these lines in it:

body {
  font-family: Consolas, "思源宋体";
}

It worked in themes such as Github theme, you can see the difference.
Before using base.user.css:

typora-github-theme-before

After using base.user.css:
typora-github-theme-after

But in github night theme, base.user.css can not work.
Before:
typora-github-night-theme-before

After:
typora-github-night-theme-after

I'm sorry that I know little about css, I just tried to remove 思源宋体 in base.user.css but nothing changed.

body {
  font-family: Consolas;
}

I also tried {current-theme}.user.css, which didn't work either.
Is there any way to solve this problem? Thank you!

Spacing inside inline code-block is wrong

The screenshot says everything. The space between “swift” an “main.swift” is just a single, normal, space. But the preview displays it as if it is a tab or multiple spaces.

screen

White editor

Would love to see a variant of the theme where the editor is white and the UI ist still dark (dimmed).

Thanks for the great work!

Not night when "Open Quickly" or editing raw blocks

Love your theme!

"Open Quickly" (Ctrl+P or ++O, as listed in Shortcut Keys) will pop up a window (CSS selector: #typora-quick-open), and its background is still white.
White background
Note: It might be hard to locate the window, because when you Ctrl+Shift+C, the window just disappears. I search window's title ("Recent Files" in English ver. or “最近打开的文件” in my Chinese ver.) in the HTML, then manually write background: red in element.style to check. I wish this may help.


Raw blocks (LaTeX or HTML, CSS selector: .md-rawblock):
LaTeX block
HTML block
(#c0c0c0 text on #F5F6F7 background is really hard to see…)

Thanks!

// I've changed fonts in base.user.css, therefore our Typora may appear slightly different.

404

Click to download prompt not found.

Numbered list numbers grow in size

Thank you for this nice theme.

Now (on macOS at least), subsequent numbered list numbers (the "1." below) grow in font size, for a source like the following:

1. Lkjmlkj 
   1. lkjmlkj
      1. lkjmklj
         1. lkjmlkj
            1. lkjmklj
               1. lmkjmlj

The resulting effect is strange and, I guess, not intended.

I would expect each number to be of the same size as the text.

Found some style issues

FAQ

Hello, I really like the dark theme you made.
But I used it on the windows platform and found some problems:

  1. ``` is displayed as a `.

Typora default GitHub Theme

a ` display:

three ` display:

GitHub Night Theme

a ` display:

three ` display:

Scroll bar cannot be seen

In this theme scroll bar cannot be shown:
20210130210726

Instead Official GitHub Theme looks like this, which can show it correctly:
20210130210752

Hello

Can you tell me how to modify the background color of the selected text?
Thanks!
image

Pitch Black Theme

A pitch black version of "GitHub Night" would be awesome!

I like your themes.

Different code block font size depending on the context

This theme is great! The only thing that I noticed is that, for some reason, blocks of code have different font size depending on where they are.

For instance, in the screenshot below, the first code block (paragraph) is correct in size, while the second (bullet list) looks bigger:

Screenshot 2021-03-17 at 10 51 32

Is it possible to solve this problem?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.