這是我在"免費資源網路社群"網站的一篇文章看到的簡便工具,基本上Darkmode.js 是一套開源專案,由該網站"https://darkmodejs.learn.uno/"所提供,他製作了一段Javascript 讓網頁開發者可以直接套入網頁中產生背景黑白切換的功能,其功能就如同Darkmode.js網頁所示的模樣:

 

 

如上圖只要在黑色圈圈點一下,就可以把網頁背景反轉成黑色

當背景轉成黑色,那只要再點一下變成白色的圓球就可以再轉回白色背景了。

 

  那要如何才能夠讓自己的網頁也有相同效果呢??Darkmode.Js已經幫你想好解決方案了,一種是比較直覺的用<Script> tag直接嵌入網頁,另一種是使用NPM的方式引入package然後像Node.JS開發一樣用下面的code來實現:

  但我並沒有實驗NPM的方法,我用比較簡單的在自己寫的測試的網頁中的<Body>加入底下Script來實現功能:

 

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>

<script>

          new Darkmode().showWidget();

</script>

 

以下是實測結果:

附上實驗的網頁HTML Code:

<!DOCTYPE html>

<html>

    <head>

      <title> Formatting in HTML </title>

    </head>

    <body>

        <!-- Comments help aspiring newbies  -->

        <p> <strong> Strong Font </strong> </p>

        <p> <i>Italics make text inclined </i> </p>

        <hr>

        <code>Coding: Conditions and Loops: variables x and yif x=5, then y= 7; else z=13 </code>

        <hr>

        <br>

        <p>

            <!-- <em> is used to describe something significant. -->

            <em>The Packt Initiative </em>

            <br>

        </p>

        <br>

        <p><b> Packt: Always finding a way </b> </p>

        <p>Life has its <sup> Ups </sup> and <sub> Downs </sub> </p>

        Stay Cool

        <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>

        <script>

          new Darkmode().showWidget();

        </script>

    </body>

</html>

 

 

[Reference]

 

  1. 免費資源網路社群 - https://free.com.tw/darkmode-js/#more-73971
  2. Darkmode.js - https://darkmodejs.learn.uno/

 

文章標籤

創作者介紹
創作者 jackterrylau 的頭像
jackterrylau

儒道哲學的浪漫人生

jackterrylau 發表在 痞客邦 留言(0) 人氣()