feat: add theme url parameter.

2026-01-10 15:28:47 +08:00 · 2022-09-03 15:07:58 +08:00
parent ba0b158a47
commit 6a2279d7b2
6 changed files with 47 additions and 35 deletions
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@
 - [x] 支持明暗两种主题预览。
 - [ ] 支持色盘取色，快速替换文章整体色调
 - [ ] 支持 URL 参数加载 Markdown 内容。
- [ ] 支持 URL 参数选择编辑器和预览主题。
+- [x] 支持 URL 参数选择预览主题。

 ### 支持代码块样式

@@ -102,20 +102,20 @@ Inline Code `{code: 0}`

 ## 主题定制

-在目录 `src/themes` 中存放默认主题，主题使用 css 定义样式，不支持复杂的选择器。提供在线主题编辑器，欢迎修改并 PR 进仓库供大家使用。
+在目录 `src/themes` 中存放默认主题，在 `src/store/context.tsx` 中配置主题，主题使用 css 定义样式，不支持复杂的选择器。提供在线主题编辑器，欢迎修改并 PR 进仓库供大家使用。

 ```css
 /* 1~6 标题样式定义 */
 h1 {} h2 {} h3 {} h4 {} h5 {} h6 {}
 a { color: red; } /* 超链接样式定义 */
+strong {} /* 加粗样式定义 */
 del {} /* 删除线样式定义 */
 em {}  /* 下划线样式定义 */
-strong {} /* 加粗样式定义 */
-u {}    /* 下划线样式定义 */
-p {}    /* 段落样式定义 */
-ul {}   /* 无序列表样式定义 */
-ol {}   /* 有序列表样式定义 */
-li {}   /* 列表条目样式定义 */
+u {}   /* 下划线样式定义 */
+p {}   /* 段落样式定义 */
+ul {}  /* 无序列表样式定义 */
+ol {}  /* 有序列表样式定义 */
+li {}  /* 列表条目样式定义 */
 blockquote {} /* 块级引用样式定义 */
 table {}
 td {}
--- a/src/store/context.tsx
+++ b/src/store/context.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { defaultTheme } from '@uiw/react-markdown-editor';
 import { abcdef } from '@uiw/codemirror-theme-abcdef';
 import { androidstudio } from '@uiw/codemirror-theme-androidstudio';
@@ -136,11 +137,19 @@ export const Context = React.createContext<CreateContext>({
 });

 export const Provider: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const paramPreviewTheme = searchParams.get('theme') as PreviewThemeValue;
+  const initPreviewTheme = paramPreviewTheme || 'underscore';
  const [markdown, setMarkdown] = React.useState<string>(data.source);
-  const [css, setCss] = React.useState<string>(previewThemes['underscore'].value);
-  const [previewTheme, setPreviewTheme] = React.useState<PreviewThemeValue>('underscore');
+  const [css, setCss] = React.useState<string>(previewThemes[initPreviewTheme].value);
+  const [previewTheme, setPreviewTheme] = React.useState<PreviewThemeValue>(initPreviewTheme);
  const [theme, setTheme] = React.useState<ThemeValue>('default');
-
+  useEffect(() => {
+    if (paramPreviewTheme !== previewTheme) {
+      searchParams.set('theme', previewTheme);
+      setSearchParams(searchParams);
+    }
+  }, [paramPreviewTheme, previewTheme, searchParams, setSearchParams]);
  return (
    <Context.Provider
      value={{
--- a/src/themes/base.md.css
+++ b/src/themes/base.md.css
@@ -32,6 +32,7 @@ h4 {

 p {
  color: initial;
+  font-size: 0.85em;
 }

 ul {
@@ -44,12 +45,13 @@ ol {

 li {
  margin: 0;
+  font-size: 0.85em;
 }

 blockquote {
  font-style: normal;
  border-left: none;
-  margin: 1rem 0;
+  margin: 1em 0;
 }

 pre {
@@ -58,7 +60,7 @@ pre {
  padding: 1em;
  color: rgb(51, 51, 51);
  background: rgb(248, 248, 248);
-  font-size: 14px;
+  font-size: 0.85em;
  font-weight: 400;
  letter-spacing: normal;
  word-spacing: 0px;
@@ -71,7 +73,7 @@ table {
  width: 100% !important;
  border-collapse: collapse;
  line-height: 1.35;
-  font-size: 90%;
+  font-size: 0.85em;
 }

 td {
@@ -88,7 +90,7 @@ th {
 .code-highlight {
  text-align: left;
  font-family: Menlo, 'Operator Mono', Consolas, Monaco, monospace;
-  font-size: 14px;
+  font-size: 0.85em;
  margin: 0px;
  white-space: nowrap;
 }
@@ -103,23 +105,24 @@ th {
  line-height: 1;
  white-space: pre;
  background: rgba(27, 31, 35, 0.05);
-  padding: 0.2rem 0.3rem;
-  border-radius: 4px;
+  padding: 0.2em 0.6em;
+  border-radius: 0.6em;
  font-weight: bold;
+  font-size: 0.45em;
 }

 .footnotes-title {
  display: table;
  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
-  font-size: 1rem;
+  font-size: 1em;
  font-weight: bold;
  margin: 3rem 0 0.6rem 0;
  padding-left: 0.2rem;
 }

 .footnotes-list {
-  font-size: 12px;
+  font-size: 0.75em;
  font-style: italic;
  line-height: 1.2;
  margin: 0.4rem 0;
--- a/src/themes/default.md.css
+++ b/src/themes/default.md.css
@@ -102,7 +102,7 @@ pre {
  line-height: 1.5;
  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
-  border-radius: 5px;
+  border-radius: 0.3em;
  margin: 0.9rem 0;
  white-space: pre;
 }
@@ -145,10 +145,10 @@ th {
  white-space: pre;
  color: #009874;
  background: rgba(27, 31, 35, 0.05);
-  padding: 0.2em 0.3em;
-  border-radius: 4px;
+  padding: 0.2em 0.6em;
+  border-radius: 0.6em;
  font-weight: bold;
-  font-size: 0.85em;
+  font-size: 0.45em;
 }

 .footnotes-title {
@@ -162,7 +162,7 @@ th {
 }

 .footnotes-list {
-  font-size: 12px;
+  font-size: 0.75em;
  font-style: italic;
  line-height: 1.2;
  margin: 0.4rem 0;
--- a/src/themes/simple.md.css
+++ b/src/themes/simple.md.css
@@ -102,7 +102,7 @@ pre {
  line-height: 1.5;
  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
-  border-radius: 5px;
+  border-radius: 0.3em;
  margin: 0.9rem 0;
  white-space: pre;
 }
@@ -145,10 +145,10 @@ th {
  white-space: pre;
  color: #0f4c81;
  background: rgba(27, 31, 35, 0.05);
-  padding: 0.2rem 0.3rem;
-  border-radius: 4px;
+  padding: 0.2em 0.6em;
+  border-radius: 0.6em;
  font-weight: bold;
-  font-size: 0.85em;
+  font-size: 0.45em;
 }

 .footnotes-title {
@@ -162,7 +162,7 @@ th {
 }

 .footnotes-list {
-  font-size: 12px;
+  font-size: 0.75em;
  font-style: italic;
  line-height: 1.2;
  margin: 0.4rem 0;
--- a/src/themes/underscore.md.css
+++ b/src/themes/underscore.md.css
@@ -99,7 +99,7 @@ pre {
  line-height: 1.5;
  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
-  border-radius: 5px;
+  border-radius: 0.3em;
  margin: 0.9rem 0;
  white-space: pre;
 }
@@ -142,10 +142,10 @@ th {
  white-space: pre;
  color: #ffb11b;
  background: rgba(27, 31, 35, 0.05);
-  padding: 0.2em 0.3em;
-  border-radius: 4px;
+  padding: 0.2em 0.6em;
+  border-radius: 0.6em;
  font-weight: bold;
-  font-size: 0.85em;
+  font-size: 0.45em;
 }

 .footnotes-title {
@@ -159,7 +159,7 @@ th {
 }

 .footnotes-list {
-  font-size: 12px;
+  font-size: 0.75em;
  font-style: italic;
  line-height: 1.2;
  margin: 0.4rem 0;