SAK-44562 library / portal - ckeditor support dark theme (sakaiprojec…

…t#8817)
msoupcoff · Dec 10, 2020 · 3080921 · 3080921
1 parent 0c38076
commit 3080921
Show file tree

Hide file tree

Showing 14 changed files with 580 additions and 55 deletions.
diff --git a/library/src/morpheus-master/sass/_defaults.scss b/library/src/morpheus-master/sass/_defaults.scss
@@ -258,10 +258,11 @@ $active-transition-hover: box-shadow 100ms ease-out !default;
 $active-transition-active: box-shadow 100ms ease-in !default;
 
 :root {
-/* topNav Main Menu */
---header-size: 50px;
+    /* topNav Main Menu */
+    --header-size: 50px;
 
-//Dashboard
---sakai-course-card-border-radius: $button-radius;
---sakai-title-bar-font-weight: $button-font-weight;
-}
+    //Dashboard
+    --sakai-course-card-border-radius: $button-radius;
+    --sakai-title-bar-font-weight: $button-font-weight;
+    --sakai-font-family: #{$font-family};
+}
diff --git a/library/src/morpheus-master/sass/base/_defaults.scss b/library/src/morpheus-master/sass/base/_defaults.scss
@@ -257,7 +257,3 @@ span.marker {
     margin: 0;
   }
 }
-html {
-    --sakai-font-family: roboto, arial, sans-serif;
-    --sakai-table-even-color: #f4f4f4;
-}
diff --git a/library/src/morpheus-master/sass/modules/connection-manager/_base.scss b/library/src/morpheus-master/sass/modules/connection-manager/_base.scss
@@ -334,8 +334,3 @@
 		height: 375px;
   }
 }
-
-.modal-backdrop {
-  background-color: #FFFFFF !important;
-  opacity: 0.4 !important;
-}
diff --git a/library/src/morpheus-master/sass/modules/editor/_base.scss b/library/src/morpheus-master/sass/modules/editor/_base.scss
@@ -13,6 +13,11 @@
 		max-width: 1200px;
 	}
 
+	.modal-content {
+		color: var(--sakai-text-color-1);
+		background: var(--sakai-background-color-1);
+	}
+
 	.sakaipreview-print {
 		@extend .fa;
 		@extend .fa-print;
@@ -32,6 +37,25 @@
 }
 .cke_dialog_contents_body .cke_tpl_list {
 	height: 430px !important;
+	background: var(--sakai-background-color-1);
+	border-color: var(--sakai-border-color);
+
+	.cke_tpl_item {
+		border-color: var(--sakai-border-color);
+		color: var(--sakai-text-color-1);
+	}
+
+	a:focus,
+	a:hover,
+	a:active {
+		.cke_tpl_item {
+			border-color: var(--sakai-border-color);
+			background: var(--sakai-background-color-2);
+		}
+	}
+}
+.cke_dialog_body .cke_dialog_close_button {
+	filter: var(--sakai-image-invert);
 }
 .cke_tpl_preview .cke_tpl_preview_img {
 	width: 50px !important;
@@ -46,7 +70,6 @@
 		text-align: center;
 	}
 }
-
 .cke_dialog_container {
 	z-index: 100010 !important;
 }
