Added more darkthemes

main.go

@@ -60,7 +60,7 @@ var enableAutoUpdate = flag.Bool("cfgupgrade", true, "Enable auto config upgrade
 
 var (
 	name        = "Zoraxy"
-	version     = "3.1.3"
+	version     = "3.1.4"
 	nodeUUID    = "generic" //System uuid, in uuidv4 format
 	development = true      //Set this to false to use embedded web fs
 	bootTime    = time.Now().Unix()

web/darktheme.css

@@ -5,6 +5,57 @@
     This will override the default CSS (white theme) for semantic UI
 */
 
+/* Color Pallete */
+/* Theme Color Definition */
+body:not(.darkTheme){
+    --theme_bg: #f6f6f6;
+    --theme_bg_primary: #ffffff;
+    --theme_bg_secondary: #ffffff;
+    --theme_bg_active: #ececec;
+    --theme_highlight: #a9d1f3;
+    --theme_bg_inverted: #27292d;
+    --theme_advance: #f7f7f7;
+    --item_color: #5e5d5d;
+    --item_color_select: rgba(0,0,0,.87);
+    --text_color: #414141;
+    --input_color: white;
+    --divider_color: #cacaca;
+    --text_color_inverted: #fcfcfc;
+    --button_text_color: #878787;
+    --button_border_color: #dedede;
+
+    --theme_background: linear-gradient(60deg, rgb(84, 58, 183) 0%, rgb(0, 172, 193) 100%);
+    --theme_background_inverted: linear-gradient(215deg, rgba(38,60,71,1) 13%, rgba(2,3,42,1) 84%);
+    --theme_green: linear-gradient(270deg, #27e7ff, #00ca52);
+    --theme_red: linear-gradient(203deg, rgba(250,172,38,1) 17%, rgba(202,0,37,1) 78%);
+}
+
+body.darkTheme{
+    --theme_bg: #000000;
+    --theme_bg_primary: #060912;
+    --theme_bg_secondary:#172a41;
+    --theme_highlight: #4380b0;
+    --theme_bg_active: #020101;
+    --theme_bg_inverted: #f8f8f9;
+    --theme_advance: #000000;
+    --item_color: #cacaca;
+    --text_color: #dee1e4;
+    --text_color_secondary: #b5c0c7;
+    --input_color: black;
+    --divider_color: #282828;
+    --item_color_select: rgba(255, 255, 255, 0.87);
+    --text_color_inverted: #414141;
+    --button_text_color: #e9e9e9;
+    --button_border_color: #646464;
+
+    --theme_background: linear-gradient(214deg, rgba(3,1,70,1) 17%, rgb(1, 55, 80) 78%);
+    --theme_background_inverted: linear-gradient(215deg, rgba(38,60,71,1) 13%, rgba(2,3,42,1) 84%);
+    --theme_green: linear-gradient(214deg, rgba(25,128,94,1) 17%, rgba(62,76,111,1) 78%);
+    --theme_red: linear-gradient(203deg, rgba(250,172,38,1) 17%, rgba(202,0,37,1) 78%);
+}
+
+/* General Rules Overwrite */
+
 body.darkTheme {
     background-color: var(--theme_bg);
     color: var(--text_color);
@@ -128,6 +179,20 @@ body.darkTheme .ui.toggle.checkbox input ~ label:focus {
     color: var(--text_color_secondary) !important;
 }
 
+body.darkTheme textarea {
+    background-color: var(--theme_bg_active) !important;
+    color: var(--text_color) !important;
+    border: 1px solid var(--button_border_color) !important;
+}
+
+body.darkTheme textarea::placeholder {
+    color: var(--text_color_secondary) !important;
+    opacity: 0.7;
+}
+
+body.darkTheme textarea:focus {
+    border-color: var(--theme_highlight) !important;
+}
 
 body.darkTheme .ui.toggle.checkbox input ~ label::before{
     background-color: var(--theme_bg_secondary) !important;
@@ -140,13 +205,73 @@ body.darkTheme .ui.toggle.checkbox input:checked ~ label::before{
     border: 1px solid var(--button_border_color) !important;
 }
 
+/* Generic dropdown overwrites */
+body.darkTheme .ui.selection.dropdown {
+    background-color: var(--theme_bg) !important;
+    color: var(--text_color) !important;
+    border-color: transparent !important;
+}
+
+body.darkTheme .ui.selection.dropdown .menu {
+    background-color: var(--theme_bg) !important;
+    color: var(--text_color) !important;
+}
+
+body.darkTheme .ui.selection.dropdown .menu .item {
+    color: var(--text_color) !important;
+}
+
+body.darkTheme .ui.selection.dropdown .menu .item:hover {
+    background-color: var(--theme_bg_primary) !important;
+    color: var(--text_color) !important;
+}
+
+body.darkTheme .ui.selection.dropdown .menu .item.active.selected {
+    background-color: var(--theme_highlight) !important;
+    color: var(--text_color) !important;
+}
+
+body.darkTheme .ui.selection.dropdown .default.text {
+    color: var(--text_color) !important;
+}
+
+body.darkTheme .ui.selection.dropdown .dropdown.icon {
+    color: var(--text_color) !important;
+}
+
+/* Secondary menu override */
+body.darkTheme .ui.pointing.secondary.menu {
+    background-color: var(--theme_bg) !important;
+    color: var(--text_color) !important;
+    border-bottom: 1px solid var(--divider_color) !important;
+}
+
+body.darkTheme .ui.pointing.secondary.menu .item {
+    color: var(--text_color) !important;
+}
+
+body.darkTheme .ui.pointing.secondary.menu .item:hover {
+    color: var(--item_color) !important;
+}
+
+body.darkTheme .ui.pointing.secondary.menu .item.active {
+    background-color: var(--theme_bg_secondary) !important;
+    color: var(--text_color) !important;
+    border-bottom: 1px solid var(--divider_color) !important;
+}
+
+body.darkTheme .ui.pointing.secondary.menu .item.narrowpadding {
+    border-top-left-radius: 0.4em;
+    border-top-right-radius: 0.4em;
+}
+
+/* Tool bar overvrite */
 .toolbar{
     background-color: var(--theme_bg) !important;
     color: var(--text_color) !important;
-    border: 1px solid var(--divider_color) !important;
-}s
+}
 
-body.darkTheme .ui.segment:not(.basic) {
+body.darkTheme .ui.segment:not(.basic):not(.tab) {
     background-color: var(--theme_bg) !important;
     color: var(--text_color) !important;
     border: 1px solid transparent !important;
@@ -200,6 +325,105 @@ body.darkTheme .ui.form .grouped.fields label {
     color: var(--text_color) !important;
 }
 
+/* Confirm Box */
+
+body.darkTheme .confirmBoxBody {
+    background-color: var(--theme_bg) !important;
+    color: var(--text_color) !important;
+    border: 1px solid var(--divider_color) !important;
+}
+
+body.darkTheme .confirmBoxBody .ui.button {
+    color: var(--button_color) !important;
+    border: 1px solid var(--button_border_color) !important;
+}
+
+body.darkTheme .confirmBoxBody .ui.button:hover {
+    background-color: var(--button_hover_bg) !important;
+    color: var(--button_hover_color) !important;
+    border: 1px solid var(--button_border_color) !important;
+}
+
+body.darkTheme .confirmBoxBody .ui.red.button {
+    color: var(--button_red_color) !important;
+    border: 1px solid var(--button_red_border_color) !important;
+}
+
+body.darkTheme .confirmBoxBody .ui.red.button:hover {
+    background-color: #380a0a !important;
+    color: var(--button_red_hover_color) !important;
+}
+
+body.darkTheme .confirmBoxBody .ui.green.button {
+    color: var(--button_green_color) !important;
+    border: 1px solid var(--button_green_border_color) !important;
+}
+
+body.darkTheme .confirmBoxBody .ui.green.button:hover {
+    background-color: #0a380a !important;
+    color: var(--button_green_hover_color) !important;
+}
+
+body.darkTheme .confirmBoxBody .questionToConfirm {
+    color: var(--text_color) !important;
+}
+
+body.darkTheme #confirmBox .ui.top.attached.progress{
+    background-color: var(--theme_bg_secondary) !important;
+}
+
+body.darkTheme #confirmBox .ui.top.attached.progress .bar {
+    background-color: var(--theme_highlight) !important;
+}
+
+/* Tour Modal */
+
+body.darkTheme #tourModal {
+    background-color: var(--theme_bg) !important;
+    color: var(--text_color) !important;
+    border: 1px solid var(--divider_color) !important;
+}
+
+body.darkTheme #tourModal .tourStepTitle {
+    color: var(--text_color) !important;
+}
+
+body.darkTheme #tourModal .tourStepContent {
+    color: var(--text_color_secondary) !important;
+}
+
+body.darkTheme #tourModal .ui.divider {
+    border-color: var(--divider_color) !important;
+}
+
+body.darkTheme #tourModal .ui.button {
+    color: var(--button_color) !important;
+    border: 1px solid var(--button_border_color) !important;
+}
+
+body.darkTheme #tourModal .ui.button:hover {
+    background-color: var(--button_hover_bg) !important;
+    color: var(--button_hover_color) !important;
+    border: 1px solid var(--button_border_color) !important;
+}
+
+body.darkTheme #tourModal .ui.red.button:hover {
+    background-color: #380a0a !important;
+    color: var(--button_red_hover_color) !important;
+}
+
+body.darkTheme #tourModal .ui.circular.icon.button {
+    background-color: var(--theme_bg_primary) !important;
+    color: var(--button_color) !important;
+    border: 1px solid var(--button_border_color) !important;
+}
+
+body.darkTheme #tourModal .ui.circular.icon.button:hover {
+    background-color: var(--theme_bg_secondary) !important;
+    color: var(--button_hover_color) !important;
+    border: 1px solid var(--button_border_color) !important;
+}
+
 /*
     HTTP Proxy Table
 */
