add a new .css for background colour theme but leave it at it's inactive state for the moment

Author: DininduSenanayake

docs/stylesheets/background_colors.css

@@ -0,0 +1,50 @@
+
+:root {
+  /* Default color shades */
+  --md-default-fg-color:               #0f1f47;
+  --md-default-fg-color--light:        #1a0206;
+  --md-default-fg-color--lighter:      rgba(11,33,57,0.5);
+  --md-default-fg-color--lightest:     rgba(11,33,57,0.1);
+
+  /* Primary color shades - WHITE THEME */
+  --md-primary-fg-color:               #ffffff;
+  --md-primary-fg-color--light:        #f5f5f5;
+  --md-primary-fg-color--dark:         #e0e0e0;
+  
+  /* Primary background - darker text for contrast on white */
+  --md-primary-bg-color:               #0f1f47;
+  --md-primary-bg-color--light:        rgba(15,31,71,0.7);
+
+  /* Accent color shades */
+  --md-accent-fg-color:                rgb(248,150,29);
+  --md-accent-fg-color--transparent:   rgba(248,150,29,0.25);
+  --md-accent-bg-color:                rgb(210,227,235);
+  --md-accent-bg-color--light:         rgba(210,227,235,0.5);
+}
+
+/* Ensure header text is dark on white background */
+.md-header {
+  background-color: var(--md-primary-fg-color);
+  color: var(--md-primary-bg-color);
+}
+
+/* Header links - dark color */
+.md-header__title,
+.md-header__button,
+.md-header .md-nav__link {
+  color: var(--md-primary-bg-color);
+}
+
+/* Header links on hover */
+.md-header .md-nav__link:hover {
+  color: var(--md-accent-fg-color);
+}
+
+/* Ensure hyperlinks remain visible */
+.md-content a {
+  color: rgb(35,171,227);
+}
+
+.md-content a:hover {
+  color: var(--md-accent-fg-color);
+}

docs/stylesheets/colors.css

@@ -3,4 +3,4 @@
     color: white;
     padding: 10px;
     border-radius: 4px;
-}
+}