Merge pull request #346 from softlayer/1719256476

Dark Theme updates
softlayer · Jun 24, 2024 · 5a95c23 · 5a95c23
2 parents 125d005 + 6a371b6
commit 5a95c23
Show file tree

Hide file tree

Showing 10,169 changed files with 730,539 additions and 216,960 deletions.
diff --git a/404.html b/404.html
@@ -15,6 +15,7 @@
     <link href="https://sldn.softlayer.com/css/custom.css" rel="stylesheet">
     <link href="https://sldn.softlayer.com/css/monokai.css" rel="stylesheet">
     <link href="https://sldn.softlayer.com/css/highlight/solarized_dark.css" rel="stylesheet">
+
 
     <script src="https://sldn.softlayer.com/js/highlight.pack.js"></script>
 
@@ -35,9 +36,24 @@
     <script defer src="https://sldn.softlayer.com/fontawesome/js/brands.min.js"></script>
     <script defer src="https://sldn.softlayer.com/fontawesome/js/fontawesome.min.js"></script>
 
+    <script>
+        var head = document.getElementsByTagName('head')[0]
+        var style = document.createElement('link')
+        style.type = 'text/css'
+        style.rel = 'stylesheet'
+        style.id = "dark-theme"
+        if (localStorage.getItem("dark-mode-theme") == "dark") {
+            style.href = '/css/dark.css'
+        } else {
+            style.href = '/css/light.css'
+        }
+        head.append(style)
+    </script>
+
     <script>
 		$(document).ready(function() {
 			$('table').addClass("table table-hover table-striped")
+            setThemeMode(localStorage.getItem("dark-mode-theme") || "dark");
 		})
 	</script>
 
@@ -57,8 +73,8 @@
 
 <body>
     <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
-        <div class="container">
-            <div class="navbar-header">
+        <div class="nav-container">
+            <div class="navbar-header" style="width: 150px">
                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                     <span class="sr-only">Toggle Navigation</span>
                     <span class="icon-bar"></span>
@@ -67,8 +83,9 @@
                 </button>
                 <a class="navbar-brand" href="https://sldn.softlayer.com/">SoftLayer API</a>
             </div>
-            <div class="collapse navbar-collapse navbar-ex1-collapse">
-                <ul class="nav navbar-nav">
+
+            <div class="navbar-header" style="width: calc(100% - 400px)">
+                <ul class="nav navbar-nav" style="width: 100%">
 
                         <li><a href="https://sldn.softlayer.com/article/">Articles</a></li>
 
@@ -90,26 +107,59 @@
 
                         <li><a href="https://sldn.softlayer.com/tools/">Tools</a></li>
 
-
-
+                    <li class="nav-item">
+                        <a id="dark-toggle" class="dark-mode-toggle" aria-label="dark-mode-toggle" style="color: var(--Red); font-size: 20px">
+                            <i class="fas fa-sun"></i>
+                        </a>
+                    </li>
                 </ul>
-                <div id="custom-search-input" class="pull-right">
-                  <form class="navbar-form" role="search" method="get" action="https://www.bing.com/search">
-                    <div class="input-group col-md-12">
-                      <input type="text" class="form-control input-md" placeholder="Search" name="q" id="srch-term">
-                      <input type="hidden" name="q1" value="site:sldn.softlayer.com" />
-                      <div class="input-group-btn">
-                        <button class="btn btn-info" type="submit">
-                          <i class="glyphicon glyphicon-search"></i>
-                        </button>
-                      </div>
-                    </div>
-                  </form>
+            </div>
+
+            <div id="custom-search-input" class="pull-right" style="width: 250px">
+              <form class="navbar-form" role="search" method="get" action="https://www.bing.com/search">
+                <div class="input-group col-md-12">
+                  <input type="text" class="form-control input-md" placeholder="Search" name="q" id="srch-term">
+                  <input type="hidden" name="q1" value="site:sldn.softlayer.com" />
+                  <div class="input-group-btn">
+                    <button class="btn btn-info" type="submit">
+                      <i class="glyphicon glyphicon-search"></i>
+                    </button>
+                  </div>
                 </div>
+              </form>
             </div>
+
         </div>
     </nav>
 
+<script type="text/javascript">
+const darkIconClass = 'fas fa-moon'
+const lightIconClass = 'fas fa-sun'
+var darkCSS = $("#dark-theme");
+var darkToggleIcon = $("#dark-toggle i");
+
+
+
+
+function setThemeMode(mode) {
+    localStorage.setItem("dark-mode-theme", mode);
+    if (mode === "dark") {
+        darkToggleIcon.attr('class', darkIconClass)
+    } else  {
+        darkToggleIcon.attr('class', lightIconClass)
+    }
+}
+
+
+$("#dark-toggle").click(function () {
+  if (darkToggleIcon.attr("class") == lightIconClass) {
+    setThemeMode("dark")
+  } else if (darkToggleIcon.attr("class") == darkIconClass) {
+    setThemeMode("light")
+  }
+  location.reload();
+});
+</script>
 
 <div class="container">
     <div class="row">
@@ -169,7 +219,7 @@ <h3> Datatypes </h3>
 </div>
 <footer>
     <div class="row">