@@ -751,7 +975,7 @@ body.darkTheme #utm .standardContainer {
 
 body.darkTheme #utm .standardContainer .padding.statusDot {
     background-color: var(--theme_bg) !important;
-    border: 0.2px solid var(--theme_bg_primary) !important;
+    border: 0.2px solid var(--text_color_inverted) !important;
 }
 
 body.darkTheme .ui.utmloading.segment {
@@ -770,6 +994,67 @@ body.darkTheme .ui.utmloading.segment .ui.inverted.dimmer .ui.text.loader {
 }
 
 
+/*
+    Network Tool overlay
+*/
+
+body.darkTheme .ui.celled.unstackable.table:not(.basic) th{
+    background-color: var(--theme_bg_secondary) !important;
+    color: var(--text_color) !important;
+    border-color: var(--divider_color) !important;
+}
+
+body.darkTheme #networktool .ui.accordion .title {
+    color: var(--text_color) !important;
+}
+
+body.darkTheme #networktool .ui.accordion .title .dropdown.icon {
+    color: var(--icon_color) !important;
+}
+
+body.darkTheme #networktool .ui.accordion .title .menu {
+    background-color: var(--theme_bg) !important;
+    color: var(--text_color) !important;
+    border-color: var(--divider_color) !important;
+}
+
+body.darkTheme .ui.selection.fluid.dropdown#mdnsWoL {
+    background-color: var(--theme_bg) !important;
+    color: var(--text_color) !important;
+    border-color: var(--divider_color) !important;
+}
+
+body.darkTheme .ui.selection.fluid.dropdown#mdnsWoL .menu {
+    background-color: var(--theme_bg) !important;
+    color: var(--text_color) !important;
+}
+
+body.darkTheme .ui.selection.fluid.dropdown#mdnsWoL .menu .item {
+    color: var(--text_color) !important;
+}
+
+body.darkTheme .ui.selection.fluid.dropdown#mdnsWoL .menu .item:hover {
+    background-color: var(--theme_bg_secondary) !important;
+    color: var(--text_color) !important;
+}
+
+body.darkTheme .ui.selection.fluid.dropdown#mdnsWoL .menu .item.active.selected {
+    background-color: var(--theme_highlight) !important;
+    color: var(--text_color) !important;
+}
+
+body.darkTheme .ui.selection.visible.dropdown > .text:not(.default) {
+    color: var(--text_color) !important;
+}
+
+body.darkTheme .ui.selection.fluid.dropdown#mdnsWoL .default.text {
+    color: var(--text_color) !important;
+}
+
+body.darkTheme .ui.selection.fluid.dropdown#mdnsWoL .dropdown.icon {
+    color: var(--text_color) !important;
+}
+
 /* 
 
 Tool overlay css override
@@ -805,4 +1090,14 @@ body.darkTheme .picker-p .picker-m,
 body.darkTheme .picker-p .picker-y {
     background-color: var(--theme_bg) !important;
     color: var(--text_color) !important;
+}
+
+/* Statistics */
+
+body.darkTheme .statistic .value.totalViewCount {
+    color: var(--text_color) !important;
+}
+
+body.darkTheme .statistic .label {
+    color: var(--text_color_secondary) !important;
 }

