jekyll-theme-centos 2.2.1 → 2.2.3

data/_includes/people/header.html

@@ -1,8 +1,8 @@
-<div class="bg-dark p-5" style="background: url({{ site.baseurl }}/assets/img/centos-motif.png) right center / cover;">
+<div class="bg-dark bg-image">
   <div class="container p-5 text-white text-center">
     <div class="row">
       <div class="col">
-        <img class="rounded-circle shadow img-fluid" width="250" src="{{ site.baseurl }}/assets/img/people/{{ page.username }}.png" alt="{{ page.username }}" />
+        <img class="rounded-circle shadow img-fluid" width="250" src="{{ site.baseurl }}/assets/img/people/{{ page.username }}.svg" alt="{{ page.username }}" />
         <h1 class="display-1 fw-bold">{{ page.username }}</h1>
         <p class="lead">{{ page.fullname }}</p>
       </div>

data/_includes/people/posts.html

@@ -1,15 +1,14 @@
-{% assign username = page.username %}
-{% assign entries = site.posts | where: "author", username %}
-{% assign limit = page.posts.section.limit %}
-
-{% if page.posts.section.visible == true %}
-<div class="container py-5 text-center border-top"{% if page.posts.section.highlight == true %} style="background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(248,249,250,0) 100%);"{% endif %}>
-
+{% assign username = page.username %} {% assign entries = site.posts | where: "author", username %} {% assign limit = page.posts.section.limit %} {% if page.posts.section.visible == true %}
+<div class="container py-5 text-center border-top{% if page.posts.section.highlight == true %} bg-light-radial-gradient{% endif %}">
   <div class="row">
     <div class="col">
-      {% if page.posts.section.icon %}<div class="display-6">{{ page.posts.section.icon }}</div>{% endif %}
-      {% if page.posts.section.name %}<div class="display-6">{{ page.posts.section.name }}</div>{% endif %}
-      {% if page.posts.section.preamble %}<p>{{ page.posts.section.preamble }}</p>{% endif %}
+      {% if page.posts.section.icon %}
+      <div class="display-6"><i class="{{ page.posts.section.icon }}"></i></div>
+      {% endif %} {% if page.posts.section.name %}
+      <div class="display-6 fw-bold">{{ page.posts.section.name }}</div>
+      {% endif %} {% if page.posts.section.preamble %}
+      <p>{{ page.posts.section.preamble }}</p>
+      {% endif %}
     </div>
   </div>
 
@@ -17,8 +16,7 @@
     <div class="col">
       {% if entries.size > 0 %}
       <div class="list-group shadow text-start">
