dark mode fixes

Author: gitbrent

demos/browser/css/style.css

@@ -172,16 +172,9 @@ div.iconSvg.refresh {
 }
 
 .tabHtmlToPpt thead th {
-	background: var(--light);
-	color: white;
 	font-weight: normal;
 }
 
-.tabHtmlToPpt tbody td {
-	background: var(--light);
-	color: var(--dark);
-}
-
 .tabHtmlToPpt th,
 .tabHtmlToPpt td {
 	border: 1px solid var(--light);

demos/browser/index.html

@@ -107,13 +107,13 @@ <h3 class="text-primary">Please Wait</h3>
 				</li>
 			</ul>
 			<form class="form-inline my-2 my-lg-0">
-				<button type="button" class="btn btn-outline-secondary mx-2 my-2 my-sm-0" onClick="window.open('https://github.com/gitbrent/PptxGenJS/releases')">
+				<button type="button" class="btn btn-outline-primary mx-2 my-2 my-sm-0" onClick="window.open('https://github.com/gitbrent/PptxGenJS/releases')">
 					Download
 				</button>
-				<button type="button" class="btn btn-outline-secondary mx-2 my-2 my-sm-0" onClick="window.open('https://github.com/gitbrent/PptxGenJS')">
+				<button type="button" class="btn btn-outline-primary mx-2 my-2 my-sm-0" onClick="window.open('https://github.com/gitbrent/PptxGenJS')">
 					GitHub Project
 				</button>
-				<button type="button" class="btn btn-outline-secondary mx-2 my-2 my-sm-0" onClick="window.open('https://gitbrent.github.io/PptxGenJS/docs/installation.html')">
+				<button type="button" class="btn btn-outline-primary mx-2 my-2 my-sm-0" onClick="window.open('https://gitbrent.github.io/PptxGenJS/docs/installation.html')">
 					API Documentation
 				</button>
 			</form>
@@ -360,7 +360,7 @@ <h6 class="card-header">Plain/Unstyled Table</h6>
 								<h6 class="card-header">CSS via <code>&lt;style&gt;</code></h6>
 								<div class="card-body">
 									<table id="tabInheritStyle" class="tabHtmlToPpt w-100">
-										<thead>
+										<thead class="table-light">
 											<tr>
 												<th>Company</th>
 												<th>Contact</th>
@@ -402,7 +402,7 @@ <h5 class="mt-4 text-primary bde-arrow-cont" onclick="$(this).next('div').toggle
 						<h6 class="card-header">Colspan</h6>
 						<div class="card-body">
 							<table id="tabColspan" class="tabHtmlToPpt w-100">
-								<thead>
+								<thead class="table-light">
 									<tr>
 										<th class="tg-header">First Name</th>
 										<th class="tg-header">Last Name</th>
@@ -439,7 +439,7 @@ <h6 class="card-header">Colspan</h6>
 						<h6 class="card-header">Rowspan</h6>
 						<div class="card-body">
 							<table id="tabRowspan" class="tabHtmlToPpt w-100">
-								<thead>
+								<thead class="table-light">
 									<tr>
 										<th class="tg-header">Last Name</th>
 										<th class="tg-header">First Name</th>
@@ -471,7 +471,7 @@ <h6 class="card-header">Rowspan</h6>
 						<h6 class="card-header">Rowspan and Colspan</h6>
 						<div class="card-body">
 							<table id="tabRowColspan" class="tabHtmlToPpt w-100">
-								<thead>
+								<thead class="table-light">
 									<tr>
 										<th class="tg-header" colspan="2">Name</th>
 										<th class="tg-header" rowspan="2">Count</th>
@@ -510,7 +510,7 @@ <h5 class="mt-4 text-primary bde-arrow-cont" onclick="$(this).next('div').toggle
 						<h6 class="card-header">Example: Lots of Single-Line Rows</h6>
 						<div class="card-body">
 							<table id="tabLotsOfLines" class="tabHtmlToPpt w-100">
-								<thead>
+								<thead class="table-light">
 									<tr>
 										<th class="tg-header">A</th>
 										<th class="tg-header">B</th>
@@ -529,7 +529,7 @@ <h6 class="card-header">Example: Lots of Single-Line Rows</h6>
 						<h6 class="card-header">Example: Paging needed due to cell with large amount of text</h6>
 						<div class="card-body">
 							<table id="tabLargeCellText" class="tabHtmlToPpt">
-								<thead>
+								<thead class="table-light">
 									<tr>
 										<th class="tg-header">Executive Status</th>
 									</tr>