owasp-td-jekyll 2.0.0 → 2.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aaa2627f56350e83ea403e4ce637cb61f78a9d682b2181272c769fb508798bdd
-  data.tar.gz: f6771a9a5442bd06155df82a85832465530a6a04d59da7eb9d9d4622095fbf03
+  metadata.gz: 19c0fef769132abf22f35ad4296887aca85a18a5e454e14b66fceca9454dc607
+  data.tar.gz: d7cd9df305b7ef0f41e0748244d39165f4c3821bd62056240ae02d485e85b20c
 SHA512:
-  metadata.gz: 2abc1bdcb4a866d1b9f2a94ec4eea6ae726c13535273d95430080f79cd11231a680ca2b37feb0faefb198dd0e570689ea7c02dbe63050dbba57fc198b1e53f1b
-  data.tar.gz: 668457d44ea9a108b7400ae5f1372a6c6220f229ae29e530a6c16ca9bc6071f5b8d06e3ccff551e908762a00b54485fe7e94f6bb9d325b6b02967fefa132e87d
+  metadata.gz: 0bde05ea8ff59490c7e445be73a2f915b01a93a5fbe168d27b74f6bcfd0b6ecef59c97f59a2d8eabfe46ba53fd44bf842d831a98cab341f192fbf0398437f899
+  data.tar.gz: 90f9eba6e5af1bb2c603c6d9031fa97124c62183cb714e59317d9a1949bc56d00132f78eadaf9b61cfa4213ef2e2c23fe2569230049b353a88e7886b8df69698

data/_includes/head.html

@@ -3,9 +3,12 @@
     <title>{{ page.title }}</title>
 
     <meta charset="utf-8" />
+    <meta name="color-scheme" content="light dark" />
     <link rel="shortcut icon" href="{{ site.faviconUrl | relative_url }}" type="image/x-icon">
     <link rel="icon" href="{{ site.faviconUrl | relative_url }}" type="image/x-icon">
+    <script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
     <link rel="stylesheet" href="{{ '/assets/css/bootstrap.css' | relative_url }}">
+    <link rel="stylesheet" href="{{ '/assets/css/vendor/rouge-friendly.css' | relative_url }}">
     <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
     <link rel="stylesheet" href="{{ '/assets/css/fontawesome.min.css' | relative_url }}">
 </head>

data/_includes/navbar.html

@@ -28,6 +28,13 @@
                     {%- endfor -%}
                 </div>
             </li>
+            <li class="nav-item">
+                <button class="nav-link theme-toggle" type="button" data-theme-toggle aria-label="Switch to dark mode" title="Switch to dark mode">
+                    <i class="fas fa-moon theme-toggle-icon" aria-hidden="true"></i>
+                    <span class="theme-toggle-text" data-theme-toggle-text>Dark mode</span>
+                    <span class="visually-hidden" data-theme-toggle-label>Switch to dark mode</span>
+                </button>
+            </li>
         </ul>
     </div>
 </nav>

data/assets/css/style.css

@@ -2,8 +2,23 @@
   --td-orange: #e95420;
   --td-dark-orange: #97310e;
   --td-gray: #aea79f;
+  --td-light-gray: #f1f3f5;
+  --td-code-block-bg: #f0f0f0;
+  --td-code-bg: #ece7e1;
+  --td-code-border: #d3cbc1;
+  --td-inline-code-color: #b02267;
   --td-white: #ffffff;
   --td-black: #333333;
+  --td-text-color: var(--td-black);
+  --td-surface-bg: #ffffff;
+  --td-surface-alt-bg: #f4f6f8;
+  --td-nav-bg: var(--td-orange);
+  --td-breadcrumb-bg: #e9ecef;
+  --td-jumbotron-bg: #e9ecef;
+  --td-navbar-link-color: rgba(255, 255, 255, 0.7);
+  --td-navbar-link-hover-color: var(--td-white);
+  --td-navbar-toggler-border: rgba(255, 255, 255, 0.1);
+  --td-theme-toggle-hover-bg: rgba(255, 255, 255, 0.12);
   --bs-primary: var(--td-orange);
   --bs-primary-rgb: 233, 84, 32;
   --bs-secondary: var(--td-gray);
@@ -12,18 +27,64 @@
   --bs-dark-rgb: 52, 58, 64;
   --bs-body-bg: var(--td-white);
   --bs-body-bg-rgb: 255, 255, 255;
