💄 add light theme

Author: ridaeh

README.md

@@ -1,30 +1,43 @@
 
 <div align="center">
  <h1> Terminull </h1>
- <p>Terminull is a <a href="https://www.npmjs.com/package/gitbook">gitbook</a> plugin allows you to create a modern terminal for your gitbook pages in order to documente your commands and it gives you a fast way to copy the command .</p>
-  <br>
-  <br>
-	<a href="https://www.npmjs.com/package/gitbook-plugin-terminull"><img  src="https://img.shields.io/npm/v/gitbook-plugin-terminull/latest?color=green" alt="npm version"></a>
-  <br>
-  <br>
-  <img src="https://raw.githubusercontent.com/ridaeh/gitbook-plugin-terminull/master/preview.png">
+ <p>Terminull is a <a href="https://www.npmjs.com/package/gitbook">gitbook</a> plugin allows you to create a modern terminal for your gitbook pages it helps documente your commands and gives you a fast way to copy the command .</p>
+ </div>
+<a href="https://www.npmjs.com/package/gitbook-plugin-terminull"><img  src="https://img.shields.io/npm/v/gitbook-plugin-terminull/latest?color=green" alt="npm version"/></a>
+
+ ## Themes:
+ ### Dark theme
+
+ <div align="center">
+  <img src="https://raw.githubusercontent.com/ridaeh/gitbook-plugin-terminull/master/dark_theme_preview.png"/>
+</div>
+
+### Light theme
+<div align="center">
+  <img src="https://raw.githubusercontent.com/ridaeh/gitbook-plugin-terminull/master/light_theme_preview.png"/>
 </div>
 
 ## How to use it?
 To use Terminull plugin in your Gitbook project, add the terminull plugin to the `book.json` file of your project, then install plugins using `gitbook install`.
 
 ```json
 {
-    "plugins": ["terminull"]
+  "plugins": ["terminull"],
+  "pluginsConfig": {
+    "terminull": {
+      "theme": "dark", // use "light" for light theme
+      "copy_button": "enabled" // "disabled" to hide the copy button
+    }
+  }
 }
 ```
 
 ## Create you terminal
 
-To create a terminal you can use one of this options:
+To create a terminal you can use one of two options:
  - Code markdown with `term` as language :
 <pre ><code>```<strong style="color:green">term</strong>
-gitbook-plugin-terminull$ echo 'hello terminull' # This will print hello terminull
+terminull$ echo 'hello terminull' # This will print hello terminull
 hello terminull
 ```
 </code></pre>
@@ -34,6 +47,7 @@ e.g :
 echo 'hello terminull' 
 ```
 </code></pre>
+
  - Gitbook term tag
 
 Each terminal should have a directory where command is excuted, command and output of the command.

assets/terminull.css

@@ -1,23 +1,36 @@
+:root {
+  --terminull-background-color: #282d39;
+  --terminull-color: white;
+}
+
+[data-theme="light"] {
+  --terminull-background-color:#fdf6e4;
+  --terminull-color: #282d39;
+}
+
 .terminull {
-  background-color: #282d39;
+  background-color: var(--terminull-background-color);
   border-radius: 5px;
+  font-family: "Ubuntu Mono", Consolas, Menlo, Courier, monospace;
+  font-size: 1em;
 }
 
 .terminullMenu {
   box-sizing: border-box;
-  height: 25px;
+  height: 20px;
   margin: 0 auto;
+  padding-left: 10px;
   border-top-right-radius: 5px;
   border-top-left-radius: 5px;
 }
 
 .terminullScreen {
   box-sizing: border-box;
   margin: 0 auto;
-  padding: 20px;
+  padding: 10px;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
-  color: white;
+  color: var(--terminull-color);
   text-align: left;
   font-family: monospace;
   white-space: nowrap;
@@ -30,13 +43,13 @@
 }
 
 .terminullButtons {
-  height: 10px;
-  width: 10px;
+  height: 8px;
+  width: 8px;
   border-radius: 50%;
   border: 1px solid #000;
   position: relative;
-  top: 6px;
-  left: 6px;
+  top: 5px;
+  left: 5px;
   background-color: #ff3b47;
   border-color: #9d252b;
   display: inline-block;

dark_theme_preview.png

@@ -5,6 +5,7 @@ const kramed = require('./src/kramed');
 function processBlock(rootBlock) {
   var terminulls = [];
   var term = {};
+  var options = this.options.pluginsConfig["terminull"];
   rootBlock.blocks.forEach(_blk => {
     if (term[_blk.name]) {
       terminulls.push(term);
@@ -16,7 +17,7 @@ function processBlock(rootBlock) {
   return new Promise(function(resolve, reject) {
     ejs.renderFile(
       path.join(__dirname, './src/terminull.html.ejs'),
-      { terminulls: terminulls },
+      { terminulls: terminulls ,options: options },
       function(err, str) {
         if (err) {
           throw err;

index.js

@@ -1,18 +1,20 @@
-<div class="terminull">
-    <div class="terminullMenu">
-      <div class="terminullButtons terminullClose"></div>
-      <div class="terminullButtons terminullMinimize"></div>
-      <div class="terminullButtons terminullZoom"></div>
-    </div>
-    <div class="terminullScreen">
-        <% terminulls.forEach(function(terminull){ %>
-          <span class="terminullDirectory">~/<%= terminull.directory %></span>$ 
-          <span class="terminullCommand"><%= terminull.command%></span>
-          <% if (terminull.comment) { %> 
-            <span class="terminullComment"># <%= terminull.comment%></span>
-          <% } %>
-          <i class="fa fa-clone t-copy terminullCopyBtn" onclick="copyCommandTerminull(`<%= terminull.command%>`)"></i>
-          <span class="terminullOutput"><%= terminull.output%></span>
-        <% }); %>
-    </div>
+<div class="terminull" data-theme="<%= options.theme %>" >
+  <div class="terminullMenu">
+    <div class="terminullButtons terminullClose"></div>
+    <div class="terminullButtons terminullMinimize"></div>
+    <div class="terminullButtons terminullZoom"></div>
+  </div>
+  <div class="terminullScreen">
+      <% terminulls.forEach(function(terminull){ %>
+        <span class="terminullDirectory">~/<%= terminull.directory %></span>$ 
+        <span class="terminullCommand"><%= terminull.command%></span>
+        <% if (terminull.comment) { %> 
+          <span class="terminullComment"># <%= terminull.comment%></span>
+        <% } %>
+        <% if(options.copy_button && options.copy_button !== 'disabled'){ %> 
+          <i class="fa fa-clone t-copy terminullCopyBtn" onclick="copyCommandTerminull(`<%= terminull.command%>`)"></i> 
+        <% } %>
+        <span class="terminullOutput"><%= terminull.output%></span>
+      <% }); %>
+  </div>
 </div>