Merge pull request #672 from vChavezB/darkmode

Added darkmode
dgarijo · Jan 9, 2024 · 29f6a0d · 29f6a0d
2 parents aed360d + ab46449
commit 29f6a0d
Show file tree

Hide file tree

Showing 12 changed files with 579 additions and 40 deletions.
diff --git a/src/main/java/widoco/Constants.java b/src/main/java/widoco/Constants.java
@@ -732,16 +732,11 @@ public static String getIndexDocument(String resourcesFolderName, Configuration
 		String document = OPENING;
 		/* Style selection */
 		if (c.isUseW3CStyle()) {
-			document += " <link rel=\"stylesheet\" href=\"" + resourcesFolderName
-					+ "/primer.css\" media=\"screen\" />   \n" +
-					" <link rel=\"stylesheet\" href=\"" + resourcesFolderName
-					+ "/rec.css\" media=\"screen\" />   \n" + " <link rel=\"stylesheet\" href=\"" + resourcesFolderName
-					+ "/extra.css\" media=\"screen\" />   \n" + " <link rel=\"stylesheet\" href=\"" + resourcesFolderName
-					+ "/owl.css\" media=\"screen\" />   \n";
+			document += getW3CStyleDoc(resourcesFolderName);
 
 		} else {
-			document += " <link rel=\"stylesheet\" href=\"" + resourcesFolderName + "/yeti.css\" media=\"screen\" />   \n"
-					+ " <link rel=\"stylesheet\" href=\"" + resourcesFolderName + "/site.css\" media=\"screen\" />\n";
+			document += htmlStyleSheet(resourcesFolderName+"/yeti.css","screen")
+						+htmlStyleSheet(resourcesFolderName+"/site.css","screen");
 		}
 		// add a favicon (rdf logo)
 		document += "<link rel=\"icon\" type=\"image/png\" href=\"" + resourcesFolderName + "/rdf.icon\"/>";
@@ -862,7 +857,25 @@ public static String getIndexDocument(String resourcesFolderName, Configuration
 
 		return document;
 	}
-
+
+	private static String htmlStyleSheet(String resource,String media) {
+		return "<link rel=\"stylesheet\" href=\""+ resource+"\" media=\""+media+"\"/>\n";
+	}
+
+	private static String getW3CStyleDoc(String rsrcFolder){
+		return htmlStyleSheet(rsrcFolder+"/primer.css","screen")
+		+ htmlStyleSheet(rsrcFolder+"/rec.css","screen")
+		+ htmlStyleSheet(rsrcFolder+"/extra.css","screen")
+		+ htmlStyleSheet(rsrcFolder+"/owl.css","screen")
+		+ htmlStyleSheet(rsrcFolder+"/dark.css","(prefers-color-scheme: dark)")
+		+ htmlStyleSheet(rsrcFolder+"/light.css","(prefers-color-scheme: light)")
+		+ htmlStyleSheet(rsrcFolder+"/slider.css","screen")
+		+ "<meta name=\"color-scheme\" content=\"dark light\">\n"
+		+ "<script type=\"module\" src=\"resources/dark-mode-toggle.mjs\"></script>"
+		+"<div class=\"darkmode\">\n"
+		+"\t<dark-mode-toggle class=\"slider\"></dark-mode-toggle>\n"
+		+"</div>\n";
+	}
         /**
          * Function that includes all the sections as part of the index document.
          * This makes the documentation more difficult to edit, but simpler for production
@@ -884,14 +897,11 @@ public static String getUnifiedIndexDocument(String resourcesFolderName, Configu
 		String document = OPENING;
 		/* Style selection */
 		if (c.isUseW3CStyle()) {
-			document += " <link rel=\"stylesheet\" href=\"" + resourcesFolderName
-					+ "/primer.css\" media=\"screen\" />   " + " <link rel=\"stylesheet\" href=\"" + resourcesFolderName
-					+ "/rec.css\" media=\"screen\" />   " + " <link rel=\"stylesheet\" href=\"" + resourcesFolderName
-					+ "/extra.css\" media=\"screen\" />   " + " <link rel=\"stylesheet\" href=\"" + resourcesFolderName
-					+ "/owl.css\" media=\"screen\" />   ";
+			document += getW3CStyleDoc(resourcesFolderName);
+
 		} else {
-			document += " <link rel=\"stylesheet\" href=\"" + resourcesFolderName + "/yeti.css\" media=\"screen\" />   "
-					+ " <link rel=\"stylesheet\" href=\"" + resourcesFolderName + "/site.css\" media=\"screen\" />";
+			document += htmlStyleSheet(resourcesFolderName+"/yeti.css","screen")
+						+htmlStyleSheet(resourcesFolderName+"/site.css","screen");
 		}
 		// add a title to the document
 		if (c.getMainOntology().getTitle() != null && !"".equals(c.getMainOntology().getTitle()))

diff --git a/src/main/java/widoco/CreateResources.java b/src/main/java/widoco/CreateResources.java
@@ -477,6 +477,18 @@ private static void createFolderStructure(String s, Configuration c, Properties
 					new File(resources.getAbsolutePath() + File.separator + "extra.css"));
 			WidocoUtils.copyLocalResource("/lode/owl.css",
 					new File(resources.getAbsolutePath() + File.separator + "owl.css"));
+			WidocoUtils.copyLocalResource("/darkmode/dark.css",
+					new File(resources.getAbsolutePath() + File.separator + "dark.css"));
+			WidocoUtils.copyLocalResource("/darkmode/light.css",
+					new File(resources.getAbsolutePath() + File.separator + "light.css"));
+			WidocoUtils.copyLocalResource("/darkmode/slider.css",
+					new File(resources.getAbsolutePath() + File.separator + "slider.css"));
+			WidocoUtils.copyLocalResource("/darkmode/dark-mode-toggle.mjs",
+					new File(resources.getAbsolutePath() + File.separator + "dark-mode-toggle.mjs"));
+			WidocoUtils.copyLocalResource("/darkmode/sun.svg",
+					new File(resources.getAbsolutePath() + File.separator + "sun.svg"));
+			WidocoUtils.copyLocalResource("/darkmode/moon.svg",
+					new File(resources.getAbsolutePath() + File.separator + "moon.svg"));
 		} else {
 			WidocoUtils.copyLocalResource("/lode/bootstrap-yeti.css",
 					new File(resources.getAbsolutePath() + File.separator + "yeti.css"));