-        {% for i in entries limit: limit %}
-        {%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
+        {% for i in entries limit: limit %} {%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
         <a href="{{ site.baseurl }}{{ i.url }}" class="list-group-item list-group-item-action">
           <div class="d-flex gap-2w-100 justify-content-between">
             <h5 class="pt-0 mt-1 mb-1 fw-bold text-primary">{{ i.title }}</h5>
@@ -33,6 +31,5 @@
       {% endif %}
     </div>
   </div>
-
 </div>
 {% endif %}

data/_includes/people/projects.html

@@ -1,28 +1,32 @@
-{% if page.projects.section.visible == true %}
-<div class="container py-5 text-center border-top"{% if page.projects.section.highlight == true %} style="background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(248,249,250,0) 100%);"{% endif %}>
+{% assign username = page.username %} {% assign projects = page.projects.content %} {% assign limit = page.posts.section.limit %} {% if page.projects.section.visible == true %}
+<div class="container py-5 text-center border-top{% if page.projects.section.highlight == true %} bg-light-radial-gradient{% endif %}">
   <div class="row">
     <div class="col">
-      {% if page.projects.section.icon %}<div class="display-6">{{ page.projects.section.icon }}</div>{% endif %}
-      {% if page.projects.section.name %}<div class="display-6">{{ page.projects.section.name }}</div>{% endif %}
-      {% if page.projects.section.preamble %}<p>{{ page.projects.section.preamble }}</p>{% endif %}
+      {% if page.projects.section.icon %}
+      <div class="display-6"><i class="{{ page.projects.section.icon }}"></i></div>
+      {% endif %} {% if page.projects.section.name %}
+      <div class="display-6 fw-bold">{{ page.projects.section.name }}</div>
+      {% endif %} {% if page.projects.section.preamble %}
+      <p>{{ page.projects.section.preamble }}</p>
+      {% endif %}
     </div>
   </div>
 
-  {% if page.projects.content.size > 0 %}
-  <div class="row mt-3">
-    {% for project in page.projects.content %}
-    <div class="col-sm-6{% cycle ' border-end', '' %}">
-      <div class="display-6 pt-3 fw-bold"><a href="{{ project.link }}">{{ project.name }}</a></div>
-      <div class="lead pb-3">{{ project.description }}</div>
-    </div>
-    {% endfor%}
-  </div>
-  {% else %}
-  <div class="row mt-3">
+  <div class="row">
     <div class="col">
+      {% if projects.size > 0 %}
+      <div class="list-group shadow text-start">
+        {% for i in projects limit: limit %}
+        <a href="{{ site.baseurl }}{{ i.link }}" class="list-group-item list-group-item-action">
+          <div class="fw-bold">{{ i.name }}</div>
+          <small class="text-muted">{{ i.description }}</small>
+        </a>
+        {% endfor %}
+      </div>
+      {% else %}
       <div class="alert alert-light border shadow" role="alert">Nothing posted here, yet.</div>
+      {% endif %}
     </div>
   </div>
-  {% endif %}
 </div>
 {% endif %}

data/_includes/people/pubkeys.html

@@ -1,11 +1,14 @@
 {% if page.pubkeys.section.visible == true %}
-<div class="container py-5 text-center border-top"{% if page.pubkeys.section.highlight == true %} style="background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(248,249,250,0) 100%);"{% endif %}>
-
+<div class="container py-5 text-center border-top{% if page.pubkeys.section.highlight == true %} bg-light-radial-gradient{% endif %}">
   <div class="row">
     <div class="col">
-      {% if page.pubkeys.section.icon %}<div class="display-6">{{ page.pubkeys.section.icon }}</div>{% endif %}
-      {% if page.pubkeys.section.name %}<div class="display-6">{{ page.pubkeys.section.name }}</div>{% endif %}
-      {% if page.pubkeys.section.preamble %}<p>{{ page.pubkeys.section.preamble }}</p>{% endif %}
+      {% if page.pubkeys.section.icon %}
+      <div class="display-6"><i class="{{ page.pubkeys.section.icon }}"></i></div>
+      {% endif %} {% if page.pubkeys.section.name %}
+      <div class="display-6 fw-bold">{{ page.pubkeys.section.name }}</div>
+      {% endif %} {% if page.pubkeys.section.preamble %}
+      <p>{{ page.pubkeys.section.preamble }}</p>
+      {% endif %}
     </div>
   </div>
 
@@ -16,7 +19,7 @@
       <p class="fw-bold">{{ pubkey.name }}</p>
       <div class="input-group">
         <textarea id="{{ pubkey.name }}-key-{{ forloop.index }}" class="form-control font-monospace" placeholder="User's key" aria-label="User's key" aria-describedby="{{ pubkey.name }}-button-{{ forloop.index }}" readonly rows="5">{{ pubkey.content }}</textarea>
-        <button id="{{ pubkey.name }}-button-{{ forloop.index }}" class="btn btn-clipboard btn-outline-primary" type="button" aria-label="Copy to clipboard" data-clipboard-target="#{{ pubkey.name }}-key-{{ forloop.index }}" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard"><i class="fa-solid fa-clipboard"></i></button>
+        <button id="{{ pubkey.name }}-button-{{ forloop.index }}" class="btn btn-clipboard" type="button" aria-label="Copy to clipboard" data-clipboard-target="#{{ pubkey.name }}-key-{{ forloop.index }}" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard"><i class="fa-solid fa-clipboard"></i></button>
       </div>
     </div>
     {% endfor %}
@@ -24,6 +27,5 @@
   {% else %}
   <div class="alert alert-light border shadow" role="alert">Nothing posted here, yet.</div>
   {% endif %}
-
 </div>
 {% endif %}

data/_includes/people/support.html

@@ -1,25 +1,25 @@
 {% if page.support.section.visible == true %}
-<div class="container py-5 text-center border-top"{% if page.support.section.highlight == true %} style="background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(248,249,250,0) 100%);"{% endif %}>
-
+<div class="container py-5 text-center border-top{% if page.support.section.highlight == true %} bg-light-radial-gradient{% endif %}">
   <div class="row">
     <div class="col">
-      {% if page.support.section.icon %}<div class="display-6">{{ page.support.section.icon }}</div>{% endif %}
-      {% if page.support.section.name %}<div class="display-6">{{ page.support.section.name }}</div>{% endif %}
-      {% if page.support.section.preamble %}<p>{{ page.support.section.preamble }}</p>{% endif %}
+      {% if page.support.section.icon %}
+      <div class="display-6"><i class="{{ page.support.section.icon }}"></i></div>
+      {% endif %} {% if page.support.section.name %}
+      <div class="display-6 fw-bold">{{ page.support.section.name }}</div>
+      {% endif %} {% if page.support.section.preamble %}
+      <p>{{ page.support.section.preamble }}</p>
+      {% endif %}
     </div>
   </div>
 
   {% if page.support.content.size > 0 %}
   <div class="row">
     {% for support in page.support.content %}
-    <div class="col">
-      {{ support }}
-    </div>
+    <div class="col">{{ support }}</div>
     {% endfor %}
   </div>
   {% else %}
   <div class="alert alert-light border shadow" role="alert">Nothing posted here, yet.</div>
   {% endif %}
-
 </div>
 {% endif %}

data/_layouts/base/default.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: 'en' }}">
+  {% include base/head.html title=page.title -%}
+
+  <body id="top">
+    {% include base/navbar.html -%}
+    <main>
+      {% include base/header.html -%}
+      <div class="container py-5">
+        {% if page.with_breadcrumbs %}
+        <div class="row justify-content-center">
+          <div class="col-sm-12 col-xl-8">
+            {% include base/breadcrumbs.html %}
+          </div>
+        </div>
+        {% endif %}
+        {% if page.with_toc %}
+        <div class="row my-3 justify-content-center">
+          <div class="col-sm-12 col-xl-8">{% include base/toc-accordion.html %}</div>
+        </div>
+        {% endif %}
+        <div class="row my-5 justify-content-center">
+          <div class="col-sm-12 col-xl-8">{{ content }}</div>
+        </div>
+      </div>
+    </main>
+
+    {% include base/footer.html %}
+    {% include base/script.html %}
+  </body>
+</html>

