מחפש פתרון להחלפת צבע ספציפי בcss בלחיצה באמצעות תוסף כרום/css/קוד js

[shraga]

אתר שמעוצב עם צבע מסוים ששולט בהרבה אלמנטים,
לצורך בדיקת ניראות של עיצוב שונה, אני רוצה בלחיצת כפתור לשנות (ברמת התצוגה בדפדפן, היינו לא לשנות באמת) צבע מסוים לצבע אחר, במקום לעבור על כל אלמנט בפני עצמו ולשנות לו את הגדרות הcss.
האם יש דרך לעשות את זה?

תודה רבה

[dovid]

@shraga אם ההגדרה של הצבע מרוכזת יחסית במקום אחד או כמשתנה CSS, אז זה אפשרי בקלות.
אם היא מפוזרת ושרירותית בהמון מקומות, אני חושב שזה מחייב עבודה מקדימה של מיפוי כל המקומות, צמצומם במידת האפשר וגיבוש רשימה שלהם כדי לעבור עליהם בעת לחיצה. בקיצור התשובה לא ממשעוזרת לך, כי בשביל תשובה מעשית צריך לראות בדיוק במה מדבור.

[shraga]

@dovid אמר במחפש פתרון להחלפת צבע ספציפי בcss בלחיצה באמצעות תוסף כרום/css/קוד js:

@shraga אם ההגדרה של הצבע מרוכזת יחסית במקום אחד או כמשתנה CSS, אז זה אפשרי בקלות.

אם אני מבין נכון את כוונתך, אז זה מפוזר, מדובר באלמנטים שונים עם כללי css שונים לכל אחד, זה לא מרוכז בכלל css אחד.

[גמליאל]

@shraga כמו ש@david אמר, צריך לדעת במה מדובר.
באופן כללי, כיון שניתן לכתוב CSS בכמה מקומות, אם נכתב כמה מאפיינים של CSS לאותו אלמנט, הדפדפן יבחר את ההגדרה שהכי קרובה לאלמנט עצמו.
לכן גם כאשר האלמנטים מפוזרים, אם העיצוב נקבע בקובץ CSS חיצוני למשל, אתה יכול לדרוס את כולם בהגדרה יותר פנימית.
מכיון שאני חושד שמדובר באתר וורדפרס, ברוב התבניות ניתן להוסיף CSS מותאם אישית שדורס את העיצוב שנקבע קודם.

[shraga]

מעדכן שבאדיבות @dovid נעזרתי בקוד הזה:

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? "rgb(" + [
    parseInt(result[1], 16),
    parseInt(result[2], 16),
    parseInt(result[3], 16)
  ].join(', ') + ")" : null;
}

// Function to change a color to another one
function colorChange(colorOld, colorNew, strict = false) {
  // If hex notation, convert to rgb
  if (colorOld.includes('#'))
    colorOld = hexToRgb(colorOld);
  // Loop through all elements styles
  [...document.all].forEach(elm => {
    let cStyle = getComputedStyle(elm);
    [...cStyle].forEach(prop => {
      // Escape if not a string
      if (typeof cStyle[prop] !== 'string') return;
      // Check if colorOld is in property
      if (cStyle[prop].includes(colorOld)){
        // If strict, colorOld is replaced only if it's the only value of the property
        if (!strict || cStyle[prop] === colorOld)
          elm.style[prop] = cStyle[prop].replace(colorOld, colorNew); // Replace color
      }
    })
  })
};

colorChange("#D81D59", 'orange');