Examples: color mode enhancement (#38144)

* Tool bar proposal inside examples * Some examples fixes * Change appearance and position of the color mode toggler * Proposal * . --------- Co-authored-by: Mark Otto <[email protected]>
twbs · Mar 4, 2023 · b26233c · b26233c
1 parent 9a1f4ed
commit b26233c
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 40 deletions.
diff --git a/site/content/docs/5.3/examples/album-rtl/index.html b/site/content/docs/5.3/examples/album-rtl/index.html
@@ -4,16 +4,16 @@
 direction: rtl
 ---
 
-<header>
- <div class="collapse bg-dark" id="navbarHeader">
+<header data-bs-theme="dark">
+ <div class="collapse text-bg-dark" id="navbarHeader">
  <div class="container">
  <div class="row">
  <div class="col-sm-8 col-md-7 py-4">
- <h4 class="text-white">حول</h4>
+ <h4>حول</h4>
  <p class="text-body-secondary">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p>
  </div>
  <div class="col-sm-4 offset-md-1 py-4">
- <h4 class="text-white">تواصل معي</h4>
+ <h4>تواصل معي</h4>
  <ul class="list-unstyled">
  <li><a href="#" class="text-white">تابعني على تويتر</a></li>
  <li><a href="#" class="text-white">شاركني الإعجاب في فيسبوك</a></li>

diff --git a/site/content/docs/5.3/examples/album/index.html b/site/content/docs/5.3/examples/album/index.html
@@ -3,16 +3,16 @@
 title: Album example
 ---
 
-<header>
- <div class="collapse bg-dark" id="navbarHeader">
+<header data-bs-theme="dark">
+ <div class="collapse text-bg-dark" id="navbarHeader">
  <div class="container">
  <div class="row">
  <div class="col-sm-8 col-md-7 py-4">
- <h4 class="text-white">About</h4>
+ <h4>About</h4>
  <p class="text-body-secondary">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
  </div>
  <div class="col-sm-4 offset-md-1 py-4">
- <h4 class="text-white">Contact</h4>
+ <h4>Contact</h4>
  <ul class="list-unstyled">
  <li><a href="#" class="text-white">Follow on Twitter</a></li>
  <li><a href="#" class="text-white">Like on Facebook</a></li>

diff --git a/site/content/docs/5.3/examples/badges/badges.css b/site/content/docs/5.3/examples/badges/badges.css
@@ -1,13 +1,3 @@
-/*
-.text-warning {
- color: #997404 !important;
-}
-
-.text-info {
- color: #087990 !important;
-}
-*/
-
 .badge > a {
  color: inherit;
 }
diff --git a/site/content/docs/5.3/examples/carousel-rtl/index.html b/site/content/docs/5.3/examples/carousel-rtl/index.html
@@ -6,7 +6,7 @@
  - "../carousel/carousel.rtl.css"
 ---
 
-<header>
+<header data-bs-theme="dark">
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <div class="container-fluid">
  <a class="navbar-brand" href="#">شرائح العرض</a>
@@ -44,7 +44,7 @@
  </div>
  <div class="carousel-inner">
  <div class="carousel-item active">
- {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+ {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
  <div class="container">
  <div class="carousel-caption text-start">
  <h1>عنوان المثال.</h1>
@@ -54,7 +54,7 @@ <h1>عنوان المثال.</h1>
  </div>
  </div>
  <div class="carousel-item">
- {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+ {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
  <div class="container">
  <div class="carousel-caption">
  <h1>عنوان مثال آخر.</h1>
@@ -64,7 +64,7 @@ <h1>عنوان مثال آخر.</h1>
  </div>
  </div>
  <div class="carousel-item">
- {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+ {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
  <div class="container">
  <div class="carousel-caption text-end">
  <h1>واحد أكثر لقياس جيد.</h1>
@@ -94,19 +94,19 @@ <h1>واحد أكثر لقياس جيد.</h1>
  <!-- Three columns of text below the carousel -->
  <div class="row">
  <div class="col-lg-4">
- {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
  <h2 class="fw-normal">عنوان</h2>
  <p>تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.</p>
  <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
  </div><!-- /.col-lg-4 -->
  <div class="col-lg-4">
- {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
  <h2 class="fw-normal">عنوان آخر</h2>
  <p>إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.</p>
  <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
  </div><!-- /.col-lg-4 -->
  <div class="col-lg-4">
- {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
  <h2 class="fw-normal">عنوان ثالث لتأكيد المعلومة</h2>
  <p>بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.</p>
  <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
@@ -124,7 +124,7 @@ <h2 class="featurette-heading fw-normal lh-1">العنوان الأول المم
  <p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p>
  </div>
  <div class="col-md-5">
- {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
  </div>
  </div>
 
@@ -136,7 +136,7 @@ <h2 class="featurette-heading fw-normal lh-1">أوه نعم، هذا جيد. <sp
  <p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p>
  </div>
  <div class="col-md-5 order-md-1">
- {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
  </div>
  </div>
 
@@ -148,7 +148,7 @@ <h2 class="featurette-heading fw-normal lh-1">وأخيرًا، هذا. <span cla
  <p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p>
  </div>
  <div class="col-md-5">
- {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
  </div>
  </div>
 

diff --git a/site/content/docs/5.3/examples/carousel/carousel.css b/site/content/docs/5.3/examples/carousel/carousel.css
@@ -5,7 +5,7 @@
 body {
  padding-top: 3rem;
  padding-bottom: 3rem;
- color: #5a5a5a;
+ color: rgb(var(--bs-tertiary-color-rgb));
 }
 
 

diff --git a/site/content/docs/5.3/examples/carousel/carousel.rtl.css b/site/content/docs/5.3/examples/carousel/carousel.rtl.css
@@ -5,7 +5,7 @@
 body {
  padding-top: 3rem;
  padding-bottom: 3rem;
- color: #5a5a5a;
+ color: rgb(var(--bs-tertiary-color-rgb));
 }
 
 

diff --git a/site/content/docs/5.3/examples/carousel/index.html b/site/content/docs/5.3/examples/carousel/index.html
@@ -5,7 +5,7 @@
  - "carousel.css"
 ---
 
-<header>
+<header data-bs-theme="dark">
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <div class="container-fluid">
  <a class="navbar-brand" href="#">Carousel</a>
@@ -43,7 +43,7 @@
  </div>
  <div class="carousel-inner">
  <div class="carousel-item active">
- {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+ {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
  <div class="container">
  <div class="carousel-caption text-start">
  <h1>Example headline.</h1>
@@ -53,7 +53,7 @@ <h1>Example headline.</h1>
  </div>
  </div>
  <div class="carousel-item">
- {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+ {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
  <div class="container">
  <div class="carousel-caption">
  <h1>Another example headline.</h1>
@@ -63,7 +63,7 @@ <h1>Another example headline.</h1>
  </div>
  </div>
  <div class="carousel-item">
- {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+ {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
  <div class="container">
  <div class="carousel-caption text-end">
  <h1>One more for good measure.</h1>
@@ -93,19 +93,19 @@ <h1>One more for good measure.</h1>
  <!-- Three columns of text below the carousel -->
  <div class="row">
  <div class="col-lg-4">
- {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
  <h2 class="fw-normal">Heading</h2>
  <p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
  <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
  </div><!-- /.col-lg-4 -->
  <div class="col-lg-4">
- {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
  <h2 class="fw-normal">Heading</h2>
  <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
  <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
  </div><!-- /.col-lg-4 -->
  <div class="col-lg-4">
- {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
  <h2 class="fw-normal">Heading</h2>
  <p>And lastly this, the third column of representative placeholder content.</p>
  <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
@@ -123,7 +123,7 @@ <h2 class="featurette-heading fw-normal lh-1">First featurette heading. <span cl
  <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
  </div>
  <div class="col-md-5">
- {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
  </div>
  </div>
 
@@ -135,7 +135,7 @@ <h2 class="featurette-heading fw-normal lh-1">Oh yeah, it’s that good. <span c
  <p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
  </div>
  <div class="col-md-5 order-md-1">
- {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
  </div>
  </div>
 
@@ -147,7 +147,7 @@ <h2 class="featurette-heading fw-normal lh-1">And lastly, this one. <span class=
  <p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
  </div>
  <div class="col-md-5">
- {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
  </div>
  </div>