Code Monkey home page Code Monkey logo

fluent-typora's Introduction

fluent

Fluent-Typora

This is a theme carefully crafted & designed for modern computer screens, inspired by Microsoft Fluent Design System.

The theme now has a built-in dark mode support. Which means the theme changes with your system, and you don't have to manually setup any preferences.

Separated themes (fluent-light.css, fluent-dark.css) are also provided.

This theme is currently tested on MacOS only.

⚠ Installation

The required font faces are not provided in this repository. You should download the font families manually. Otherwise Typora will render by your system's default.

  • Inter

  • Jetbrains Mono

  • (If you need Chinese support 如果你需要中文支持) Source Han Sans / 思源黑体

    • Notice that if you have the newly released variable font version of Source Han Sans installed, the typography in your PDF exportation might be corrupted. Modify the variable --cjk-font defined in fluent.css to fix this. (Strokes in Source Han Sans VF are separated)
    • 如果你安装了新的可变字体版本思源黑体,PDF 导出可能会出现问题。此时请修改 fluent.css 中的 --cjk-font

Escapings

You can place headers in blockquote with extra styles.

> # Bookmark
> This is `H1` inside a block quote.

And this theme renders them like this:

fluent escaping

Screenshots

fluent light

fluent dark

fluent-typora's People

Contributors

ginkgocoder avatar li3zhen1 avatar lscool66 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

fluent-typora's Issues

Dark version

I love using this theme during the day, but have to switch to something else at night for easier reading. Do you have any plans for a dark version? Happy to work on it if you don't have the time 👍

Some logical operators in code are getting replaced

I've noticed that some logical operators such as != or !== are being replaced by a single character in the code blocks.
Example:
image

I don't see these replacements if I switch to another theme.
Can you disable this?

Bookmark Icon

How do you use the Bookmark and other icons with this theme?

提几个暗色模式的问题

  1. 代码块的光标是黑色
  2. 选中文字时,选中底色和文字都是浅色,观看是模糊不清
  3. 建议发布打包文件,把需要的字体放进去

催更

希望能够有下个版本,Fluent yyds.

Dark theme

Hey, thanks for the beautiful work. Have you thought of making a dark version of the theme? I think it would look awesome!

PS: not completely dark like #000000 but in line with the colour scheme of Fluent design

About the h4, h5, h6 in blockquotes

Hi, the interesting guy who designed Fluent theme, I'm sorry to bother you, when I try to use h4, h5 and h6 in blockquotes, I found that there is no related symbol such as the example picture, it shows like □
很抱歉打扰到您,不介意的话后面我就用中文了哈
我注意到那块儿代码用到的是"思源宋体 CN"字符代码\f097所对应的符号
但我下载到的“思源宋体 CN”好像并没有这个字符
能不能麻烦您提供一下您的字体链接啊T^T
Thank you very much

Unibody Windows Style Support

Hey there, this theme is absolutely beautiful!

I'm not sure what system you're developing on, but I've noticed it looks like the theme isn't tested with the Windows Unibody style.
When this is enabled, the left menu looks like this:
image

It looks like the CSS-classes responsible for that styling start with .megamenu.
Is there any way you could make an update for that?

I've tried tinkering with it, but you definitely have a talent for design that I don't :-)

Adding the following to fluent.css fixes the biggest problem.

.megamenu-content, .megamenu-opened header {
    background: var(--elevated-background);
}

The menu then looks like this:

image

The "recently opened documents" seem to lie within the div #recent-file-panel, but I haven't really succeeded in making that look nice.

Apart from that, I've only found one more thing:
image

Thanks for the great theme - it would be wonderful if you found the time to patch this!

P.S.:
Relatively many themes don't support the Windows-Unibody style quite right, but themes like Panda do.

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.