commit 72760d6bb313fb6ad926876fbd98ba11452b5303 Author: deadvey Date: Sat Dec 14 21:17:19 2024 +0000 initial commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..397fde4 --- /dev/null +++ b/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 :) diff --git a/icons/logo-48.png b/icons/logo-48.png new file mode 100644 index 0000000..bb471ce Binary files /dev/null and b/icons/logo-48.png differ diff --git a/main.js b/main.js new file mode 100644 index 0000000..d95b225 --- /dev/null +++ b/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}`); diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..73b0d50 --- /dev/null +++ b/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": [""], + "js": ["theme.js","main.js"] + } + ], + "permissions": [ + "activeTab", "storage" + ] +} + diff --git a/theme.js b/theme.js new file mode 100644 index 0000000..4267a92 --- /dev/null +++ b/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;