website: add dark theme.

jaywcjlove · Apr 3, 2022 · 0802e96 · 0802e96
1 parent 2c3e9f0
commit 0802e96
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 93 deletions.
diff --git a/build/build.mjs b/build/build.mjs
@@ -24,7 +24,9 @@ const contributorsPath = path.resolve(process.cwd(), 'CONTRIBUTORS.svg');
  await FS.ensureDir(path.resolve(deployDir, 'c'));
  await FS.copySync(faviconPath, path.resolve(deployDir, 'img', 'favicon.ico'));
 
- await FS.copyFile(path.resolve(process.cwd(), 'template', 'js', 'copy-to-clipboard.js'), path.resolve(deployDir, 'js', 'copy-to-clipboard.js'))
+ await FS.copyFile(path.resolve(process.cwd(), 'template', 'js', 'copy-to-clipboard.js'), path.resolve(deployDir, 'js', 'copy-to-clipboard.js'));
+ await FS.copyFile(path.resolve(process.cwd(), 'node_modules/@wcj/dark-mode/main.js'), path.resolve(deployDir, 'js', 'dark-mode.min.js'));
+ await FS.copyFile(path.resolve(process.cwd(), 'node_modules/@uiw/github-corners/lib/index.js'), path.resolve(deployDir, 'js', 'github-corners.js'));
 
  const jsData = await FS.readFileSync(rootIndexJSPath);
  await FS.outputFile(path.resolve(deployDir, 'js', 'index.js'), UglifyJS.minify(jsData.toString()).code)
