diff --git a/src/windows/customTheme/customTheme.html b/src/windows/customTheme/customTheme.html
index 94ff1396..92b0a42a 100644
--- a/src/windows/customTheme/customTheme.html
+++ b/src/windows/customTheme/customTheme.html
@@ -40,6 +40,15 @@
Main Text Color:
diff --git a/src/windows/customTheme/customTheme.js b/src/windows/customTheme/customTheme.js
index f8ab8f51..fce9f5e8 100644
--- a/src/windows/customTheme/customTheme.js
+++ b/src/windows/customTheme/customTheme.js
@@ -61,7 +61,7 @@ let themes = new Store({
// Submit "Custom CSS" Theme
document.querySelector('#customcssaddbutton').addEventListener('click', () => {
// Get the CSS from the textarea
- let css = escape(document.querySelector('#customcss').value);
+ let css = document.querySelector('#customcss').value;
// Get the name from the textbox
let name = escape(document.querySelector('#customcssname').value);
@@ -101,41 +101,41 @@ document.querySelector('#customcssaddbutton').addEventListener('click', () => {
* @param {string} shadowColor Shadow color
* @param {string} emojiOpacity Emoji Opacity
*/
-const generateCustomCSS = (baseTheme, mainBG, secBG, mainText, secText, accentColor, iconColor, shadowColor, emojiOpacity) => {
+const generateCustomCSS = (baseTheme, mainBG, secBG, terBG, mainText, secText, accentColor, shadowColor, emojiOpacity) => {
let css;
// Replace variable values in CSS with new values
- css = baseTheme.replace("#272C35", mainBG) //Main background color
- .replace("#1F232A", secBG) //Secondary background color
- .replace("#D1D1D1", mainText) //Main text color
- .replace("#E9E9E9", secText) //Secondary text color
- .replace("#7289DA", accentColor) //Accent color
- .replace("#E1E1E1", iconColor) //Icon color
- .replace("rgba(0, 0, 0, 0.10)", shadowColor) //Shadow color
- .replace("0.75", emojiOpacity); //Emoji Opacity
+ css = baseTheme.replace("#1f232a", mainBG) //Main background color
+ .replace("#252a33", secBG) //Secondary background color
+ .replace("#2c313a", terBG) //Tertiary background color
+ .replace("#a1a1a1", mainText) //Main text color
+ .replace("#e9e9e9", secText) //Secondary text color
+ .replace("#7289da", accentColor) //Accent color
+ .replace("rgba(0, 0, 0, 0.145)", shadowColor) //Shadow color
+ .replace("0.8", emojiOpacity) //Emoji Opacity
return css;
}
document.querySelector('#customizeraddbutton').addEventListener('click', () => {
// Fetch base dark theme
- window.fetch('https://raw.githubusercontent.com/ShadyThGod/shadythgod.github.io/master/css/altus-dark-theme.css')
+ window.fetch('https://raw.githubusercontent.com/vednoc/dark-whatsapp/master/wa.user.css')
// Convert to pure text
.then(res => res.text())
.then(baseTheme => {
// Get new values from DOM
- let mainBG = escape(document.querySelector('#main-bg .color-input').value);
- let secBG = escape(document.querySelector('#sec-bg .color-input').value);
- let mainText = escape(document.querySelector('#main-text .color-input').value);
- let secText = escape(document.querySelector('#sec-text .color-input').value);
- let accentColor = escape(document.querySelector('#accent-color .color-input').value);
- let iconColor = escape(document.querySelector('#icon-color .color-input').value);
- let shadowColor = escape(document.querySelector('#shadow-color .color-input').value);
- let emojiOpacity = escape(document.querySelector('#emoji-opacity').value);
- let name = escape(document.querySelector('#customizer-theme-name').value);
+ let mainBG = document.querySelector('#main-bg .color-input').value;
+ let secBG = document.querySelector('#sec-bg .color-input').value;
+ let terBG = document.querySelector('#ter-bg .color-input').value;
+ let mainText = document.querySelector('#main-text .color-input').value;
+ let secText = document.querySelector('#sec-text .color-input').value;
+ let accentColor = document.querySelector('#accent-color .color-input').value;
+ let shadowColor = document.querySelector('#shadow-color .color-input').value;
+ let emojiOpacity = document.querySelector('#emoji-opacity').value;
+ let name = document.querySelector('#customizer-theme-name').value || 'New Theme';
// Generate new custom theme css
- let css = generateCustomCSS(baseTheme, mainBG, secBG, mainText, secText, accentColor, iconColor, shadowColor, emojiOpacity);
+ let css = generateCustomCSS(baseTheme.replace(/\/\*(.*\n)+\n@.*\{/gim, '').replace("#2f343d", 'var(--darken)').replace("#383d46", 'var(--darken)'), mainBG, secBG, terBG, mainText, secText, accentColor, shadowColor, emojiOpacity);
// Get themes list as array
let themesList = Array.from(themes.get('themes'));
@@ -156,12 +156,12 @@ document.querySelector('#customizeraddbutton').addEventListener('click', () => {
ipcRenderer.send('themes-changed', true);
// Reset values after adding theme
- document.querySelector('#main-bg .color-input').value = '#272C35';
- document.querySelector('#sec-bg .color-input').value = '#1F232A';
- document.querySelector('#main-text .color-input').value = '#D1D1D1';
- document.querySelector('#sec-text .color-input').value = '#E9E9E9';
- document.querySelector('#accent-color .color-input').value = '#7289DA';
- document.querySelector('#icon-color .color-input').value = '#E1E1E1';
+ document.querySelector('#main-bg .color-input').value = '#1f232a';
+ document.querySelector('#sec-bg .color-input').value = '#252a33';
+ document.querySelector('#ter-bg .color-input').value = '#2c313a';
+ document.querySelector('#main-text .color-input').value = '#a1a1a1';
+ document.querySelector('#sec-text .color-input').value = '#e9e9e9';
+ document.querySelector('#accent-color .color-input').value = '#7289da';
document.querySelector('#shadow-color .color-input').value = 'rgba(0, 0, 0, 0.10)';
document.querySelector('#emoji-opacity').value = '0.75';
document.querySelector('#customizer-theme-name').value = '';
@@ -204,10 +204,13 @@ document.querySelectorAll('.color-button').forEach(i => {
// Select default color for specific color input
switch (inputID) {
case 'main-bg':
- defaultColor = '#272C35';
+ defaultColor = '#1f232a';
break;
case 'sec-bg':
- defaultColor = '#1F232A';
+ defaultColor = '#252a33';
+ break;
+ case 'ter-bg':
+ defaultColor = '#2c313a';
break;
case 'main-text':
defaultColor = '#D1D1D1';
diff --git a/src/windows/themeManager/themeManager.js b/src/windows/themeManager/themeManager.js
index 6d0c3739..233d3368 100644
--- a/src/windows/themeManager/themeManager.js
+++ b/src/windows/themeManager/themeManager.js
@@ -120,7 +120,7 @@ function updateBaseThemes() {
// Add spin effect to the icon on the button
document.querySelector('.button .lni-reload').classList.add('lni-spin-effect');
// Fetch a new version of the dark theme
- fetch('https://raw.githubusercontent.com/ShadyThGod/shadythgod.github.io/master/css/altus-dark-theme.css', {
+ fetch('https://raw.githubusercontent.com/vednoc/dark-whatsapp/master/wa.user.css', {
cache: 'no-cache'
})
.then(res => res.text())
@@ -132,7 +132,7 @@ function updateBaseThemes() {
// Create new object for the updated theme
let updatedTheme = {
name: 'Dark',
- css: css
+ css: css.replace(/\/\*(.*\n)+\n@.*\{/gim, '')
};
// Find index of the dark theme