-  --bs-body-color: var(--td-black);
+  --bs-body-color: var(--td-text-color);
   --bs-body-color-rgb: 51, 51, 51;
   --bs-font-sans-serif: "Ubuntu", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
   --bs-link-color: var(--td-orange);
   --bs-link-color-rgb: 233, 84, 32;
   --bs-link-hover-color: var(--td-dark-orange);
   --bs-link-hover-color-rgb: 151, 49, 14;
+  --bs-emphasis-color: #212529;
+  --bs-emphasis-color-rgb: 33, 37, 41;
+  --bs-secondary-bg: var(--td-surface-alt-bg);
+  --bs-tertiary-bg: #e9ecef;
+  --bs-border-color: #d7dde3;
+  --bs-border-color-translucent: rgba(51, 51, 51, 0.12);
   --bs-border-radius: 0.25rem;
   --bs-border-radius-sm: 0.2rem;
   --bs-border-radius-lg: 0.3rem;
 }
 
+:root[data-theme="dark"] {
+  --td-orange: #d87248;
+  --td-dark-orange: #9c4728;
+  --td-gray: #8f8a84;
+  --td-light-gray: #181d22;
+  --td-code-block-bg: #14181d;
+  --td-code-bg: #2b221d;
+  --td-code-border: #4a3b33;
+  --td-inline-code-color: #ffb38e;
+  --td-white: #f5f1ea;
+  --td-text-color: #e6dfd6;
+  --td-surface-bg: #1a1f25;
+  --td-surface-alt-bg: #222931;
+  --td-nav-bg: #7b341b;
+  --td-breadcrumb-bg: #1b2229;
+  --td-jumbotron-bg: #1b2229;
+  --td-navbar-link-color: rgba(245, 241, 234, 0.72);
+  --td-navbar-link-hover-color: #ffffff;
+  --td-navbar-toggler-border: rgba(245, 241, 234, 0.2);
+  --td-theme-toggle-hover-bg: rgba(216, 114, 72, 0.2);
+  --bs-primary: var(--td-orange);
+  --bs-primary-rgb: 216, 114, 72;
+  --bs-secondary: var(--td-gray);
+  --bs-secondary-rgb: 143, 138, 132;
+  --bs-body-bg: #111418;
+  --bs-body-bg-rgb: 17, 20, 24;
+  --bs-body-color: #e6dfd6;
+  --bs-body-color-rgb: 230, 223, 214;
+  --bs-link-color: #ff9d74;
+  --bs-link-color-rgb: 255, 157, 116;
+  --bs-link-hover-color: #ffc4aa;
+  --bs-link-hover-color-rgb: 255, 196, 170;
+  --bs-emphasis-color: #f5f1ea;
+  --bs-emphasis-color-rgb: 245, 241, 234;
+  --bs-secondary-bg: var(--td-surface-alt-bg);
+  --bs-tertiary-bg: #2a313a;
+  --bs-border-color: #39424c;
+  --bs-border-color-translucent: rgba(245, 241, 234, 0.12);
+}
+
 a {
   text-decoration: none;
 }
@@ -32,8 +93,8 @@ a:hover {
   text-decoration: underline;
 }
 