web/index.html

@@ -272,8 +272,17 @@
             function toggleTheme(){
                 if ($("body").hasClass("darkTheme")){
                     setDarkTheme(false);
+                    //Check if the snippet iframe is opened. If yes, set the dark theme to the iframe
+                    if ($(".sideWrapper").is(":visible")){
+                        $(".sideWrapper iframe")[0].contentWindow.setDarkTheme(false);
+                    }
                 }else{
                     setDarkTheme(true);
+                    //Check if the snippet iframe is opened. If yes, set the dark theme to the iframe
+                    if ($(".sideWrapper").is(":visible")){
+                        $(".sideWrapper iframe")[0].contentWindow.setDarkTheme(true);
+                    }
+                    
                 }
             }
 

web/main.css

@@ -1,57 +1,8 @@
 /*
     index.html style overwrite
 */
-:root{
-  
-}
 
-/* Theme Color Definition */
-body:not(.darkTheme){
-    --theme_bg: #f6f6f6;
-    --theme_bg_primary: #ffffff;
-    --theme_bg_secondary: #ffffff;
-    --theme_bg_active: #ececec;
-    --theme_highlight: #a9d1f3;
-    --theme_bg_inverted: #27292d;
-    --theme_advance: #f7f7f7;
-    --item_color: #5e5d5d;
-    --item_color_select: rgba(0,0,0,.87);
-    --text_color: #414141;
-    --input_color: white;
-    --divider_color: #cacaca;
-    --text_color_inverted: #fcfcfc;
-    --button_text_color: #878787;
-    --button_border_color: #dedede;
-
-    --theme_background: linear-gradient(60deg, rgb(84, 58, 183) 0%, rgb(0, 172, 193) 100%);
-    --theme_background_inverted: linear-gradient(215deg, rgba(38,60,71,1) 13%, rgba(2,3,42,1) 84%);
-    --theme_green: linear-gradient(270deg, #27e7ff, #00ca52);
-    --theme_red: linear-gradient(203deg, rgba(250,172,38,1) 17%, rgba(202,0,37,1) 78%);
-}
-
-body.darkTheme{
-    --theme_bg: #000000;
-    --theme_bg_primary: #141414;
-    --theme_bg_secondary:#230046;
-    --theme_highlight: #743788;
-    --theme_bg_active: #020101;
-    --theme_bg_inverted: #f8f8f9;
-    --theme_advance: #000000;
-    --item_color: #cacaca;
-    --text_color: #dee1e4;
-    --text_color_secondary: #b5c0c7;
-    --input_color: black;
-    --divider_color: #282828;
-    --item_color_select: rgba(255, 255, 255, 0.87);
-    --text_color_inverted: #414141;
-    --button_text_color: #e9e9e9;
-    --button_border_color: #646464;
-
-    --theme_background: linear-gradient(214deg, rgba(3,1,70,1) 17%, rgba(60,1,80,1) 78%);
-    --theme_background_inverted: linear-gradient(215deg, rgba(38,60,71,1) 13%, rgba(2,3,42,1) 84%);
-    --theme_green: linear-gradient(214deg, rgba(25,128,94,1) 17%, rgba(62,76,111,1) 78%);
-    --theme_red: linear-gradient(203deg, rgba(250,172,38,1) 17%, rgba(202,0,37,1) 78%);
-}
+/* Theme color palletes are defined in darktheme.css */
 
 /* Theme Toggle CSS */
 #themeColorButton{

web/snippet/accessRuleEditor.html

@@ -14,69 +14,72 @@
             top: 0.4em;
             right: 1em;
         }