data/_layouts/download/cards.html

@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+{% include download/cards.html %}
+
+{{ content }}

data/_layouts/home.html

@@ -1,22 +1,20 @@
 <!DOCTYPE html>
 <html lang="{{ page.lang | default: 'en' }}">
-
-  {% include head.html -%}
+  {% include head.html title=page.title -%}
 
   <body>
-
     {% include navbar.html -%}
 
     <main class="bg-light">
+    {% include home/header.html %}
+    {% include home/distributions.html %}
+    {{ content }}
+    {% include home/news-and-events.html %}
+    {% include home/planet.html %}
+    </main>
 
-      {% include home/header.html %}
-      {% include home/distributions.html %}
-      {% include home/news-and-events.html %}
-      {% include home/planet.html %}
+    {% include footer.html -%}
 
-      {% include footer.html -%}
-
-      <script src="{{ site.baseurl }}/assets/js/bootstrap.bundle.min.js"></script>
+    <script src="{{ site.baseurl }}/assets/js/bootstrap.bundle.min.js"></script>
   </body>
-
 </html>

data/_layouts/people/default.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: 'en' }}">
+  {% include base/head.html title=page.title -%}
+
+  <body id="top">
+    {% include base/navbar.html -%}
+
+    <main>
+    {% include people/header.html %}
+    {% include people/about.html %}
+    {% include people/projects.html %}
+    {% include people/posts.html %}
+    {% include people/pubkeys.html %}
+    {% include people/support.html %}
+    </main>
+
+    {% include base/footer.html %}
+    {% include base/script.html -%}
+  </body>
+</html>

data/_sass/base/_centos-lists.scss

