https://github.com/passwordgloo/typora-foresee-theme
Theme supports for dark and light mode.
https://github.com/passwordgloo/typora-foresee-theme
css typora-theme
Last synced: 8 months ago
JSON representation
Theme supports for dark and light mode.
- Host: GitHub
- URL: https://github.com/passwordgloo/typora-foresee-theme
- Owner: passwordgloo
- License: mit
- Created: 2022-10-26T22:48:03.000Z (over 3 years ago)
- Default Branch: study
- Last Pushed: 2025-09-21T06:25:54.000Z (9 months ago)
- Last Synced: 2025-09-21T08:33:04.605Z (9 months ago)
- Topics: css, typora-theme
- Language: SCSS
- Homepage:
- Size: 10.3 MB
- Stars: 47
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
Typora foresee theme
     
>  Via [中文版本](ReadmeCN.md) for an introduction and more details.
---
## Thanks
Based on default `night` theme modifies my theme
Selected textstyle is inspired by [typora-dyzj-theme](https://github.com/muggledy/typora-dyzj-theme)
## How to use
1. Clone this repository or [download zip](https://github.com/passwordgloo/Typora-foresee-theme/archive/refs/heads/study.zip)
2. Typora open Settings>Apperance>Theme，click the button`open theme folder`
3. Copy and paste files into the theme folder
## Features
- Automatically switch theme mode based on the appearance of the system
- User defined color configuration
- Modular design approach adapts to diverse needs
- Use `scss` format substitute original `css`
## BREAKING CHANGES
### Bar
>[!important]
>Only for gradient.css
```html
note text
info text
tip text
warning text
caution text
important text
```
> [!tip]
>
> Need icon ? We also provide icon to beautify styles
>
```html
note-icon text
info-icon text
tip-icon text
warning-icon text
caution-icon text
important-icon text
```
### Todo list
>[!note]
>use gradient style
### Code Style
#### Inline code
>[!note]
>Use Mac keyboard style for line code and `kbd` element
inline code like this
`kbd` element like this
>[!important]
> Please go to Preferences>Markdown> to turn on `displaying line numbers` for a better experience
1. Support custom cursor color
2. Different code style based on the appearance of the system
### Blockquote
1. Default blockquote style use theme single color
You can type `>` to insert blockquote by default
2. Blockquote style supports linear-gradient
>[!warning]
>
>Only for gradient style
```html
green
blue
orange
purple
red
```
3. Github blockquote style
```markdown
> [!note]
>
> Note text
> [!tip]
>
> Tip text
> [!warning]
>
> Warning text
> [!caution]
>
> Caution text
> [!important]
>
> Important text
```
4. Blockquote style can change its color when it close to heading
### Title
>[!note]
>Redesign header style and its focus mode
### Badge
## Todo
- [x] add more animation style
- [ ] add pdf input style
- [x] Distinguish between dark and light reference block styles
## Personalities
>[!warning]
>The css file located in the root directory of the files is compressed by default.
>
>Please modify the `scss` file located in the `foresee` folder so that you can make your own personal style
```scss
$display: (
light:#FFF,
dark:#666
);
$article: (
light:#FFF,
dark:#323232
);
$sidebar: (
light: #F2F2F2,
dark: #3E3E3E
);
$textColor: (
light:#DEDEDE,
dark:#323232
);
$tomato: #ff6347;
$purple: #ff00ff;
$blue: #00bfff;
$green: #00cd66;
$orange: #ff8c00;
$red: #f14669;
/* Gradient colors */
$black-gradient: #596164, #646c70, #6f787d, #7a8389, #868f96;
$blue-gradient: #005bea, #007bf9, #0097ff, #00affe, #00c6fb;
$tomato-gradient: #ed2842, #f33d58, #f7506d, #fa6181, #fb7294;
$orange-gradient: #e9a11a, #eab211, #e8c40a, #e5d50f, #dee71d;
$purple-gradient: #c471f5, #d66feb, #e46fe1, #f06fd7, #fa71cd;
$green-gradient: #0ba360, #39b05d, #57bc5a, #72c856, #8ed451;
/* You can change theme color and theme gradient color */
$themeColor: $orange;
$focusColor: $green;
$themeGradient:$orange-gradient;
$focusGradient:$green-gradient;
:root {
--bg-color: map-get($article, light);
--select-text-bg-color: map-get($display, dark);
--text-color: map-get($textColor, dark);
--primary-color: $themeColor;
--rawblock-edit-panel-bd: map-get($sidebar, light);
--item-hover-bg-color: $themeColor;
--control-text-hover-color: $themeColor;
--md-char-color: rgba(72, 93, 108, 0.75);
--meta-content-color: var(--md-char-color);
--primary-btn-text-color: var(--text-color);
--active-file-text-color: $themeColor;
}
// Custom fonts and style
$border-radius: 6px;
$font-family: "Microsoft YaHei", "PingFang SC", "Arial", "sans-serif";
/* you can change default page width
#write {
max-width: 914px;
}
*/
```
## Tutorial
Visit [wiki](https://github.com/passwordgloo/Typora-foresee-theme/wiki/English-Tutorial) to learn tutorial
## Preview
### Gradient style
### Classic Style
### Glass Style
## Purpose of use
* classify my files
* left the footprint of learning
* enlighten other's thoughts