+
       </style>
   </head>
   <body>
-  <br>
-  <div class="ui container">
-    <div class="ui header">
-        <div class="content">
-            Access Rule Editor
-            <div class="sub header">Create, Edit or Remove Access Rules</div>
-        </div>
-    </div>
-    <div class="ui divider"></div>
-    <div class="ui top attached tabular menu">
-        <a class="active item" data-tab="new"><i class="ui green add icon"></i> New</a>
-        <a class="item" data-tab="edit"><i class="ui grey edit icon"></i> Edit</a>
-    </div>
-    <div class="ui bottom attached active tab segment" data-tab="new">
-        <p>Create a new Access Rule</p>
-        <form class="ui form" id="accessRuleForm">
-            <div class="field">
-                <label>Rule Name</label>
-                <input type="text" name="accessRuleName" placeholder="Rule Name" required>
-            </div>
-            <div class="field">
-                <label>Description</label>
-                <textarea name="description" placeholder="Description" required></textarea>
-            </div>
-            <button class="ui basic button" type="submit"><i class="ui green add icon"></i> Create</button>
-        </form>
+    <link rel="stylesheet" href="../darktheme.css">
+    <script src="../script/darktheme.js"></script>
     <br>
-    </div>
-    <div class="ui bottom attached tab segment" data-tab="edit">
-        <p>Select an Access Rule to edit</p>
-        <button id="refreshAccessRuleListBtn" class="ui circular basic icon button" onclick="reloadAccessRuleList()"><i class="ui green refresh icon"></i></button>
-        <div class="ui selection fluid dropdown" id="accessRuleSelector">
-            <input type="hidden" name="targetAccessRule" value="default">
-            <i class="dropdown icon"></i>
-            <div class="default text"></div>
-            <div class="menu" id="accessRuleList">
-                <div class="item" data-value="default"><i class="ui yellow star icon"></i> Default</div>
+    <div class="ui container">
+        <div class="ui header">
+            <div class="content">
+                Access Rule Editor
+                <div class="sub header">Create, Edit or Remove Access Rules</div>
             </div>
         </div>
