initial commit

README.md

@@ -0,0 +1,7 @@
+# What is this?
+A firefox extension for loading custom colours from a config file and using them as css on a webpage
+
+# How to?
+Edit theme.js for custom colours
+For now it's not on firefox store so go to about:debugging -> This Firefox -> Load Temporary Add-on
+then select any file in this directory :)

main.js

@@ -0,0 +1,30 @@
+		// Body
+document.body.style.backgroundColor = `#${backgroundColor}`;
+document.body.style.color = `#${foregroundColor}`;
+const contentElement = document.getElementById('content'); // commonly used as content div of page
+if (contentElement) {
+    contentElement.style.backgroundColor = `#${backgroundColor}`;
+}
+
+		// Links
+// General
+document.querySelectorAll('a').forEach(link => link.style.color = `#${linkText}`);
+// Hover
+document.querySelectorAll('a').forEach(link => { link.addEventListener('mouseover', () => link.style.color = `#${linkTextHover}`); link.addEventListener('mouseout', () => link.style.color = `#${linkText}`); });
+// Active
+document.querySelectorAll('a').forEach(link => { link.addEventListener('mousedown', () => link.style.color = `#${linkTextActive}`); link.addEventListener('mouseup', () => link.style.color = `#${linkText}`); });
+
+		// Buttons
+document.querySelectorAll('button').forEach(button => button.style.backgroundColor = `#${buttonBackground}`); 
+document.querySelectorAll('button').forEach(button => button.style.color = `#${buttonText}`); 
+document.querySelectorAll('button').forEach(button => button.style.borderColor = `#${buttonBorderColor}`); 
+
+		// Input
+document.querySelectorAll('input').forEach(input => input.style.backgroundColor = `#${inputBackground}`);
+document.querySelectorAll('input').forEach(input => input.style.color = `#${inputText}`);
+document.querySelectorAll('input').forEach(input => input.style.borderColor = `#${inputBorderColor}`);
+
+		// Text area
+document.querySelectorAll('textarea').forEach(textarea => textarea.style.backgroundColor = `#${inputBackground}`);
+document.querySelectorAll('textarea').forEach(textarea => textarea.style.color = `#${inputText}`);
+document.querySelectorAll('textarea').forEach(textarea => textarea.style.borderColor = `#${inputBorderColor}`);

manifest.json

@@ -0,0 +1,22 @@
+{
+  "manifest_version": 2,
+  "name": "themedweb",
+  "version": "1.0",
+
+  "description": "Loads custom colours into css from a config file",
+
+  "icons": {
+    "48": "icons/logo-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["theme.js","main.js"]
+    }
+  ],
+  "permissions": [
+    "activeTab", "storage"
+  ]
+}
+

theme.js

@@ -0,0 +1,32 @@
+// Colors
+let GRAY="93a1a1";
+let DARK_GRAY="586e75";
+let RED="dc322f";
+let DARK_RED="cb4b16";
+let GREEN="859900";
+let DARK_GREEN="859900";
+let YELLOW="b58900";
+let DARK_YELLOW="b58900";
+let BLUE="268bd2";
+let DARK_BLUE="268bd2";
+let PURPLE="6c71c4";
+let DARK_PURPLE="d33682";
+let CYAN="2aa198";
+let DARK_CYAN="2aa198";
+let BG = "073642"
+let FG="fdf6e3";
+
+let backgroundColor=BG;
+let foregroundColor=FG;
+
+let linkText=BLUE;
+let linkTextHover=CYAN;
+let linkTextActive=RED;
+
+let buttonText=FG;
+let buttonBackground=BG;
+let buttonBorderColor=FG;
+
+let inputText=FG;
+let inputBackground=BG;
+let inputBorderColor=FG;