@@ -0,0 +1,132 @@
+/*
+ * This file provides customization for lists.centos.org site. There is one id
+ * selector per template. The id selector name and the template name are both
+ * the same so you can correlate them.
+ */
+
+.row > {
+  hr {
+    margin-top: 3em;
+  }
+}
+
+#mmcfg {
+  h2 {
+    margin-top: 0;
+    padding-top: 0.5rem;
+
+    &:before {
+      display: none;
+    }
+  }
+  > table:nth-child(2) {
+    > tbody:nth-child(1) {
+      > tr {
+        > td {
+          padding: 0.5rem;
+        }
+      }
+      > tr:nth-child(4) {
+        > td {
+          background-color: $dark;
+          > strong {
+            > font {
+              font-size: 1rem;
+              color: #fff;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+#admlogin {
+  h4 {
+    margin-top: 0;
+    padding-top: 0;
+
+    &:before {
+      display: none;
+    }
+  }
+}
+
+#archidxhead {
+  ul > {
+    ul {
+      list-style-type: none;
+    }
+  }
+}
+
+#article {
+  pre {
+    overflow: hidden;
+    max-height: none;
+    font-size: 1rem;
+    white-space: pre-wrap;
+  }
+}
+
+#listinfo {
+  h2 {
+    margin-top: 1rem;
+    padding-top: 1rem;
+
+    &:before {
+      display: none;
+    }
+  }
+}
+
+#options {
+  h2,
+  h4 {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    &:before {
+      display: none;
+    }
+  }
+
+  h3,
+  h5 {
+    margin-top: 0;
+    padding-top: 0;
+    &:before {
+      display: none;
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Forms
+// -----------------------------------------------------------------------------
+// NOTE: The form HTML elements are generated dynamically by mailman and
+// templates provide small control over them. maintainability harder. To
+// customize forms presentation, let's extend bootstrap classes for each one
+// used.
+// -----------------------------------------------------------------------------
+input {
+  margin-bottom: 1rem;
+  &[type="text"],
+  &[type="password"] {
+    @extend .form-control;
+  }
+  &[type="checkbox"],
+  &[type="radio"] {
+    @extend .form-check-input;
+  }
+  &[type="submit"] {
+    @extend .btn, .btn-primary;
+  }
+}
+textarea {
+  margin-bottom: 1rem;
+  @extend .form-control;
+}
+select {
+  margin-bottom: 1rem;
+  @extend .form-select;
+}

data/_sass/base/_centos.scss

@@ -0,0 +1,80 @@
+// --------------------------------------------------------------------------------
+// Adjustments
+// --------------------------------------------------------------------------------
+
+main {
+  // --------------------------------------------------------------------------------
+  // Navbar and linked headings' correction.
+  //
+  // By default, when you access page headings from the page table of content
+  // (toc) links, the heading is hidden behind the navbar.  This workaround
+  // fixes the linked headings visibility issue in the page.
+  // --------------------------------------------------------------------------------
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    &::before {
+      display: block;
+      height: 6rem;
+      margin-top: -6rem;
+      visibility: hidden;
+      content: "";
+    }
+    margin-top: 3rem;
+  }
+
+  // --------------------------------------------------------------------------------
+  // Backgrounds
+  // --------------------------------------------------------------------------------
+  .bg-image {
+    background-image: url("../img/centos-motif.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .bg-light-radial-gradient {
+    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 0) 100%);
+  }
+
+  // --------------------------------------------------------------------------------
+  // DataTable
+  // --------------------------------------------------------------------------------
+  .dataTables_wrapper {
+    .dataTables_filter {
+      text-align: end;
+    }
+    .dataTables_length,
+    .dataTables_filter {
+      @extend .my-3;
+    }
+    .form-select,
+    .form-control {
+      width: auto;
+      display: inline-block;
+    }
+  }
+}
+
+header {
+  .navbar-brand {
+    .manifestation {
+      --bs-border-opacity: 0.5;
+    }
+  }
+}
+
+footer,
+.accordion-body {
+  a {
+    &:link {
+      text-decoration: none;
+    }
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

data/_sass/base/_variables.scss

@@ -0,0 +1,24 @@
+//
+// CentOS Branding
+//
+$centos-color-1: #a14f8c;
+$centos-color-2: #262577;
+$centos-color-3: #9ccd2a;
+$centos-color-4: #efa724;
+//
+// Bootstrap customization
+//
+$enable-rounded: true;
+$enable-negative-margins: true;
+$nav-pills-link-active-bg: $centos-color-1;
+$link-color: $centos-color-1;
+$primary: $centos-color-1;
+$secondary: $centos-color-4;
+$dark: #200735;
+$dropdown-dark-bg: $dark;
+$font-family-sans-serif: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-family-monospace: "Overpass Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+$line-height-base: 1.75;
+$headings-font-weight: 700;
+$breadcrumb-divider-color: #6c757d;
+$breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

data/_sass/bootstrap/_accordion.scss

@@ -147,3 +147,12 @@
     }
   }
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .accordion-button::after {
+      --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
+      --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
+    }
+  }
+}

data/_sass/bootstrap/_alert.scss

@@ -12,6 +12,7 @@
   --#{$prefix}alert-border-color: transparent;
   --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
   --#{$prefix}alert-border-radius: #{$alert-border-radius};
+  --#{$prefix}alert-link-color: inherit;
   // scss-docs-end alert-css-vars
 
   position: relative;
