added basic theaming...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

css/grid-n-view.css

@@ -20,9 +20,21 @@
 	--gallery-secondary-color: silver;
 	--gallery-background-color: white;
 
+	--lightbox-text-color: black;
 	--lightbox-background-color: white;
 }
 
+.gallery-dark {
+	--gallery-text-color: silver;
+	--gallery-secondary-color: gray;
+	--gallery-background-color: black;
+}
+
+.lightbox-dark {
+	--lightbox-text-color: silver;
+	--lightbox-background-color: black;
+}
+
 
 
 /****************************************************** Scrolling ****/
@@ -40,6 +52,9 @@
 }
 body {
 	overflow-y: scroll;
+
+	color: var(--gallery-text-color);
+	background: var(--gallery-background-color);
 }
 
 
@@ -55,6 +70,9 @@ body {
 
 	margin-left: var(--gallery-scrollbar-width);
 	margin-right: 0;
+
+	color: var(--gallery-text-color);
+	background: var(--gallery-background-color);
 }
 .gallery img {
 	height: 300px;
@@ -82,6 +100,7 @@ body {
 
 	text-align: center;
 
+	color: var(--lightbox-text-color);
 	background: var(--lightbox-background-color);
 }
 .gallery .lightbox.show-caption:after {

grid-n-view.js

@@ -1,3 +1,20 @@
+//=====================================================================
+//
+//
+//
+// TODO:
+// 	- selection
+// 	- drag-n-drop
+// 	- sort/move
+// 	- crop selection
+// 	- full screen
+// 	- make the gallery into a web component
+//
+//
+//=====================================================================
+
+
+
 //---------------------------------------------------------------------
 
 // XXX need to account for scrollbar -- add hysteresis???