diff --git a/library/src/morpheus-master/sass/properties.scss b/library/src/morpheus-master/sass/properties.scss
@@ -0,0 +1,8 @@
+// This file should only include rules that output CSS Custom Properties
+// It is used in ckeditor. If you add themes to tool.css, add them here as well
+
+@import "themes/base";
+
+@import "themes/light";
+@import "themes/dark";
+@import "themes/custom";
diff --git a/library/src/morpheus-master/sass/themes/_custom.scss b/library/src/morpheus-master/sass/themes/_custom.scss
@@ -1,4 +1,4 @@
-/* Custom Theme */
+// Custom Theme
 
 :root {
     /////////////////////////////////////////////////////////////
@@ -31,7 +31,7 @@
     // More info about defineColorHSL in sass/themes/_base.scss
 
     // Uncomment below to define a custom color
-    // @include defineColorHSL(--custom, 183, 56%, 25%);
+    // @include defineColorHSL(--custom, 173, 46%, 35%);
 
     /////////////////////////////////////////////////////////////
 
@@ -47,34 +47,34 @@
     // Used in the top header, action buttons, etc. Commonly used as the background
     // color with white text color.
     // Uncomment below to set --sakai-primary-color-1
-    // --sakai-primary-color-1:var(--custom-6);
+    // --sakai-primary-color-1:var(--custom);
 
     // Default: A slightly darker shade of --sakai-primary-color-1
     // Used for hover effects and higher contrast with white text color
     // Uncomment below to set --sakai-primary-color-2
-    // --sakai-primary-color-2: var(--custom-7);
+    // --sakai-primary-color-2: var(--custom--darker-2);
 
     // Default: A slightly darker shade of --sakai-primary-color-2
     // Used for active, focus, selected effects
     // Uncomment below to set --sakai-primary-color-3
-    // --sakai-primary-color-3: var(--custom-8);
+    // --sakai-primary-color-3: var(--custom--darker-3);
 
     // Default: A very light tint of --sakai-primary-color-1. 
     // Suggested: A light tint of your institution's main branding color.
     // Used to highlight active/current site in favorites and active/current tool in toolmenu
     // Commonly used with white background color with white text color.
     // Uncomment below to set --sakai-active-color-1
-    // --sakai-active-color-1: var(--custom-1);
+    // --sakai-active-color-1: var(--custom--lighter-5);
 
     // Default: A slightly darker shade of --sakai-active-color-1
     // Used for hover effects and higher contrast with --sakai-text-color-3
     // Uncomment below to set --sakai-active-color-2
-    // --sakai-active-color-2: var(--custom-2);
+    // --sakai-active-color-2: var(--custom--lighter-5);
 
     // Default: A slightly darker shade of --sakai-active-color-2
     // Used for active, focus, selected effects with --sakai-text-color-3
     // Uncomment below to set --sakai-active-color-3
-    // --sakai-active-color-3: var(--custom-3);
+    // --sakai-active-color-3: var(--custom--lighter-4);
 
     // Primary background color. 
     // Suggested: white
@@ -103,7 +103,7 @@
     // what you select for --sakai-primary-color-1
     // Used in new user tutorial, user profile image border
     // Uncomment below to set --sakai-secondary-color-1
-    // --sakai-secondary-color-1: var(--custom-2);
+    // --sakai-secondary-color-1: var(--custom--darker-2);
 
     // Tertiary branding color. 
     // Suggested: A third branding color distinct from
@@ -131,7 +131,7 @@
     // Default: A much darker shade of --sakai-primary-color-1
     // Used as text color of active site in favorites, active tool in toolmenu
     // Uncomment below to set --sakai-text-color-3
-    // --sakai-text-color-3: var(--custom-9);
+    // --sakai-text-color-3: var(--custom--darker-3);
 
     // Default: A lighter shade of --sakai-text-color-1
     // Used to make elements appear disabled or "grayed out"

diff --git a/library/src/morpheus-master/sass/themes/_dark.scss b/library/src/morpheus-master/sass/themes/_dark.scss
@@ -131,6 +131,9 @@
 
     /////////////////////End main theme definition/////////////////////
 
+    // Additional dark mode variables
+    --sakai-image-invert: grayscale(100%) invert(100%);
+
     // Overrides _light.scss variables when necessary
     --top-header-background: var(--sakai-background-color-1);
     --breadcrumbs-tool-color: var(--sakai-text-color-color-3);

diff --git a/library/src/webapp-filtered/editor/ckeditor.css b/library/src/webapp-filtered/editor/ckeditor.css
@@ -0,0 +1,21 @@
+html,
+body.cke_editable {
+    background: var(--sakai-background-color-1);
+    color: var(--sakai-text-color-1);
+}
+
+caption {
+    color: var(--sakai-text-color-2);
+}
+
+.table th {
+    background-color: var(--sakai-active-color-1);
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) {
+    background-color: var(--sakai-background-color-2);
+}
+
+.table-hover > tbody > tr:hover {
+    background-color: var(--sakai-background-color-3);
+}