-nav {
-  background-color: var(--td-orange);
+.navbar.bg-primary {
+  background-color: var(--td-nav-bg) !important;
 }
 
 .navbar {
@@ -50,12 +111,12 @@ nav {
 }
 
 .navbar-dark .navbar-nav .nav-link {
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--td-navbar-link-color);
 }
 
 .navbar-dark .navbar-nav .nav-link:hover,
 .navbar-dark .navbar-nav .nav-link:focus {
-  color: rgba(255, 255, 255, 0.75);
+  color: var(--td-navbar-link-hover-color);
 }
 
 .navbar-dark .navbar-nav .nav-link.disabled {
@@ -71,7 +132,54 @@ nav {
 
 .navbar-dark .navbar-toggler {
   color: rgba(255, 255, 255, 0.5);
-  border-color: rgba(255, 255, 255, 0.1);
+  border-color: var(--td-navbar-toggler-border);
+}
+
+.navbar-dark .navbar-nav .nav-link.theme-toggle {
+  color: var(--td-white);
+}
+
+.navbar-dark .theme-toggle:hover,
+.navbar-dark .theme-toggle:focus,
+.navbar-dark .theme-toggle:focus-visible {
+  color: var(--td-navbar-link-hover-color);
+}
+
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  min-height: 100%;
+  background: transparent;
+  border: 0;
+  border-radius: 0.35rem;
+  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.theme-toggle:hover,
+.theme-toggle:focus {
+  text-decoration: none;
+}
+
+.theme-toggle:hover,
+.theme-toggle:focus-visible {
+  background-color: var(--td-theme-toggle-hover-bg);
+}
+
+.theme-toggle:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.35);
+}
+
+.theme-toggle-icon {
+  width: 1rem;
+  text-align: center;
+}
+
+.theme-toggle-text {
+  font-size: 0.9rem;
+  line-height: 1;
 }
 
 #navbarToggler a {
@@ -181,7 +289,8 @@ nav {
 .breadcrumb {
   padding: 0.75rem 1rem;
   margin-bottom: 1rem;
-  background-color: #e9ecef;
+  background-color: var(--td-breadcrumb-bg);
+  border: 1px solid var(--bs-border-color);
   border-radius: 0.25rem;
 }
 
@@ -190,7 +299,8 @@ body {
   font-size: 0.9rem;
   font-weight: 400;
   line-height: 1.5;
-  color: var(--td-black);
+  color: var(--td-text-color);
+  background-color: var(--bs-body-bg);
   text-align: left;
 }
 
@@ -198,11 +308,133 @@ body {
   color: var(--td-white) !important;
 }
 
+/* Improve readability of fenced code blocks and inline code. */
+.highlighter-rouge .highlight,
+pre.highlight {
+  background-color: var(--td-code-block-bg);
+  border: 1px solid var(--td-code-border);
+  border-radius: var(--bs-border-radius);
+}
+
+.highlighter-rouge .highlight pre,
+pre.highlight {
+  margin: 0;
+  padding: 1rem;
+  overflow-x: auto;
+  color: var(--td-text-color);
+  background-color: transparent;
+}
+
+.highlighter-rouge .highlight pre code,
+pre.highlight code {
+  color: var(--td-text-color);
+  background-color: transparent;
+}
+
+p code,
+li code,
+td code,
+th code {
+  padding: 0.1rem 0.3rem;
+  color: var(--td-inline-code-color);
+  background-color: var(--td-code-bg);
+  font-size: 0.95em;
+  font-weight: 500;
+  line-height: 1.3;
+  border-radius: 0.2rem;
+}
+
+:root[data-theme="dark"] .highlight,
+:root[data-theme="dark"] .highlight .hll {
+  background-color: var(--td-code-block-bg);
+}
+
+:root[data-theme="dark"] .highlight .c,
+:root[data-theme="dark"] .highlight .ch,
+:root[data-theme="dark"] .highlight .cm,
+:root[data-theme="dark"] .highlight .c1,
+:root[data-theme="dark"] .highlight .cpf,
+:root[data-theme="dark"] .highlight .cs {
+  color: #88aeb8;
+}
+
+:root[data-theme="dark"] .highlight .cs {
+  background-color: transparent;
+}
+
+:root[data-theme="dark"] .highlight .cp,
+:root[data-theme="dark"] .highlight .k,
+:root[data-theme="dark"] .highlight .kc,
+:root[data-theme="dark"] .highlight .kd,
+:root[data-theme="dark"] .highlight .kn,
+:root[data-theme="dark"] .highlight .kr,
+:root[data-theme="dark"] .highlight .ow,
+:root[data-theme="dark"] .highlight .bp,
+:root[data-theme="dark"] .highlight .nb,
+:root[data-theme="dark"] .highlight .ne {
+  color: #ffb86c;
+}
+
+:root[data-theme="dark"] .highlight .kt,
+:root[data-theme="dark"] .highlight .nc,
+:root[data-theme="dark"] .highlight .nn,
+:root[data-theme="dark"] .highlight .nf,
+:root[data-theme="dark"] .highlight .fm {
+  color: #7dcfff;
+}
+
+:root[data-theme="dark"] .highlight .s,
+:root[data-theme="dark"] .highlight .sa,
+:root[data-theme="dark"] .highlight .sb,
+:root[data-theme="dark"] .highlight .sc,
+:root[data-theme="dark"] .highlight .dl,
+:root[data-theme="dark"] .highlight .sd,
+:root[data-theme="dark"] .highlight .s1,
+:root[data-theme="dark"] .highlight .s2,
+:root[data-theme="dark"] .highlight .sh,
+:root[data-theme="dark"] .highlight .sx {
+  color: #98d982;
+}
+
+:root[data-theme="dark"] .highlight .m,
+:root[data-theme="dark"] .highlight .mb,
+:root[data-theme="dark"] .highlight .mf,
+:root[data-theme="dark"] .highlight .mh,
+:root[data-theme="dark"] .highlight .mi,
+:root[data-theme="dark"] .highlight .mo,
+:root[data-theme="dark"] .highlight .il,
+:root[data-theme="dark"] .highlight .no {
+  color: #f6c177;
+}
+
+:root[data-theme="dark"] .highlight .na,
+:root[data-theme="dark"] .highlight .nt,
+:root[data-theme="dark"] .highlight .nd {
+  color: #ff9d74;
+}
+
+:root[data-theme="dark"] .highlight .o,
+:root[data-theme="dark"] .highlight .go,
+:root[data-theme="dark"] .highlight .w {
+  color: #a8b3bf;
+}
+
+:root[data-theme="dark"] .highlight .gp,
+:root[data-theme="dark"] .highlight .gt {
+  color: #f0a6ca;
+}
+
+:root[data-theme="dark"] .highlight .err {
+  color: #ff8b8b;
+  border-color: #ff8b8b;
+}
+
 /* Bootstrap 4 compatibility helpers used by site content/layouts. */
 .jumbotron {
   padding: 2rem 1rem;
   margin-bottom: 2rem;
-  background-color: #e9ecef;
+  background-color: var(--td-jumbotron-bg);
+  border: 1px solid var(--bs-border-color);
   border-radius: 0.3rem;
 }
 
@@ -218,6 +450,69 @@ body {
   border-radius: 0;
 }
 
+/* Default all tables to Bootstrap's .table + .table-striped styling. */
+table {
+  --bs-table-color-type: initial;
+  --bs-table-bg-type: initial;
+  --bs-table-color-state: initial;
+  --bs-table-bg-state: initial;
+  --bs-table-color: var(--bs-emphasis-color);
+  --bs-table-bg: var(--bs-body-bg);
+  --bs-table-border-color: var(--bs-border-color);
+  --bs-table-accent-bg: transparent;
+  --bs-table-striped-color: var(--bs-emphasis-color);
+  --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
+  width: 100%;
+  margin-bottom: 1rem;
+  vertical-align: top;
+  border-color: var(--bs-table-border-color);
+}
+
+table > thead > tr > * {
+  --bs-table-bg: var(--td-surface-alt-bg);
+}
+
+table > :not(caption) > * > * {
+  padding: 0.5rem 0.5rem;
+  color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
+  background-color: var(--bs-table-bg);
+  border-bottom-width: var(--bs-border-width);
+  box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
+}
+
+table > tbody {
+  vertical-align: inherit;
+}
+
+table > thead {
+  vertical-align: bottom;
+}
+
+table > tbody > tr:nth-of-type(odd) > * {
+  --bs-table-color-type: var(--bs-table-striped-color);
+  --bs-table-bg-type: var(--bs-table-striped-bg);
+}
+
+:root[data-theme="dark"] table {
+  --bs-table-striped-bg: rgba(245, 241, 234, 0.06);
+}
+
+:root[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
+  color: rgba(245, 241, 234, 0.55);
+}
+
+:root[data-theme="dark"] .dropdown-menu {
+  --bs-dropdown-bg: #1b2229;
+  --bs-dropdown-color: var(--bs-body-color);
+  --bs-dropdown-border-color: var(--bs-border-color);
+  --bs-dropdown-link-color: var(--bs-body-color);
+  --bs-dropdown-link-hover-color: #ffffff;
+  --bs-dropdown-link-hover-bg: #2a313a;
+  --bs-dropdown-link-active-color: #ffffff;
+  --bs-dropdown-link-active-bg: var(--td-dark-orange);
+  --bs-dropdown-header-color: var(--bs-secondary-color);
+}
+
 .text-left {
   text-align: left !important;
 }

data/assets/css/vendor/rouge-friendly.UNLICENSE.txt

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <http://unlicense.org>

data/assets/css/vendor/rouge-friendly.css

@@ -0,0 +1,70 @@
+/* Vendored from richleland/pygments-css (friendly.css), UNLICENSE. */
+.highlight .hll { background-color: #ffffcc }
+.highlight  { background: #f0f0f0; }
+.highlight .c { color: #60a0b0; font-style: italic } /* Comment */
+.highlight .err { border: 1px solid #FF0000 } /* Error */
+.highlight .k { color: #007020; font-weight: bold } /* Keyword */
+.highlight .o { color: #666666 } /* Operator */
+.highlight .ch { color: #60a0b0; font-style: italic } /* Comment.Hashbang */
+.highlight .cm { color: #60a0b0; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #007020 } /* Comment.Preproc */
+.highlight .cpf { color: #60a0b0; font-style: italic } /* Comment.PreprocFile */
+.highlight .c1 { color: #60a0b0; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #60a0b0; background-color: #fff0f0 } /* Comment.Special */
+.highlight .gd { color: #A00000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #FF0000 } /* Generic.Error */
+.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #00A000 } /* Generic.Inserted */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #0044DD } /* Generic.Traceback */
+.highlight .kc { color: #007020; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #007020 } /* Keyword.Pseudo */
+.highlight .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #902000 } /* Keyword.Type */
+.highlight .m { color: #40a070 } /* Literal.Number */
+.highlight .s { color: #4070a0 } /* Literal.String */
+.highlight .na { color: #4070a0 } /* Name.Attribute */
+.highlight .nb { color: #007020 } /* Name.Builtin */
+.highlight .nc { color: #0e84b5; font-weight: bold } /* Name.Class */
+.highlight .no { color: #60add5 } /* Name.Constant */
+.highlight .nd { color: #555555; font-weight: bold } /* Name.Decorator */
+.highlight .ni { color: #d55537; font-weight: bold } /* Name.Entity */
+.highlight .ne { color: #007020 } /* Name.Exception */
+.highlight .nf { color: #06287e } /* Name.Function */
+.highlight .nl { color: #002070; font-weight: bold } /* Name.Label */
+.highlight .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
+.highlight .nt { color: #062873; font-weight: bold } /* Name.Tag */
+.highlight .nv { color: #bb60d5 } /* Name.Variable */
+.highlight .ow { color: #007020; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mb { color: #40a070 } /* Literal.Number.Bin */
+.highlight .mf { color: #40a070 } /* Literal.Number.Float */
+.highlight .mh { color: #40a070 } /* Literal.Number.Hex */
+.highlight .mi { color: #40a070 } /* Literal.Number.Integer */
+.highlight .mo { color: #40a070 } /* Literal.Number.Oct */
+.highlight .sa { color: #4070a0 } /* Literal.String.Affix */
+.highlight .sb { color: #4070a0 } /* Literal.String.Backtick */
+.highlight .sc { color: #4070a0 } /* Literal.String.Char */
+.highlight .dl { color: #4070a0 } /* Literal.String.Delimiter */
+.highlight .sd { color: #4070a0; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #4070a0 } /* Literal.String.Double */
+.highlight .se { color: #4070a0; font-weight: bold } /* Literal.String.Escape */
+.highlight .sh { color: #4070a0 } /* Literal.String.Heredoc */
+.highlight .si { color: #70a0d0; font-style: italic } /* Literal.String.Interpol */
+.highlight .sx { color: #c65d09 } /* Literal.String.Other */
+.highlight .sr { color: #235388 } /* Literal.String.Regex */
+.highlight .s1 { color: #4070a0 } /* Literal.String.Single */
+.highlight .ss { color: #517918 } /* Literal.String.Symbol */
+.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #06287e } /* Name.Function.Magic */
+.highlight .vc { color: #bb60d5 } /* Name.Variable.Class */
+.highlight .vg { color: #bb60d5 } /* Name.Variable.Global */
+.highlight .vi { color: #bb60d5 } /* Name.Variable.Instance */
+.highlight .vm { color: #bb60d5 } /* Name.Variable.Magic */
+.highlight .il { color: #40a070 } /* Literal.Number.Integer.Long */

data/assets/js/theme.js

@@ -0,0 +1,99 @@
+const THEME_STORAGE_KEY = 'td-theme';
+const LIGHT_THEME = 'light';
+const DARK_THEME = 'dark';
+const themeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+function getStoredTheme() {
+    try {
+        const theme = window.localStorage.getItem(THEME_STORAGE_KEY);
+        if (theme === LIGHT_THEME || theme === DARK_THEME) {
+            return theme;
+        }
+    } catch (error) {
+        // Ignore storage access issues and fall back to the system preference.
+    }
+
+    return null;
+}
+
+function getPreferredTheme() {
+    return getStoredTheme() || (themeMediaQuery.matches ? DARK_THEME : LIGHT_THEME);
+}
+
+function applyTheme(theme) {
+    const rootElement = document.documentElement;
+    rootElement.setAttribute('data-theme', theme);
+    rootElement.setAttribute('data-bs-theme', theme);
+    rootElement.style.colorScheme = theme;
+}
+
+function updateThemeToggle(theme) {
+    document.querySelectorAll('[data-theme-toggle]').forEach((toggleButton) => {
+        const nextTheme = theme === DARK_THEME ? LIGHT_THEME : DARK_THEME;
+        const nextThemeLabel = nextTheme === DARK_THEME ? 'dark' : 'light';
+        const nextThemeText = nextTheme === DARK_THEME ? 'Dark mode' : 'Light mode';
+        const iconElement = toggleButton.querySelector('.theme-toggle-icon');
+        const labelElement = toggleButton.querySelector('[data-theme-toggle-label]');
+        const textElement = toggleButton.querySelector('[data-theme-toggle-text]');
+
+        toggleButton.setAttribute('aria-pressed', String(theme === DARK_THEME));
+        toggleButton.setAttribute('aria-label', `Switch to ${nextThemeLabel} mode`);
+        toggleButton.setAttribute('title', `Switch to ${nextThemeLabel} mode`);
+
+        if (labelElement) {
+            labelElement.textContent = `Switch to ${nextThemeLabel} mode`;
+        }
+
+        if (textElement) {
+            textElement.textContent = nextThemeText;
+        }
+
+        if (iconElement) {
+            iconElement.classList.toggle('fa-moon', theme !== DARK_THEME);
+            iconElement.classList.toggle('fa-sun', theme === DARK_THEME);
+        }
+    });
+}
+
+function setTheme(theme, persistThemePreference) {
+    applyTheme(theme);
+    updateThemeToggle(theme);
+
+    if (persistThemePreference) {
+        try {
+            window.localStorage.setItem(THEME_STORAGE_KEY, theme);
+        } catch (error) {
+            // Ignore storage access issues and continue with the applied theme.
+        }
+    }
+}
+
+applyTheme(getPreferredTheme());
+
+document.addEventListener('DOMContentLoaded', () => {
+    updateThemeToggle(getPreferredTheme());
+
+    document.querySelectorAll('[data-theme-toggle]').forEach((toggleButton) => {
+        toggleButton.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme') === DARK_THEME ? DARK_THEME : LIGHT_THEME;
+            const nextTheme = currentTheme === DARK_THEME ? LIGHT_THEME : DARK_THEME;
+            setTheme(nextTheme, true);
+        });
+    });
+});
+
+function handleSystemThemeChange(event) {
+    if (getStoredTheme()) {
+        return;
+    }
+
+    const nextTheme = event.matches ? DARK_THEME : LIGHT_THEME;
+    applyTheme(nextTheme);
+    updateThemeToggle(nextTheme);
+}
+
+if (typeof themeMediaQuery.addEventListener === 'function') {
+    themeMediaQuery.addEventListener('change', handleSystemThemeChange);
+} else if (typeof themeMediaQuery.addListener === 'function') {
+    themeMediaQuery.addListener(handleSystemThemeChange);
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: owasp-td-jekyll
 version: !ruby/object:Gem::Version
-  version: 2.0.0
+  version: 2.0.1
 platform: ruby
 authors:
 - Leo Reading
@@ -48,11 +48,14 @@ files:
 - assets/css/bootstrap.min.css.map
 - assets/css/fontawesome.min.css
 - assets/css/style.css
+- assets/css/vendor/rouge-friendly.UNLICENSE.txt
+- assets/css/vendor/rouge-friendly.css
 - assets/images/favicon.ico
 - assets/images/threatdragon_logo_image.svg
 - assets/js/bootstrap.bundle.min.js
 - assets/js/bootstrap.bundle.min.js.map
 - assets/js/sidebar.js
+- assets/js/theme.js
 - assets/webfonts/fa-brands-400.eot
 - assets/webfonts/fa-brands-400.svg
 - assets/webfonts/fa-brands-400.ttf