Audit dark mode theme skins and check for [ch15847] (#9102)

Co-authored-by: snipe <snipe@snipe.net>

public/mix-manifest.json

@@ -6,28 +6,16 @@
     "/css/dist/skins/skin-blue.css": "/css/dist/skins/skin-blue.css?id=a5c05d669800b5f5afa1",
     "/css/dist/skins/skin-red.css": "/css/dist/skins/skin-red.css?id=1d5974e034b61b5795ec",
     "/css/dist/skins/skin-contrast.css": "/css/dist/skins/skin-contrast.css?id=cf23e72b9c963c5ab23a",
-    "/css/dist/skins/skin-green.css": "/css/dist/skins/skin-green.css?id=76d0cc15e24e6a03fd2f",
-    "/css/dist/skins/skin-green-dark.css": "/css/dist/skins/skin-green-dark.css?id=97a05b4e3c6f0e31b895",
-    "/css/dist/skins/skin-black.css": "/css/dist/skins/skin-black.css?id=d3c953fe66305cef3b54",
-    "/css/dist/skins/skin-black-dark.css": "/css/dist/skins/skin-black-dark.css?id=c2d8517bfd68b3bf3509",
-    "/css/dist/skins/skin-red-dark.css": "/css/dist/skins/skin-red-dark.css?id=51a2ad946665800523fb",
-    "/css/dist/skins/skin-purple.css": "/css/dist/skins/skin-purple.css?id=56d008e86c006d37bc23",
-    "/css/dist/skins/skin-purple-dark.css": "/css/dist/skins/skin-purple-dark.css?id=7af6dbd5a265f3fe205e",
-    "/css/dist/skins/skin-yellow.css": "/css/dist/skins/skin-yellow.css?id=2b17e31c820ef66db5a1",
-    "/css/dist/skins/skin-yellow-dark.css": "/css/dist/skins/skin-yellow-dark.css?id=36169e10a1d74507c371",
-    "/css/dist/skins/skin-blue-dark.css": "/css/dist/skins/skin-blue-dark.css?id=86ff7070f892baa764c7",
-    "/css/dist/skins/skin-orange-dark.css": "/css/dist/skins/skin-orange-dark.css?id=f12f9af189df0ff1c615",
-    "/css/dist/skins/skin-orange.css": "/css/dist/skins/skin-orange.css?id=4bf9e22405edb2dc2b76",
     "/css/dist/all.css": "/css/dist/all.css?id=fc64989106daf3be016b",
     "/css/blue.png": "/css/blue.png?id=4c85d6a97173123bd14a",
     "/css/blue@2x.png": "/css/blue@2x.png?id=62c67c6a822439e8a4ac",
-    "/css/dist/skins/skin-green-dark.min.css": "/css/dist/skins/skin-green-dark.min.css?id=97a05b4e3c6f0e31b895",
-    "/css/dist/skins/skin-black-dark.min.css": "/css/dist/skins/skin-black-dark.min.css?id=c2d8517bfd68b3bf3509",
-    "/css/dist/skins/skin-blue-dark.min.css": "/css/dist/skins/skin-blue-dark.min.css?id=86ff7070f892baa764c7",
-    "/css/dist/skins/skin-yellow-dark.min.css": "/css/dist/skins/skin-yellow-dark.min.css?id=36169e10a1d74507c371",
-    "/css/dist/skins/skin-red-dark.min.css": "/css/dist/skins/skin-red-dark.min.css?id=51a2ad946665800523fb",
-    "/css/dist/skins/skin-purple-dark.min.css": "/css/dist/skins/skin-purple-dark.min.css?id=7af6dbd5a265f3fe205e",
-    "/css/dist/skins/skin-orange-dark.min.css": "/css/dist/skins/skin-orange-dark.min.css?id=f12f9af189df0ff1c615",
+    "/css/dist/skins/skin-green-dark.min.css": "/css/dist/skins/skin-green-dark.min.css?id=6843dc80c6b201c4a7db",
+    "/css/dist/skins/skin-black-dark.min.css": "/css/dist/skins/skin-black-dark.min.css?id=97d81897063e94094a2a",
+    "/css/dist/skins/skin-blue-dark.min.css": "/css/dist/skins/skin-blue-dark.min.css?id=928bfe8035be1497e83b",
+    "/css/dist/skins/skin-yellow-dark.min.css": "/css/dist/skins/skin-yellow-dark.min.css?id=ccdd91178df4c10811e9",
+    "/css/dist/skins/skin-red-dark.min.css": "/css/dist/skins/skin-red-dark.min.css?id=679ab6aeba9c278a9051",
+    "/css/dist/skins/skin-purple-dark.min.css": "/css/dist/skins/skin-purple-dark.min.css?id=915206c9df022fc5037a",
+    "/css/dist/skins/skin-orange-dark.min.css": "/css/dist/skins/skin-orange-dark.min.css?id=539f691ddc970f867c49",
     "/css/dist/skins/skin-contrast.min.css": "/css/dist/skins/skin-contrast.min.css?id=cf23e72b9c963c5ab23a",
     "/css/dist/signature-pad.css": "/css/dist/signature-pad.css?id=6a89d3cd901305e66ced",
     "/css/build/signature-pad.min.css": "/css/build/signature-pad.min.css?id=d41d8cd98f00b204e980",

resources/assets/less/skins/skin-black-dark.less

@@ -108,13 +108,14 @@ a {
   --background: #222;
   --back-main: #333;
   --back-sub: #444;
+  --back-sub-alt: #dfd9d8;
   --button-default: darken(@black, 15%);
   --button-primary: darken(@black, 25%);
   --button-hover: darken(@black, 30%);
   --header: @black; /* Use same as Header picker */
   --text-main: #BBB;
   --text-sub: #9b9b9b;
-  --link: lighten(@black, 30%); /* Use same as Header picker, lighten by 70% */
+  --link: #AAA; /* Use same as Header picker, lighten by 70% */
   --visited-link: lighten(@black, 40%); /* Use same as Header picker, lighten by 70% */
   --hover-link: lighten(@black, 45%); /* Use same as Header picker, lighten by 70% */
   --nav-link: #FFF; /* Use same as Header picker */
@@ -164,7 +165,20 @@ a:hover {
     color: var(--nav-link) !important;
   }
 }
+a:link.btn-default{
+  color: var(--nav-link);
+}
+/* Trying to figure out a way of having links different shades based on what row they are on (even/odd).
+a unique challenge for this dark mode skin.
+Probably writing the specificity for this incorrectly. --Godfrey Martinez 02/04/21
 
+.table-striped>tbody>tr:nth-of-type(even)>a:link{
+  color:#000d07;
+}
+.table-striped>tbody>tr:nth-of-type(odd)>a:link{
+  color:#bfbfbf;
+
+}*/
 
 #accessoriesTable>tbody>tr>td>nobr>a>i.fa {
   color: var(--text-main);
@@ -189,20 +203,20 @@ body {
 }
 .btn-default{
   background-color: var(--button-default);
-  color: var(--link);
+  color: var(--nav-link);
 }
 
 .btn-default dropdown-toggle {
   background-color: var(--button-default);
-  color: var(--link);
+  color: var(--nav-link);
 }
 
 .btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active {
   background-color: var(--button-hover);
-  color: var(--link);
+  color: var(--nav-link);
 }
 .btn-primary, .btn-primary.hover, .btn-primary:active, .text-black {
-  color: var(--text-main)!important;
+  color: var(--nav-link)!important;
 }
 .btn-primary:hover {
   background-color: var(--button-primary);
@@ -334,6 +348,11 @@ input[type=text], input[type=search] {
 }
 .table-striped>tbody>tr:nth-of-type(odd) {
   background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.table-striped>tbody>tr:nth-of-type(even){
+  background-color: var(--back-sub-alt);
+  color: var(--header);
 }
 #webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa, .box-body, .box-footer, .box-header {
   color: var(--text-main);

resources/assets/less/skins/skin-blue-dark.less

@@ -108,15 +108,16 @@ a {
   --background: #222;
   --back-main: #333;
   --back-sub: #444;
+  --back-sub-alt: #dfd9d8;
   --button-default: darken(@blue, 15%);
   --button-primary: darken(@blue, 25%);
   --button-hover: darken(@blue, 30%);
   --header: @blue; /* Use same as Header picker */
   --text-main: #BBB;
   --text-sub: #9b9b9b;
-  --link: lighten(@blue, 30%); /* Use same as Header picker, lighten by 70% */
-  --visited-link: lighten(@blue, 40%); /* Use same as Header picker, lighten by 70% */
-  --hover-link: lighten(@blue, 45%); /* Use same as Header picker, lighten by 70% */
+  --link: #1978D4; /* Use same as Header picker, lighten by 70% */
+  --visited-link: #3c8dbc ; /* Use same as Header picker, lighten by 70% */
+  --hover-link: #4B77BE; /* Use same as Header picker, lighten by 70% */
   --nav-link: #FFF; /* Use same as Header picker */
   --light-link: #fff; /* Use same as Header picker */
 }
@@ -239,6 +240,9 @@ body {
   background-color: var(--back-main);
   color: var(--nav-link);
 }
+.fixed-table-body thead th .th-inner{
+  color: var(--nav-link);
+}
 .form-control {
   background-color: var(--back-main);
   color: var(--text-main);
@@ -335,6 +339,10 @@ input[type=text], input[type=search] {
 .table-striped>tbody>tr:nth-of-type(odd) {
   background-color: var(--back-sub);
 }
+.table-striped>tbody>tr:nth-of-type(even){
+  background-color: var(--back-sub-alt);
+  color: var(--header);
+}
 #webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa, .box-body, .box-footer, .box-header {
   color: var(--text-main);
 }

resources/assets/less/skins/skin-green-dark.less

@@ -108,15 +108,16 @@ a {
   --background: #222;
   --back-main: #333;
   --back-sub: #444;
+  --back-sub-alt: #dfd9d8;
   --button-default: darken(@green, 15%);
   --button-primary: darken(@green, 25%);
   --button-hover: darken(@green, 30%);
   --header: @green; /* Use same as Header picker */
   --text-main: #BBB;
   --text-sub: #9b9b9b;
-  --link: lighten(@green, 30%); /* Use same as Header picker, lighten by 70% */
-  --visited-link: lighten(@green, 40%); /* Use same as Header picker, lighten by 70% */
-  --hover-link: lighten(@green, 45%); /* Use same as Header picker, lighten by 70% */
+  --link: #28A228; /* Use same as Header picker, lighten by 70% */
+  --visited-link: #5D995D; /* Use same as Header picker, lighten by 70% */
+  --hover-link: #00AA00; /* Use same as Header picker, lighten by 70% */
   --nav-link: #FFF; /* Use same as Header picker */
   --light-link: #fff; /* Use same as Header picker */
 }
@@ -239,6 +240,9 @@ body {
   background-color: var(--back-main);
   color: var(--nav-link);
 }
+.fixed-table-body thead th .th-inner{
+  color: var(--nav-link);
+}
 .form-control {
   background-color: var(--back-main);
   color: var(--text-main);
@@ -335,6 +339,10 @@ input[type=text], input[type=search] {
 .table-striped>tbody>tr:nth-of-type(odd) {
   background-color: var(--back-sub);
 }
+.table-striped>tbody>tr:nth-of-type(even){
+  background-color: var(--back-sub-alt);
+  color: var(--header);
+}
 #webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa, .box-body, .box-footer, .box-header {
   color: var(--text-main);
 }

resources/assets/less/skins/skin-orange-dark.less

@@ -108,15 +108,16 @@ a {
   --background: #222;
   --back-main: #333;
   --back-sub: #444;
+  --back-sub-alt: #dfd9d8;
   --button-default: darken(@orange, 15%);
   --button-primary: darken(@orange, 25%);
   --button-hover: darken(@orange, 30%);
   --header: @orange; /* Use same as Header picker */
   --text-main: #BBB;
   --text-sub: #9b9b9b;
-  --link: lighten(@orange, 30%); /* Use same as Header picker, lighten by 70% */
-  --visited-link: lighten(@orange, 40%); /* Use same as Header picker, lighten by 70% */
-  --hover-link: lighten(@orange, 45%); /* Use same as Header picker, lighten by 70% */
+  --link: #D43900; /* Use same as Header picker, lighten by 70% */
+  --visited-link: #D46A43; /* Use same as Header picker, lighten by 70% */
+  --hover-link: #FF4500; /* Use same as Header picker, lighten by 70% */
   --nav-link: #FFF; /* Use same as Header picker */
   --light-link: #fff; /* Use same as Header picker */
 }
@@ -189,20 +190,22 @@ body {
 }
 .btn-default{
   background-color: var(--button-default);
-  color: var(--link);
+  color: var(--nav-link);
+}
+a:link.btn-default{
+  color: var(--nav-link);
 }
-
 .btn-default dropdown-toggle {
   background-color: var(--button-default);
-  color: var(--link);
+  color: var(--nav-link);
 }
 
 .btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active {
   background-color: var(--button-hover);
-  color: var(--link);
+  color: var(--background);
 }
 .btn-primary, .btn-primary.hover, .btn-primary:active, .text-orange {
-  color: var(--text-main)!important;
+  color: var(--nav-link)!important;
 }
 .btn-primary:hover {
   background-color: var(--button-primary);
@@ -239,6 +242,9 @@ body {
   background-color: var(--back-main);
   color: var(--nav-link);
 }
+.fixed-table-body thead th .th-inner{
+  color: var(--nav-link);
+}
 .form-control {
   background-color: var(--back-main);
   color: var(--text-main);
@@ -335,6 +341,10 @@ input[type=text], input[type=search] {
 .table-striped>tbody>tr:nth-of-type(odd) {
   background-color: var(--back-sub);
 }
+.table-striped>tbody>tr:nth-of-type(even){
+  background-color: var(--back-sub-alt);
+  color: var(--header);
+}
 #webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa, .box-body, .box-footer, .box-header {
   color: var(--text-main);
 }

resources/assets/less/skins/skin-purple-dark.less

@@ -108,15 +108,16 @@ a {
   --background: #222;
   --back-main: #333;
   --back-sub: #444;
+  --back-sub-alt: #dfd9d8;
   --button-default: darken(@purple, 15%);
   --button-primary: darken(@purple, 25%);
   --button-hover: darken(@purple, 30%);
   --header: @purple; /* Use same as Header picker */
   --text-main: #BBB;
   --text-sub: #9b9b9b;
-  --link: lighten(@purple, 30%); /* Use same as Header picker, lighten by 70% */
-  --visited-link: lighten(@purple, 40%); /* Use same as Header picker, lighten by 70% */
-  --hover-link: lighten(@purple, 45%); /* Use same as Header picker, lighten by 70% */
+  --link: #9370DB; /* Use same as Header picker, lighten by 70% */
+  --visited-link: #B93CF6; /* Use same as Header picker, lighten by 70% */
+  --hover-link: #BF55EC; /* Use same as Header picker, lighten by 70% */
   --nav-link: #FFF; /* Use same as Header picker */
   --light-link: #fff; /* Use same as Header picker */
 }
@@ -165,7 +166,9 @@ a:hover {
   }
 }
 
-
+a:link.btn-default{
+  color: var(--nav-link);
+}
 #accessoriesTable>tbody>tr>td>nobr>a>i.fa {
   color: var(--text-main);
 }
@@ -189,20 +192,20 @@ body {
 }
 .btn-default{
   background-color: var(--button-default);
-  color: var(--link);
+  color: var(--nav-link);
 }
 
 .btn-default dropdown-toggle {
   background-color: var(--button-default);
-  color: var(--link);
+  color: var(--nav-link);
 }
 
 .btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active {
   background-color: var(--button-hover);
-  color: var(--link);
+  color: var(--nav-link);
 }
 .btn-primary, .btn-primary.hover, .btn-primary:active, .text-purple {
-  color: var(--text-main)!important;
+  color: var(--nav-link)!important;
 }
 .btn-primary:hover {
   background-color: var(--button-primary);
@@ -239,6 +242,9 @@ body {
   background-color: var(--back-main);
   color: var(--nav-link);
 }
+.fixed-table-body thead th .th-inner{
+  color: var(--nav-link);
+}
 .form-control {
   background-color: var(--back-main);
   color: var(--text-main);
@@ -335,6 +341,10 @@ input[type=text], input[type=search] {
 .table-striped>tbody>tr:nth-of-type(odd) {
   background-color: var(--back-sub);
 }
+.table-striped>tbody>tr:nth-of-type(even){
+  background-color: var(--back-sub-alt);
+  color: var(--header);
+}
 #webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa, .box-body, .box-footer, .box-header {
   color: var(--text-main);
 }

resources/assets/less/skins/skin-red-dark.less

@@ -108,15 +108,17 @@ a {
   --background: #222;
   --back-main: #333;
   --back-sub: #444;
+  --back-sub-alt: #dfd9d8;
   --button-default: darken(@red, 15%);
   --button-primary: darken(@red, 25%);
   --button-hover: darken(@red, 30%);
   --header: @red; /* Use same as Header picker */
   --text-main: #BBB;
+  --text-alt: #222;
   --text-sub: #9b9b9b;
-  --link: lighten(@red, 30%); /* Use same as Header picker, lighten by 70% */
-  --visited-link: lighten(@red, 40%); /* Use same as Header picker, lighten by 70% */
-  --hover-link: lighten(@red, 45%); /* Use same as Header picker, lighten by 70% */
+  --link: #e00000; /* Use same as Header picker, lighten by 70% */
+  --visited-link: #D24D57; /* Use same as Header picker, lighten by 70% */
+  --hover-link: #D24D57; /* Use same as Header picker, lighten by 70% */
   --nav-link: #FFF; /* Use same as Header picker */
   --light-link: #fff; /* Use same as Header picker */
 }
@@ -188,7 +190,7 @@ body {
   color: var(--header);
 }
 .btn-default{
-  background-color: var(--button-default);
+  background-color: var(--back-sub);
   color: var(--link);
 }
 
@@ -239,6 +241,9 @@ body {
   background-color: var(--back-main);
   color: var(--nav-link);
 }
+.fixed-table-body thead th .th-inner{
+  color: var(--nav-link);
+}
 .form-control {
   background-color: var(--back-main);
   color: var(--text-main);
@@ -335,6 +340,10 @@ input[type=text], input[type=search] {
 .table-striped>tbody>tr:nth-of-type(odd) {
   background-color: var(--back-sub);
 }
+.table-striped>tbody>tr:nth-of-type(even){
+  background-color: var(--back-sub-alt);
+  color: var(--text-alt);
+}
 #webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa, .box-body, .box-footer, .box-header {
   color: var(--text-main);
 }

resources/assets/less/skins/skin-yellow-dark.less

@@ -108,6 +108,7 @@ a {
   --background: #222;
   --back-main: #333;
   --back-sub: #444;
+  --back-sub-alt: #dfd9d8;
   --button-default: darken(@yellow, 15%);
   --button-primary: darken(@yellow, 25%);
   --button-hover: darken(@yellow, 30%);
@@ -152,7 +153,9 @@ a:visited {
 a:hover {
   color: var(--hover-link);
 }
-
+a:link.btn-default{
+  color: var(--nav-link);
+}
 .btn-primary.hover {
   color: var(--nav-link);
 }
@@ -194,19 +197,19 @@ body {
 
 .btn-default dropdown-toggle {
   background-color: var(--button-default);
-  color: var(--link);
+  color: var(--nav-link);
 }
 
 .btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active {
   background-color: var(--button-hover);
-  color: var(--link);
+  color: var(--nav-link);
 }
 .btn-primary, .btn-primary.hover, .btn-primary:active, .text-yellow {
-  color: var(--text-main)!important;
+  color: var(--nav-link)!important;
 }
 .btn-primary:hover {
   background-color: var(--button-primary);
-  color: var(--link)!important;
+  color: var(--nav-link)!important;
 }
 #componentsTable>tbody>tr>td>nobr>a>i.fa {
   color: var(--text-main);
@@ -335,6 +338,10 @@ input[type=text], input[type=search] {
 .table-striped>tbody>tr:nth-of-type(odd) {
   background-color: var(--back-sub);
 }
+.table-striped>tbody>tr:nth-of-type(even){
+  background-color: var(--back-sub-alt);
+  color: var(--header);
+}
 #webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa, .box-body, .box-footer, .box-header {
   color: var(--text-main);
 }