+        <div class="ui divider"></div>
+        <div class="ui top attached tabular menu">
+            <a class="active item" data-tab="new"><i class="ui green add icon"></i> New</a>
+            <a class="item" data-tab="edit"><i class="ui grey edit icon"></i> Edit</a>
+        </div>
+        <div class="ui bottom attached active tab segment" data-tab="new">
+            <p>Create a new Access Rule</p>
+            <form class="ui form" id="accessRuleForm">
+                <div class="field">
+                    <label>Rule Name</label>
+                    <input type="text" name="accessRuleName" placeholder="Rule Name" required>
+                </div>
+                <div class="field">
+                    <label>Description</label>
+                    <textarea name="description" placeholder="Description" required></textarea>
+                </div>
+                <button class="ui basic button" type="submit"><i class="ui green add icon"></i> Create</button>
+            </form>
         <br>
-        <form class="ui form" id="modifyRuleInfo">
-            <div class="disabled field">
-                <label>Rule ID</label>
-                <input type="text" name="accessRuleUUID">
-            </div>
-            <div class="field">
-                <label>Rule Name</label>
-                <input type="text" name="accessRuleName" placeholder="Rule Name" required>
-            </div>
-            <div class="field">
-                <label>Description</label>
-                <textarea name="description" placeholder="Description" required></textarea>
+        </div>
+        <div class="ui bottom attached tab segment" data-tab="edit">
+            <p>Select an Access Rule to edit</p>
+            <button id="refreshAccessRuleListBtn" class="ui circular basic icon button" onclick="reloadAccessRuleList()"><i class="ui green refresh icon"></i></button>
+            <div class="ui selection fluid dropdown" id="accessRuleSelector">
+                <input type="hidden" name="targetAccessRule" value="default">
+                <i class="dropdown icon"></i>
+                <div class="default text"></div>
+                <div class="menu" id="accessRuleList">
+                    <div class="item" data-value="default"><i class="ui yellow star icon"></i> Default</div>
+                </div>
             </div>