-        <div class="col-sm-12">
+        <div class="col-sm-12 footer">
             <p>&copy; SoftLayer 2024<br>
             Built with <a href="https://github.com/spf13/hugo">Hugo</a></p>
         </div>

diff --git a/ansible/index.html b/ansible/index.html
@@ -15,6 +15,7 @@
     <link href="https://sldn.softlayer.com/css/custom.css" rel="stylesheet">
     <link href="https://sldn.softlayer.com/css/monokai.css" rel="stylesheet">
     <link href="https://sldn.softlayer.com/css/highlight/solarized_dark.css" rel="stylesheet">
+
 
     <script src="https://sldn.softlayer.com/js/highlight.pack.js"></script>
 
@@ -35,9 +36,24 @@
     <script defer src="https://sldn.softlayer.com/fontawesome/js/brands.min.js"></script>
     <script defer src="https://sldn.softlayer.com/fontawesome/js/fontawesome.min.js"></script>
 
+    <script>
+        var head = document.getElementsByTagName('head')[0]
+        var style = document.createElement('link')
+        style.type = 'text/css'
+        style.rel = 'stylesheet'
+        style.id = "dark-theme"
+        if (localStorage.getItem("dark-mode-theme") == "dark") {
+            style.href = '/css/dark.css'
+        } else {
+            style.href = '/css/light.css'
+        }
+        head.append(style)
+    </script>
+
     <script>
 		$(document).ready(function() {
 			$('table').addClass("table table-hover table-striped")
+            setThemeMode(localStorage.getItem("dark-mode-theme") || "dark");
 		})
 	</script>
 
@@ -56,8 +72,8 @@
 
 <body>
     <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
-        <div class="container">
-            <div class="navbar-header">
+        <div class="nav-container">
+            <div class="navbar-header" style="width: 150px">
                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                     <span class="sr-only">Toggle Navigation</span>
                     <span class="icon-bar"></span>
@@ -66,8 +82,9 @@
                 </button>
                 <a class="navbar-brand" href="https://sldn.softlayer.com/">SoftLayer API</a>
             </div>
-            <div class="collapse navbar-collapse navbar-ex1-collapse">
-                <ul class="nav navbar-nav">
+
+            <div class="navbar-header" style="width: calc(100% - 400px)">
+                <ul class="nav navbar-nav" style="width: 100%">
 
                         <li><a href="https://sldn.softlayer.com/article/">Articles</a></li>
 
@@ -89,26 +106,59 @@
 
                         <li><a href="https://sldn.softlayer.com/tools/">Tools</a></li>
 
-
-
+                    <li class="nav-item">
+                        <a id="dark-toggle" class="dark-mode-toggle" aria-label="dark-mode-toggle" style="color: var(--Red); font-size: 20px">
+                            <i class="fas fa-sun"></i>
+                        </a>
+                    </li>
                 </ul>
-                <div id="custom-search-input" class="pull-right">
-                  <form class="navbar-form" role="search" method="get" action="https://www.bing.com/search">
-                    <div class="input-group col-md-12">
-                      <input type="text" class="form-control input-md" placeholder="Search" name="q" id="srch-term">
-                      <input type="hidden" name="q1" value="site:sldn.softlayer.com" />
-                      <div class="input-group-btn">
-                        <button class="btn btn-info" type="submit">
-                          <i class="glyphicon glyphicon-search"></i>
-                        </button>
-                      </div>
-                    </div>
-                  </form>
+            </div>
+
+            <div id="custom-search-input" class="pull-right" style="width: 250px">
+              <form class="navbar-form" role="search" method="get" action="https://www.bing.com/search">
+                <div class="input-group col-md-12">
+                  <input type="text" class="form-control input-md" placeholder="Search" name="q" id="srch-term">
+                  <input type="hidden" name="q1" value="site:sldn.softlayer.com" />
+                  <div class="input-group-btn">
+                    <button class="btn btn-info" type="submit">
+                      <i class="glyphicon glyphicon-search"></i>
+                    </button>
+                  </div>
                 </div>
+              </form>
             </div>
+
         </div>
     </nav>
 
+<script type="text/javascript">
+const darkIconClass = 'fas fa-moon'
+const lightIconClass = 'fas fa-sun'
+var darkCSS = $("#dark-theme");
+var darkToggleIcon = $("#dark-toggle i");
+
+
+
+
+function setThemeMode(mode) {
+    localStorage.setItem("dark-mode-theme", mode);
+    if (mode === "dark") {
+        darkToggleIcon.attr('class', darkIconClass)
+    } else  {
+        darkToggleIcon.attr('class', lightIconClass)
+    }
+}
+
+
+$("#dark-toggle").click(function () {
+  if (darkToggleIcon.attr("class") == lightIconClass) {
+    setThemeMode("dark")
+  } else if (darkToggleIcon.attr("class") == darkIconClass) {
+    setThemeMode("light")
+  }
+  location.reload();
+});
+</script>
 <div class="container">
     <div class="row">
         <strong>Items with tag <code> ansible</code></strong>
@@ -138,7 +188,7 @@ <h4>
     </div>
 <footer>
     <div class="row">
-        <div class="col-sm-12">
+        <div class="col-sm-12 footer">
             <p>&copy; SoftLayer 2024<br>
             Built with <a href="https://github.com/spf13/hugo">Hugo</a></p>
         </div>