Dark mode

code/libraries/joomlatools/component/koowa/resources/assets/scss/admin-dark.scss

@@ -0,0 +1,103 @@
+//import our dark variables here, set by default before kodekit/admin-ui has the chance to set them
+@import "../../../../../../../../../kodekit-ui/src/scss/admin/tools/_dark_variables";
+// ==========================================================================
+// Kodekit UI
+// ==========================================================================
+
+@import "../../../../../../../../../kodekit-ui/src/scss/admin-ui";
+
+
+// ==========================================================================
+// Joomla styling
+// ==========================================================================
+
+@import "icomoon";
+@import "styles";
+
+button{
+  span.k-scopebar__item--filter__title, span.k-scopebar__item--filter__icon{
+    color: $k-secondary-color;
+  }
+}
+
+ul.select2-selection__rendered{
+  background-color: $k-primary-plus-5-color;
+}
+
+.k-inline-modal{
+  color: $k-secondary-color !important;
+  background-color: $k-primary-plus-7-color !important;
+}
+
+.k-inline-modal__title {
+  color: $k-secondary-color !important;
+}
+
+.k-ui-namespace .k-scopebar__item--search .k-search__submit{
+  color: $k-secondary-color  !important;
+}
+
+.select2-results__option{
+  color: $k-secondary-color;
+}
+
+.select2-dropdown {
+  background-color: $k-primary-plus-7-color !important;
+  color: $k-secondary-color !important;
+}
+
+.k-ui-namespace .k-pagination .k-pagination__pages > li > a{
+  background-color: $k-primary-plus-7-color  !important;
+  color: $k-secondary-color !important;
+}
+
+.k-ui-namespace .k-pagination__pages > li.k-is-disabled > span {
+  background-color: $k-primary-plus-7-color  !important;
+  color: $k-secondary-color !important;
+}
+
+.k-ui-namespace .k-pagination__pages > li.k-is-active > a {
+  background-color: $k-accent-color !important;
+}
+
+
+.datepicker td:nth-child(n), .datepicker th:nth-child(n){
+  color: $k-secondary-color;
+}
+
+.k-upload{
+  background-color: $k-primary-plus-7-color !important;
+  border: 1px solid $k-primary-min-2-color !important;
+  .k-upload__content-wrapper {
+    background-color: $k-primary-plus-7-color !important;
+    color: $k-secondary-color !important;
+    border-bottom: none;
+  }
+  .k-upload__info__body{
+    background-color: $k-primary-plus-7-color !important;
+    color: $k-secondary-color !important;
+    border-top: 1px solid $k-primary-min-2-color !important;
+  }
+}
+
+.k-upload:after{
+  background-color: $k-primary-plus-7-color !important;
+  color: $k-secondary-color !important;
+}
+
+.mce-container *{
+  background-color: $k-primary-plus-7-color !important;
+  color: $k-secondary-color !important;
+}
+
+.mce-panel{
+  border: none !important;
+}
+
+#tinymce{
+  background-color: $k-primary-plus-9-color !important;
+}
+
+.access-rules .table-striped tbody>tr:nth-child(odd)>td{
+  background-color: $k-primary-plus-7-color !important;
+}

code/libraries/joomlatools/library/template/helper/ui.php

@@ -102,8 +102,15 @@ public function styles($config = array())
             $config->css_file = sprintf('%scss/%s.css', (empty($config->folder) ? '' : $config->folder.'/'), $config->file);
         }
 
-        if ($config->css_file) {
-            $html .= '<ktml:style src="assets://'.$config->css_file.'" />';
+        if ($config->css_file)
+        {
+            $light = $config->css_file;
+            $dark = str_replace('admin.', 'admin-dark.', $config->css_file);
+
+            //$html .= ''
+            $html .= '<ktml:style src="assets://' . $light . '" />';
+            $html .= '<ktml:style src="assets://' . $light . '" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)" />';
+            $html .= '<ktml:style src="assets://' . $dark . '" media="(prefers-color-scheme: dark)" />';
         }
 
         return $html;

mason.js

@@ -113,6 +113,7 @@ async function css() {
 async function files() {
     await mason.fs.copyFolderContents(`${KUIPath}/css`, `${libraryAssetsPath}/css`);
     await mason.fs.copyFolderContents(`${KUIPath}/fonts`, `${libraryAssetsPath}/fonts`);
+    await mason.fs.copyFolderContents(`${KUIPath}/fonts`,`${koowaAssetsPath}/fonts`);
     await mason.fs.copyFolderContents(`${KUIPath}/js`, `${libraryAssetsPath}/js`);
 }