-            <button class="ui basic button" type="submit"><i class="ui green save icon"></i> Save Changes</button>
-            <button class="ui basic button" onclick="removeAccessRule(event);"><i class="ui red trash icon"></i> Remove Rule</button>
-        </form>
-    </div>
-    <br>
-    <button class="ui basic button"  style="float: right;" onclick="parent.hideSideWrapper();"><i class="remove icon"></i> Close</button>
-    <br><br><br>
+            <br>
+            <form class="ui form" id="modifyRuleInfo">
+                <div class="disabled field">
+                    <label>Rule ID</label>
+                    <input type="text" name="accessRuleUUID">
+                </div>
+                <div class="field">
+                    <label>Rule Name</label>
+                    <input type="text" name="accessRuleName" placeholder="Rule Name" required>
+                </div>
+                <div class="field">
+                    <label>Description</label>
+                    <textarea name="description" placeholder="Description" required></textarea>
+                </div>
+                <button class="ui basic button" type="submit"><i class="ui green save icon"></i> Save Changes</button>
+                <button class="ui basic button" onclick="removeAccessRule(event);"><i class="ui red trash icon"></i> Remove Rule</button>
+            </form>
+        </div>
+        <br>
+        <button class="ui basic button"  style="float: right;" onclick="parent.hideSideWrapper();"><i class="remove icon"></i> Close</button>
+        <br><br><br>
   </div>
 
   <script>

web/snippet/acme.html

@@ -25,6 +25,8 @@
       </style>
   </head>
   <body>
+    <link rel="stylesheet" href="../darktheme.css">
+    <script src="../script/darktheme.js"></script>
   <br>
   <div class="ui container">
     <div class="ui header">

web/snippet/advanceStatsOprs.html

@@ -10,6 +10,8 @@
         <script src="../script/utils.js"></script>
     </head>
     <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
         <br>
         <div class="ui container">
             <div class="ui header">

web/snippet/aliasEditor.html

@@ -10,6 +10,8 @@
         <script src="../script/utils.js"></script>
     </head>
     <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
         <br>
         <div class="ui container">
             <div class="ui header">

web/snippet/basicAuthEditor.html

@@ -10,6 +10,8 @@
         <script src="../script/utils.js"></script>
     </head>
     <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
         <br>
         <div class="ui container">
             <div class="ui header">

web/snippet/configTools.html

@@ -10,6 +10,8 @@
         <script src="../script/utils.js"></script>
     </head>
     <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
         <br>
         <div class="ui container">
             <div class="ui header">

web/snippet/customHeaders.html

@@ -23,9 +23,15 @@
             #permissionPolicyEditor .experimental{
                 background-color: rgb(241, 241, 241);
             }
