search

Zuoqiu-Yingyi / siyuan-theme-dark-plus

思源笔记的一款多功能双模式主题 | A multifunctional dual-mode theme of SiYuan Note.
GNU Affero General Public License v3.0
139 stars 14 forks source link
dark-theme less light-theme monaco-editor siyuan siyuan-note siyuan-theme theme theme-ui vanilla-js

readme

--- [![GitHub release (latest by date including pre-releases)](https://img.shields.io/github/v/release/Zuoqiu-Yingyi/siyuan-theme-dark-plus?include_prereleases&style=flat-square)](https://github.com/Zuoqiu-Yingyi/siyuan-theme-dark-plus/releases/latest) [![GitHub Release Date](https://img.shields.io/github/release-date/Zuoqiu-Yingyi/siyuan-theme-dark-plus?style=flat-square)](https://github.com/Zuoqiu-Yingyi/siyuan-theme-dark-plus/releases/latest) [![GitHub License](https://img.shields.io/github/license/Zuoqiu-Yingyi/siyuan-theme-dark-plus?style=flat-square)](https://github.com/Zuoqiu-Yingyi/siyuan-theme-dark-plus/blob/main/LICENSE) [![GitHub last commit](https://img.shields.io/github/last-commit/Zuoqiu-Yingyi/siyuan-theme-dark-plus?style=flat-square)](https://github.com/Zuoqiu-Yingyi/siyuan-theme-dark-plus/commits/main) ![GitHub repo size](https://img.shields.io/github/repo-size/Zuoqiu-Yingyi/siyuan-theme-dark-plus?style=flat-square) ![hits](https://hits.b3log.org/Zuoqiu-Yingyi/siyuan-theme-dark-plus.svg) [![GitHub all releases](https://img.shields.io/github/downloads/Zuoqiu-Yingyi/siyuan-theme-dark-plus/total?style=flat-square)](https://github.com/Zuoqiu-Yingyi/siyuan-theme-dark-plus/releases) [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributor-introduction) --- [简体中文](./README_zh_CN.md) \| English ---

🌙Dark+

A dark theme (which also supports light mode, can you imagine that ~) of SiYuan Note.

It is now on the shelves of the Siyuan Notes Community Bazaar. If you like this theme, welcome to light up ⭐ for this project!

NOTICE

❗The functions have been migrated to plugins and disabled by default in this theme❗

⚠️The functions have been migrated to plugins but can still be used in the theme⚠️

FEEDBACK

PREVIEW

light-relative light-location

dark-relative dark-location

row-level element alignment-relative row-level element alignment-location

List indentation alignment-relative List indentation alignment-location

Common 2:1 monospace font for Chinese and Western languages.: 仿宋, 黑体, 楷体, 隶书, 宋体, 新宋体, 幼圆

The 2:1 monospaced font in Chinese and Western characters used in the schematic diagram:

INTRODUCTION

CONTRIBUTOR INTRODUCTION

Function Contributor Project
inline comments and notes langzhou siyuan-note/siyuan-comment at main · langzhou/siyuan-note · GitHub
list mind maps royc01 royc01/notion-theme: notion复刻
thxnder
thxnder
💻 🐛		 langzhou
langzhou
💻		 royc01
royc01
🤔 💻		 UserZYF
UserZYF
📹		 吃星尘的羊
吃星尘的羊
🎨

PS: The table is generated automatically using All Contributors · GitHub, go to emoji key to see the contribution type.

SHORTCUT KEYS

THEME SHORTCUT KEYS

Shortcut Keys Operational objectives Function
Middle Mouse Button
❗Disabled by default in the v2.8.10+ version of SiYuan		 entire window open the block or hyperlink in a new window
❗Migrated to plugin Web Page View webview
Right Mouse Button slider on the right side of the document / current reading progress indicator jump to where the document was last browsed
Shift + Middle Mouse Button
❗Disabled by default in the v2.8.10+ version of SiYuan		 entire window open the block in a new window and focus
❗Migrated to plugin Web Page View webview
Alt + Middle Mouse Button
❗Disabled by default in the v2.9.8+ version of SiYuan		 entire window open the Monaco Editor in a new window and edit the content
❗Migrated to plugin Integrated Edit Environment monaco-editor
Shift + Alt + Middle Mouse Button
❗Disabled by default in the v2.9.8+ version of SiYuan		 entire window open the Monaco Editor in a new window and edit the markdown source code
❗Migrated to plugin Integrated Edit Environment monaco-editor
Ctrl/⌘ + Mouse Wheel
❗Disabled by default in the v2.9.8+ version of SiYuan		 entire window adjust the edit area font size
Ctrl/⌘ + Middle Mouse Button hyperlink set the custom block attributes
Ctrl/⌘ + Middle Mouse Button video block/audio block/iframe block write the current timestamp to the clipboard
Ctrl/⌘ + Left Mouse Button video block/audio block/iframe block jump to the point in time set by the custom block attribute time
Ctrl/⌘ + Left Mouse Button widget block/iframe block reload the block contents
Double-click with Left Mouse Button widget block/iframe block reload the block contents
Ctrl/⌘ + F1
Requires to be enabled in a custom profile		 current document render the custom style for all blocks in the current document
Ctrl/⌘ + F5 entire window display block content in full screen
Shift + Alt + B
Requires to be enabled in a custom profile		 entire window turn on/off the feature of tabs are arranged vertically
Shift + Alt + E
Requires to be enabled in a custom profile		 entire window turn on/off the feature of displaying the mark text
Shift + Alt + F
Requires to be enabled in a custom profile		 entire window turn on/off the focus mode (collapse/expand the feature panels)
Shift + Alt + G
Requires to be enabled in a custom profile		 entire window turn on/off list guides (list, table list, mind map list)
Shift + Alt + I
Requires to be enabled in a custom profile		 entire window turn on/off invert color mode
Shift + Alt + L
Requires to be enabled in a custom profile		 entire window turn on/off record the current browsing location
Shift + Alt + M
Requires to be enabled in a custom profile		 entire window turn on/off block menu enhancement
Shift + Alt + N
Requires to be enabled in a custom profile		 entire window open the block where the cursor is located in a new window
Shift + Alt + R
Requires to be enabled in a custom profile		 entire window use the web background images
Shift + Alt + T
Requires to be enabled in a custom profile		 entire window turn on/off typewriter mode
Shift + Alt + C
Requires to be enabled in a custom profile		 current document copy the full markdown text of the current document to the clipboard
Shift + Alt + X
Requires to be enabled in a custom profile		 current document cut the full markdown text of the current document to the clipboard
Shift + Alt + D
Requires to be enabled in a custom profile		 current document delete the full content of the current documen
Shift + Alt + ↑
Requires to be enabled in a custom profile		 current document collapse all sub-headings of the current document
Shift + Alt + ↓
Requires to be enabled in a custom profile		 current document expand all sub-headings of the current document
Ctrl/⌘ + Shift + Alt + R
Requires to be enabled in a custom profile		 entire window use the custom background images
Ctrl/⌘ + Shift + Alt + N
Requires to be enabled in a custom profile		 entire window open the block and focus where the cursor is located in a new window
Ctrl/⌘ + Shift + Alt + L
Requires to be enabled in a custom profile		 entire window clear the current document browsing location history
Ctrl/⌘ + Shift + Alt + O
Requires to be enabled in a custom profile		 current document copy the current document outline as an ordered list
Ctrl/⌘ + Shift + Alt + U
Requires to be enabled in a custom profile		 current document copy the current document outline as an unordered list
Ctrl/⌘ + Shift + Alt + T
Requires to be enabled in a custom profile		 current document copy the current document outline as a task list

EDITOR SHORTCUT KEYS

Shortcut Keys Function
Alt + Z toggle word wrap
Ctrl/⌘ + Alt + P window pin/unpin
Ctrl/⌘ + O open file in VS Code
Ctrl/⌘ + Shift + O open directory in VS Code
Ctrl/⌘ + Alt + C copy link
Ctrl/⌘ + Shift + Alt + C copy full link

CUSTOM BLOCKS ATTRIBUTES

Operational objectives Attribute Name Attribute Value Function
all types of blocks font-family 等线
方正舒体
方正姚体
仿宋
黑体
华文彩云
华文仿宋
华文琥珀
华文楷体
华文隶书
华文宋体
华文细黑
华文新魏
华文行楷
华文中宋
楷体
隶书
宋体
微软雅黑
新宋体
幼圆		 Sets the font family used by the block.
all types of blocks render danmaku
弹幕
(You can separate multiple attribute values with spaces)		 Set the block to the scrolling danmaku block style.
all types of blocks render scroll
滚屏
滚动
(You can separate multiple attribute values with spaces)		 Set the vertical scroll bar for the overly long block.
all types of blocks render invert
反色
(You can separate multiple attribute values with spaces)		 Render all images as inverted colors.
all types of blocks mark display
显示
(You can separate multiple attribute values with spaces)		 Display marked text.
document blocks location block ID The current document browsing location.
document blocks auto-num-h 0
false
禁用
关闭
 Disables automatic numbering of subheading in the document.
document blocks auto-num-f 图
图片
Fig.
figure
Figure
FIGURE		 Enable automatic numbering of pictures in the document.
document blocks auto-num-t 表
表格
Tab.
table
Table
TABLE		 Enable automatic numbering of tables in the document.
document blocks render id
(You can separate multiple attribute values with spaces)		 Renders the ID of each block.
document blocks render href
(You can separate multiple attribute values with spaces)		 Renders the URL of each hyperlink.
document blocks render index
(You can separate multiple attribute values with spaces)		 Renders the ordinal number of the current block in the document.
document blocks render content
(You can separate multiple attribute values with spaces)		 Renders the contents of the input box.
document blocks render outline
(You can separate multiple attribute values with spaces)		 Renders the outline of a hovering block.
non-document blocks position top
bottom		 Pin the block to the top/bottom of the parent container.
non-document blocks style CSS styles Set a custom style for the block.
non-document blocks title Any value Sets the title of the block.
video blocks/audio blocks/widget blocks/iframe blocks width 100% Sets the width of the iframe window to the document width.
video blocks/audio blocks time ss
ss.ms
mm:ss
mm:ss.ms
hh:mm:ss
hh:mm:ss.ms		 Timestamp.
list blocks & document blocks type table
表格
(You can separate multiple attribute values with spaces)		 Renders the list as a table.
list blocks & document blocks type 脑图
map
导图
mind-map
思维导图
(You can separate multiple attribute values with spaces)		 Renders the list as a mind map.
list blocks & document blocks type 看板
board
(You can separate multiple attribute values with spaces)		 Renders the list as a board.
table blocks table-width auto
自动
(You can separate multiple attribute values with spaces)		 Enable table content wraps.
table blocks table-width equal
等宽
(You can separate multiple attribute values with spaces)		 Enable equal cell.
paragraph blocks type 图标题
表标题
figure-title
table-title
(You can separate multiple attribute values with spaces)		 Figure titles/table titles are counted automatically.
paragraph blocks writing-mode horizontal-tb
vertical-rl
vertical-lr
sideways-rl
sideways-lr		 This is shown in the following table.

example-writing-mode

FUNCTIONAL DESCRIPTION

OTHER FEATURES

CUSTOM CONFIG

Custom configuration files Product
<workspace>/data/widgets/custom.js Theme feature configuration, which overwrites the corresponding value in file <workspace>/conf/appearance/themes/Dark+/style/module/config.js
<workspace>/data/widgets/custom.css Themes share style configuration, which overwrites the corresponding value in file <workspace>/conf/appearance/themes/Dark+/style/module/config.css
<workspace>/data/widgets/custom-light.css Theme light color style configuration, which overwrites the corresponding value in file <workspace>/conf/appearance/themes/Dark+/style/config/light.css
<workspace>/data/widgets/custom-dark.css Theme dark config style configuration, which overwrites the corresponding value in file <workspace>/conf/appearance/themes/Dark+/style/color/dark.css

CONFIG EXAMPLE

custom.js

/**
 * File Path
 *    <workspace>/data/widgets/custom.js
 * Example function:
 *    Custom background image list
 *        The directory of the light background image in the example is <workspace>/data/snippets/images/background-light
 *        The directory of the dark background image in the example is <workspace>/data/snippets/images/background-dark
 *
 *    Turn on the Copy current document full-text shortcut (Shift + Alt + C)
 */

export const config = {
    theme: {
        background: {
            image: {
                custom: {
                    random: false,
                    default: true,
                    landscape: { // Landscape background image
                      light: [
                          '/snippets/images/background-light/landscape-background-1.png',
                          '/snippets/images/background-light/landscape-background-2.png',
                          '/snippets/images/background-light/landscape-background-3.png',
                          '/snippets/images/background-light/landscape-background-4.png',
                      ],
                      dark: [
                          '/snippets/images/background-dark/landscape-background-1.png',
                          '/snippets/images/background-dark/landscape-background-2.png',
                          '/snippets/images/background-dark/landscape-background-3.png',
                          '/snippets/images/background-dark/landscape-background-4.png',
                      ],
                    },
                    portrait: { // Portrait background image
                      light: [
                          '/snippets/images/background-light/portrait-background-1.png',
                          '/snippets/images/background-light/portrait-background-2.png',
                          '/snippets/images/background-light/portrait-background-3.png',
                          '/snippets/images/background-light/portrait-background-4.png',
                      ],
                      dark: [
                          '/snippets/images/background-dark/portrait-background-1.png',
                          '/snippets/images/background-dark/portrait-background-2.png',
                          '/snippets/images/background-dark/portrait-background-3.png',
                          '/snippets/images/background-dark/portrait-background-4.png',
                      ],
                    },
                },
            },
        },
    },
}

export async function callback(config) {
    config.theme.hotkeys.doc.copy.enable = true;
}

For more configuration items, see config.js.

custom.css

/**
 * File Path
 *    <workspace>/data/widgets/custom.css
 * Example function:
 *    Custom the blank line prompt text
 */

:root[data-theme-mode=light],
:root[data-theme-mode=dark] {
    /* Blank line prompt */
    --custom-empty-p: "这里是空的 (´･-･)ﾉ㊫";
    --custom-empty-c: "这里是空的 (´･-･)ﾉ↹";
    --custom-empty-t: "这里是空的 (´･-･)ﾉ☑";
    --custom-empty-u: "这里是空的 (´･-･)ﾉ◉";
    --custom-empty-o: "这里是空的 (´･-･)ﾉ①";
}

For more configuration items, see config.css.

The above example is equivalent to the following code snippet:

:root[data-theme-mode=light][data-light-theme="Dark+"], 
:root[data-theme-mode=dark][data-dark-theme="Dark+"] {
    /* Blank line prompt */
    --custom-empty-p: "这里是空的 (´･-･)ﾉ㊫";
    --custom-empty-c: "这里是空的 (´･-･)ﾉ↹";
    --custom-empty-t: "这里是空的 (´･-･)ﾉ☑";
    --custom-empty-u: "这里是空的 (´･-･)ﾉ◉";
    --custom-empty-o: "这里是空的 (´･-･)ﾉ①";
}

Code snippets can be set in Siyuan Settings > Appearance > Code Snippet > CSS.

custom-light.css

/**
 * File Path
 *    <workspace>/data/widgets/custom-light.css
 * Example function:
 *    Custom default light theme background image
 *        The path of the light background image in the example is
 *            <workspace>/data/widgets/background-light.png
 *            <workspace>/data/widgets/background-light-dialog.png
 */

:root[data-theme-mode=light] {
    /* default background image for light color theme */
    --custom-background-image: url("/widgets/background-light.png");

    /* default dialog background image for light color theme */
    --custom-background-image-dialog: url("/widgets/background-light-dialog.png");
}

For more configuration items, see config.css and light.css.

The above example is equivalent to the following code snippet:

:root[data-theme-mode=light][data-light-theme="Dark+"] {
    /* default background image for light color theme */
    --custom-background-image: url("/widgets/background-light.png");

    /* default dialog background image for light color theme */
    --custom-background-image-dialog: url("/widgets/background-light-dialog.png");
}

Code snippets can be set in Siyuan Settings > Appearance > Code Snippet > CSS.

custom-dark.css

/**
 * File Path
 *    <workspace>/data/widgets/custom-dark.css
 * Example function:
 *    Custom default dark theme background image
 *        The path of the dark background image in the example is
 *            <workspace>/data/widgets/background-dark.png
 *            <workspace>/data/widgets/background-dark-dialog.png
 */

:root[data-theme-mode=dark] {
    /* default background image for dark color theme */
    --custom-background-image: url("/widgets/background-dark.png");

    /* default dialog background image for dark color theme */
    --custom-background-image-dialog: url("/widgets/background-dark-dialog.png");
}

For more configuration items, see config.css and dark.css.

The above example is equivalent to the following code snippet:

:root[data-theme-mode=dark][data-dark-theme="Dark+"] {
    /* default background image for dark color theme */
    --custom-background-image: url("/widgets/background-dark.png");

    /* default dialog background image for dark color theme */
    --custom-background-image-dialog: url("/widgets/background-dark-dialog.png");
}

Code snippets can be set in Siyuan Settings > Appearance > Code Snippet > CSS.

START

AUTO INSTALL

The theme has been put on the shelves at SiYuan community bazaar and can be installed directly in the Bazaar.

MANUAL INSTALL

Download the release package in Releases, unzip it and place it in the <workspace>/conf/appearance/themes/ directory of SiYuan Note.

REFERENCE & THANKS

Author Project License
Achuan-2 Achuan-2/siyuan-themes-tsundoku-dark: a editor theme for siyuan note GPL-3.0 license
roeseth roeseth/Siyuan-Golden-Topaz-Refined: A ported Golen Topaz theme for Siyuan note with tweaks Unknown
Morganwan90 Morganwan90/Lightblue-siyuan-theme Unknown
Crowds21 Crowds21/Cliff-Light Unknown
Zhangwuji 希望能够增加根据大纲生成思维导图的功能 Unknown
Morganwan90 Morganwan90/Darkblue-siyuan-theme Unknown
leolee9086 leolee9086/cc-baselib Unknown
UserZYF UserZYF/zhang-light Unknown
langzhou langzhou/siyuan-note Unknown
royc01 royc01/notion-theme Unknown
shawroger 思源笔记渲染 SQL 文档路径代码 - 链滴 Unknown

ps: Sort in no particular order.

DEPENDENCIES

Author Project License
Microsoft microsoft/monaco-editor MIT License
eligrey eligrey/FileSaver.js MIT License

ps: Sort by introduction time.

CHANGE LOGS

CHANGELOG

SUPPORT & DONATE

ko-fi:zuoqiu