@@ -214,7 +216,7 @@ const contributorsPath = path.resolve(process.cwd(), 'CONTRIBUTORS.svg');
 }
 
 function markdownToHTML(str) {
- return create({ markdown: str, document: undefined });
+ return create({ markdown: str, document: undefined, 'dark-mode': false });
 }
 
 /**
@@ -226,13 +228,12 @@ function markdownToHTML(str) {
  return new Promise((resolve, reject) => {
  try {
  const stylStr = FS.readFileSync(stylPath, 'utf8');
- const stylMD = FS.readFileSync(path.resolve('node_modules/markdown-to-html-cli/github.css'), 'utf8');
  stylus(stylStr.toString())
  .set('filename', stylPath)
  .set('compress', true)
  .render((err, css) => {
  if (err) throw err;
- resolve(`${stylMD.replace(/\n/, '')}\n${css}`);
+ resolve(`${css}`);
  });
  } catch (err) {
  reject(err);

diff --git a/package.json b/package.json
@@ -25,11 +25,13 @@
  "url": "git+https://github.com/jaywcjlove/linux-command.git"
  },
  "devDependencies": {
+ "@uiw/github-corners": "~1.5.11",
+ "@wcj/dark-mode": "~1.0.14",
  "archiver": "~5.3.0",
  "colors-cli": "~1.0.28",
  "ejs": "~3.1.6",
  "fs-extra": "~10.0.1",
- "markdown-to-html-cli": "~3.2.5",
+ "markdown-to-html-cli": "~3.4.1",
  "sitemap-generator": "~8.5.1",
  "sqlite3": "~5.0.2",
  "stylus": "~0.56.0",

diff --git a/template/contributors.ejs b/template/contributors.ejs
@@ -4,7 +4,7 @@
  <h1>Contributors</h1>
  <div><%-describe.contributors ? describe.contributors : '' %></div>
  <p>
- 数据来源于 <a href="https://github.com/jaywcjlove/linux-command/graphs/contributors">GitHub Contributors</a>，使用<a href="https://github.com/jaywcjlove/github-action-contributors">github-action-contributors</a>创建。
+ 数据来源于 <a href="https://github.com/jaywcjlove/linux-command/graphs/contributors">GitHub Contributors</a>，使用<a href="https://github.com/jaywcjlove/github-action-contributors">action-contributors</a>创建。
  </p>
 </div>
 <%- include('widget/footer',{type: "list"}); %>

diff --git a/template/list.ejs b/template/list.ejs
@@ -1,6 +1,5 @@
 <%- include('partial/header'); %>
 <%- include('widget/search',{type: "list"}); %>
-
 <div class="search_list">
  <ul id="search_list_result">
  <!-- <li>

diff --git a/template/partial/header.ejs b/template/partial/header.ejs
@@ -10,5 +10,8 @@
  <title><%=describe.n?describe.n+'':''%> 命令，Linux <%=describe.n?describe.n+'':''%> 命令详解：<%=describe.d?describe.d+' - ':''%> Linux 命令搜索引擎</title>
  <link rel="shortcut icon" href="<%=relative_path%>img/favicon.ico">
  <link rel="stylesheet" type="text/css" href="<%=relative_path%>css/index.css?v=<%=new Date().getTime()%>">
+ <script type="module" src="<%=relative_path%>js/dark-mode.min.js"></script>
+ <script type="module" src="<%=relative_path%>js/github-corners.js"></script>
 </head>
-<body>
+<body>
+<dark-mode permanent dark="Dark" light="Light" style="position: fixed;left: 10px;top: 8px; z-index: 999;"></dark-mode>
diff --git a/template/styl/index.styl b/template/styl/index.styl
@@ -1,43 +1,19 @@
 @import('mixins/reset.styl')
-@import('mixins/css.styl')
 @import('mixins/markdown.styl')
 
 mq-mobile = "screen and (max-width: 479px)"
 
-a.github-corner { 
- position: fixed
- z-index: 9999
- top: 0
- right: 0
- &:hover {
- .octo-arm{
- animation: octocat-wave 560ms ease-in-out
- }
- }
- svg {
- fill #f1f1f1
- color #000
- position absolute
- top 0
- border 0
- right 0
- z-index 99
- width 70px
- height 70px
- @media mq-mobile {
- width 46px
- height 46px
- }
- }
+[data-color-mode*='dark'], [data-color-mode*='dark'] body {
+ color-scheme: dark;
+ --color-header-bg: #3a3a3a8f;
+ --color-header-border: #323232;
+ --color-hover: #ffffff30;
 }
-a {
- transition: all .2s ease-in
-}
-
-@keyframes octocat-wave{
- 0%,100%{-webkit-transform:rotate(0);transform:rotate(0)}
- 20%,60%{-webkit-transform:rotate(-25deg);transform:rotate(-25deg)}
- 40%,80%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}
+[data-color-mode*='light'], [data-color-mode*='light'] body {
+ color-scheme: light;
+ --color-header-bg: #ffffff52;
+ --color-header-border: #d3d3d3;
+ --color-hover: #f2f2f2;
 }
 
 .warpper {
@@ -56,6 +32,7 @@ a {
  padding 0 10px
  .logo a {
  display flex
+ color: currentColor;
  }
  .box {
  position relative
@@ -77,9 +54,9 @@ a {
  position absolute
  display none
  z-index 999
- box-shadow 1px 1px 3px #ededed
- border 1px solid #d5d5d5
- background #fff
+ box-shadow 1px 1px 3px var(--color-theme-bg)
+ border 1px solid var(--color-header-border)
+ background var(--color-theme-bg)
  min-width 100px
  top 39px
  width 100%
@@ -95,9 +72,8 @@ a {
  a {
  display block
  padding 2px 6px 2px 6px
- color #555555
  &:hover {
- background-color #f2f2f2
+ background-color var(--color-hover)
  }
  .kw {
  color #f00
@@ -120,8 +96,7 @@ a {
  font-size 14px
  font-weight bold
  line-height 1.42857143
- color #555
- background-color #fff
+ background-color: transparent;
  background-image none
  border 1px solid $border-color
  border-radius 5px 0 0 5px
@@ -153,12 +128,10 @@ a {
  cursor pointer
  user-select none
  background-image none
- background-color #fff
  border 1px solid transparent
  border-collapse separate
  border-radius 0 5px 5px 0
  border-color $border-color
- color #333
  &:focus,&:active:focus {
  outline thin dotted
  outline 5px auto -webkit-focus-ring-color
@@ -190,10 +163,9 @@ a {
 .footer {
  text-align center
  padding-top 31px
- color #616161
  font-size 14px
  font-weight 300
- border-top 1px solid #efefef
+ border-top 1px solid var(--color-header-border)
  padding-bottom 50px;
  padding 31px 6px 50px 6px
  &.home {
@@ -221,15 +193,15 @@ a {
  width auto
  position fixed
  width 100%
- background #fff
+ background var(--color-theme-bg)
  backdrop-filter saturate(180%) blur(0.4rem)
- background-color hsla(0, 0%, 100%, .55)
+ background-color var(--color-header-bg)
  z-index 99
 }
 
 .header_list {
  padding 10px 10px 10px 13px 
- border-bottom 1px solid #EEEEEE
+ border-bottom 1px solid var(--color-header-border)
  .logo {
  padding-right 24px
  text-align left
@@ -303,8 +275,6 @@ a {
 .contributors {
  padding 79px 27px
  max-width: 960px;
- color: #24292f;
- background-color: #ffffff;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  font-size: 16px;
  line-height: 1.5;

diff --git a/template/styl/mixins/css.styl b/template/styl/mixins/css.styl
diff --git a/template/styl/mixins/markdown.styl b/template/styl/mixins/markdown.styl
@@ -15,7 +15,6 @@ mq-mobile = "screen and (max-width: 479px)"
  height 13px
  vertical-align middle
  width 1px
- border-left 1px solid #dfdfdf
  margin -1px 0 0 0
  }
  a {
@@ -38,6 +37,7 @@ mq-mobile = "screen and (max-width: 479px)"
 }
 
 .markdown-body {
+ margin: 0 auto 0 auto;
  margin-top: 0 !important;
  padding 90px 35px 30px 35px
  max-width 980px

diff --git a/template/styl/mixins/reset.styl b/template/styl/mixins/reset.styl
@@ -11,12 +11,9 @@ html {
 }
 a {
  text-decoration none
- &:hover {
- color #333
- }
 }
 * {
  box-sizing border-box
 }
 
-$border-color = #D5D5D5
+$border-color = #8f8f8f7a
diff --git a/template/widget/search.ejs b/template/widget/search.ejs