+
+            body.darkTheme #permissionPolicyEditor .experimental{
+                background-color: rgb(41, 41, 41);
+            }
         </style>
     </head>
     <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
         <br>
         <div class="ui container">
             <div class="ui header">

web/snippet/dockerContainersList.html

@@ -8,6 +8,8 @@
     <script src="../script/semantic/semantic.min.js"></script>
   </head>
   <body>
+    <link rel="stylesheet" href="../darktheme.css">
+    <script src="../script/darktheme.js"></script>
     <br />
     <div class="ui container">
       <div class="field">

web/snippet/hostAccessEditor.html

@@ -41,9 +41,28 @@
                 min-height: 300px;
                 overflow-y: auto;
             }
+
+            body.darkTheme #accessRuleList{
+                border: 1px solid rgb(50, 50, 50) !important;
+
+            }
+
+            body.darkTheme .ui.segment.accessRule {
+                border: 1px solid var(--theme_bg_secondary) !important;
+            }
+
+            body.darkTheme .ui.segment.accessRule:hover {
+                background-color: var(--theme_bg_secondary) !important;
+            }
+
+            body.darkTheme .ui.segment.accessRule.active {
+                background-color: var(--theme_bg_secondary) !important;
+            }
         </style>
     </head>
     <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
         <br>
         <div class="ui container">
             <div class="ui header">

web/snippet/intermediateCertConv.html

@@ -8,6 +8,8 @@
         <script src="../script/semantic/semantic.min.js"></script>
     </head>
     <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
         <br>
         <div class="ui container">
             <div class="ui header">

web/snippet/logview.html

@@ -55,10 +55,64 @@
             background:#3643bb; 
             color:white; 
         }
+
+        body.darkTheme .loglist {
+            background-color: #1b1c1d;
+            color: #ffffff;
+        }
+
+        body.darkTheme .loglist .ui.header .content .sub.header {
+            color: #bbbbbb;
+        }
+
+        body.darkTheme .loglist .ui.divider {
+            border-color: #333333;
+        }
+
+        body.darkTheme .loglist .ui.accordion .title,
+        body.darkTheme .loglist .ui.accordion .content {
+            background-color: #1b1c1d;
+            color: #ffffff;
+        }
+
+        body.darkTheme .loglist .ui.accordion .title:hover {
+            background-color: #333333;
+        }
+
+        body.darkTheme .loglist .ui.list .item {
+            color: #ffffff;
+        }
+
+        body.darkTheme .loglist .ui.list .item .content {
+            color: #ffffff;
+        }
+
+        body.darkTheme .loglist .ui.list .item .showing {
+            color: #ffffff;
+        }
+
+        body.darkTheme .loglist .ui.button.filterbtn {
+            background-color: #333333;
+            color: #ffffff;
+        }
+
+        body.darkTheme .loglist .ui.button.filterbtn:hover {
+            background-color: #555555;
+        }
+
+        body.darkTheme .loglist .ui.toggle.checkbox label {
+            color: #ffffff;
+        }
+
+        body.darkTheme .loglist small {
+            color: #bbbbbb;
+        }
     </style>
 </head>
 
 <body>
+    <link rel="stylesheet" href="../darktheme.css">
+    <script src="../script/darktheme.js"></script>
     <br>
     <div class="ui container">
         <div class="ui stackable grid">

web/snippet/placeholder.html

@@ -15,6 +15,8 @@
         </style>
     </head>
     <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
         <div class="ui active inverted dimmer">
             <div class="ui text loader">Loading Snippet</div>
         </div>

web/snippet/sso_app.html

@@ -15,6 +15,8 @@
         </style>
     </head>
     <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
         <br>
         <div class="ui container">
             <div class="ui basic segment">

web/snippet/sso_user.html

@@ -15,6 +15,8 @@
         </style>
     </head>
     <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
         <br>
         <div class="ui container">
             <div class="ui basic segment">

web/snippet/upstreams.html

@@ -56,6 +56,8 @@
         </style>
     </head>
     <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
         <br>
         <div class="ui container">
             <div class="ui header">