@@ -32,6 +33,7 @@
 // Provide class for links that match alerts
 .alert-link {
   font-weight: $alert-link-font-weight;
+  color: var(--#{$prefix}alert-link-color);
 }
 
 
@@ -54,18 +56,13 @@
 
 
 // scss-docs-start alert-modifiers
-// Generate contextual modifier classes for colorizing the alert.
-
-@each $state, $value in $theme-colors {
-  $alert-background: shift-color($value, $alert-bg-scale);
-  $alert-border: shift-color($value, $alert-border-scale);
-  $alert-color: shift-color($value, $alert-color-scale);
-
-  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
-    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
-  }
+// Generate contextual modifier classes for colorizing the alert
+@each $state in map-keys($theme-colors) {
   .alert-#{$state} {
-    @include alert-variant($alert-background, $alert-border, $alert-color);
+    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
+    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
+    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
+    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
   }
 }
 // scss-docs-end alert-modifiers

data/_sass/bootstrap/_button-group.scss

@@ -39,7 +39,7 @@
   // Prevent double borders when buttons are next to each other
   > :not(.btn-check:first-child) + .btn,
   > .btn-group:not(:first-child) {
-    margin-left: -$btn-border-width;
+    margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners
@@ -126,7 +126,7 @@
 
   > .btn:not(:first-child),
   > .btn-group:not(:first-child) {
-    margin-top: -$btn-border-width;
+    margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners

data/_sass/bootstrap/_buttons.scss

@@ -10,7 +10,7 @@
   @include rfs($btn-font-size, --#{$prefix}btn-font-size);
   --#{$prefix}btn-font-weight: #{$btn-font-weight};
   --#{$prefix}btn-line-height: #{$btn-line-height};
-  --#{$prefix}btn-color: #{$body-color};
+  --#{$prefix}btn-color: #{$btn-color};
   --#{$prefix}btn-bg: transparent;
   --#{$prefix}btn-border-width: #{$btn-border-width};
   --#{$prefix}btn-border-color: transparent;
@@ -169,8 +169,8 @@
   --#{$prefix}btn-active-border-color: transparent;
   --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
   --#{$prefix}btn-disabled-border-color: transparent;
-  --#{$prefix}btn-box-shadow: none;
-  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))};
+  --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($link-color), $link-color, 15%))};
 
   text-decoration: $link-decoration;
   @if $enable-gradients {

data/_sass/bootstrap/_card.scss

@@ -7,6 +7,8 @@
   --#{$prefix}card-spacer-y: #{$card-spacer-y};
   --#{$prefix}card-spacer-x: #{$card-spacer-x};
   --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
+  --#{$prefix}card-title-color: #{$card-title-color};
+  --#{$prefix}card-subtitle-color: #{$card-subtitle-color};
   --#{$prefix}card-border-width: #{$card-border-width};
   --#{$prefix}card-border-color: #{$card-border-color};
   --#{$prefix}card-border-radius: #{$card-border-radius};
@@ -28,6 +30,7 @@
   flex-direction: column;
   min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
   height: var(--#{$prefix}card-height);
+  color: var(--#{$prefix}body-color);
   word-wrap: break-word;
   background-color: var(--#{$prefix}card-bg);
   background-clip: border-box;
@@ -73,11 +76,13 @@
 
 .card-title {
   margin-bottom: var(--#{$prefix}card-title-spacer-y);
+  color: var(--#{$prefix}card-title-color);
 }
 
 .card-subtitle {
   margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
   margin-bottom: 0;
+  color: var(--#{$prefix}card-subtitle-color);
 }
 
 .card-text:last-child {

data/_sass/bootstrap/_carousel.scss

@@ -165,7 +165,6 @@
   margin-right: $carousel-control-width;
   margin-bottom: 1rem;
   margin-left: $carousel-control-width;
-  list-style: none;
 
   [data-bs-target] {
     box-sizing: content-box;
@@ -210,7 +209,7 @@
 
 // Dark mode carousel
 
-.carousel-dark {
+@mixin carousel-dark() {
   .carousel-control-prev-icon,
   .carousel-control-next-icon {
     filter: $carousel-dark-control-icon-filter;
@@ -224,3 +223,22 @@
     color: $carousel-dark-caption-color;
   }
 }
+
+.carousel-dark {
+  @include carousel-dark();
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    @if $color-mode-type == "media-query" {
+      .carousel {
+        @include carousel-dark();
+      }
+    } @else {
+      .carousel,
+      &.carousel {
+        @include carousel-dark();
+      }
+    }
+  }
+}