Basic integration of dark theme.

assets/js/components/darkTheme.js

@@ -0,0 +1,58 @@
+/**
+ * Dark theme component
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.components.darkTheme = {
+
+	/**
+	 * This variable contains the dark theme status
+	 */
+	_enabled: false,
+
+	/**
+	 * CSS element that contains dark theme CSS rules
+	 */
+	_cssElem: null,
+
+	/**
+	 * Check out whether dark theme is enabled or not
+	 * 
+	 * @return {boolean} TRUE if enabled / FALSE else
+	 */
+	isEnabled: function(){
+		return this._enabled;
+	},
+
+	/**
+	 * Specify whether dark theme should be enabled or not
+	 * 
+	 * @param {boolean} enable TRUE to enable / FALSE else
+	 */
+	setEnabled: function(enable){
+		this._enabled = enable;
+
+		//Check if the theme has to be disabled
+		if(!this._enabled){
+			if(this._cssElem != null)
+				this._cssElem.disabled = true;
+			return;
+		}
+
+		//Check if CSS element is already loaded
+		else if(this._cssElem != null)
+			this._cssElem.disabled = false;
+		
+		//We need to load dark theme
+		else {
+
+			this._cssElem = createElem2({
+				type: "link",
+				href: ComunicWeb.__config.assetsURL + "css/dark_theme.css"
+			});
+			this._cssElem.setAttribute("rel", "stylesheet");
+			document.head.appendChild(this._cssElem);
+		}
+	}
+}

assets/js/components/menuBar/authenticated.js

@@ -121,6 +121,9 @@ ComunicWeb.components.menuBar.authenticated = {
 			openPage("settings");
 		};
 
+		//Add dark theme button
+		this.addDarkThemeButton(dropdownContent);
+
 		//Add logout link
 		var logoutButton = createElem("li", dropdownContent);
 		var logoutButtonLink = createElem("a", logoutButton);
@@ -131,11 +134,54 @@ ComunicWeb.components.menuBar.authenticated = {
 		return dropdownContent;
 	},
 
+	/**
+	 * Add DarkTheme for the button
+	 * 
+	 * @param {HTMLElement} target The target for the button
+	 */
+	addDarkThemeButton: function(target){
+
+		var darkThemeButton = createElem2({
+			appendTo: target,
+			type: "li"
+		});
+
+		var darkThemeLink = createElem2({
+			appendTo: darkThemeButton,
+			type: "a",
+		});
+		
+		var darkThemeIcon = createElem2({
+			appendTo: darkThemeLink,
+			type: "span"
+		});
+
+		createElem2({
+			appendTo: darkThemeLink,
+			type: "span",
+			innerHTML: "Dark Theme"
+		});
+		
+		/**
+		 * Refresh icon states accordingly to
+		 * dark theme status
+		 */
+		var RefreshIcon = function(){
+			darkThemeIcon.className =  "fa " + (ComunicWeb.components.darkTheme.isEnabled() ? "fa-moon-o" : "fa-sun-o");
+		}
+		RefreshIcon();
+
+		darkThemeLink.addEventListener("click", function(){
+			ComunicWeb.components.darkTheme.setEnabled(!ComunicWeb.components.darkTheme.isEnabled());
+			RefreshIcon();
+		});
+	},
+
 	/**
 	 * Add alternate latest posts button 
 	 * (if the screen is too small to display "Comunic")
 	 * 
-	 * @param {HTMLElement} target The target for the ubutton
+	 * @param {HTMLElement} target The target for the button
 	 */
 	addAlternateLatestPostsButton: function(target){
 		//Create button