☰

c.ai X Font color etc for CAI Tools users

Lets you change the text colors, font type, and font size as you wish, with fixes for CAI Tools compatibility and fully eliminated twitching

目前为 2025-04-17 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name        c.ai X Font color etc for CAI Tools users
  3. // @namespace   c.ai X Font color etc for CAI Tools users
  4. // @match       https://character.ai/*
  5. // @match       https://*.character.ai/*
  6. // @grant       none
  7. // @license     MIT
  8. // @version     1.0
  9. // @author      LuxTallis based on Vishanka via chatGPT
  10. // @description Lets you change the text colors, font type, and font size as you wish, with fixes for CAI Tools compatibility and fully eliminated twitching
  11. // @icon        https://i.imgur.com/ynjBqKW.png
  12. // ==/UserScript==
  13.  
  14. (function () {
  15.     const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
  16.     var plaintextColor = localStorage.getItem('plaintext_color') || '#A2A2AC';
  17.     var italicColor = localStorage.getItem('italic_color') || '#E0DF7F';
  18.     var quotationMarksColor = localStorage.getItem('quotationmarks_color') || '#FFFFFF';
  19.     var customColor = localStorage.getItem('custom_color') || '#E0DF7F';
  20.     var selectedFont = localStorage.getItem('selected_font') || 'Roboto';
  21.     var fontSize = localStorage.getItem('font_size') || '16px';
  22.     var lastAppliedStyles = null; // Track the last applied styles to avoid redundant updates
  23.  
  24.     // List of fonts, excluding unavailable ones
  25.     const fontList = [
  26.         'Roboto',
  27.         'Josefin Sans',
  28.         'JetBrains Mono',
  29.         'Open Sans',
  30.         'Montserrat',
  31.         'Montserrat Alternates',
  32.         'Lato',
  33.         'PT Sans',
  34.         'Nunito Sans',
  35.         'Courier Prime',
  36.         'Averia Serif Libre',
  37.         'Fira Code',
  38.         'Fira Sans',
  39.         'Anime Ace',
  40.         'Manga Temple',
  41.         'Dancing Script',
  42.         'Medieval Sharp'
  43.     ];
  44.  
  45.     // Create CSS with broader targeting and exclusions
  46.     var css = `
  47.         @import url('https://fonts.googleapis.com/css2?family=Roboto|Josefin+Sans|JetBrains+Mono|Open+Sans|Montserrat|Montserrat+Alternates|Lato|PT+Sans|Nunito+Sans|Courier+Prime|Averia+Serif+Libre|Fira+Code|Fira+Sans|Dancing+Script|MedievalSharp|Anime+Ace|Manga+Temple&display=swap');
  48.  
  49.         body div[class*="swiper-slide"] p[node='[object Object]'],
  50.         body #chat-messages div[class*="rounded-2xl"] p:not([title]),
  51.         body .chat2 p:not(.no-color-override),
  52.         body div[class*="message"] p,
  53.         body div[class*="user-message"] p,
  54.         body div[class*="bot-message"] p,
  55.         body p:not(.cai-tools-managed):not(.no-color-override) {
  56.             color: ${plaintextColor} !important;
  57.             background: none !important;
  58.             font-family: "${selectedFont}", sans-serif !important;
  59.             font-size: ${fontSize} !important;
  60.         }
  61.         body div[class*="swiper-slide"] p[node='[object Object]'] em,
  62.         body #chat-messages div[class*="rounded-2xl"] p:not([title]) em,
  63.         body .chat2 p:not(.no-color-override) em,
  64.         body div[class*="message"] p em,
  65.         body div[class*="user-message"] p em,
  66.         body div[class*="bot-message"] p em,
  67.         body p:not(.cai-tools-managed):not(.no-color-override) em {
  68.             color: ${italicColor} !important;
  69.             font-family: "${selectedFont}", sans-serif !important;
  70.             font-size: ${fontSize} !important;
  71.         }
  72.     `;
  73.  
  74.     // Apply CSS with a unique ID
  75.     function applyStyles() {
  76.         // Skip if styles haven't changed
  77.         const currentStyles = JSON.stringify({ css, plaintextColor, italicColor, quotationMarksColor, customColor, selectedFont, fontSize });
  78.         if (lastAppliedStyles === currentStyles) {
  79.             return;
  80.         }
  81.  
  82.         let style = document.getElementById('custom-text-color-style');
  83.         if (!style) {
  84.             style = document.createElement("style");
  85.             style.id = 'custom-text-color-style';
  86.             style.setAttribute("type", "text/css");
  87.             document.head.appendChild(style);
  88.         }
  89.         style.innerHTML = css;
  90.         lastAppliedStyles = currentStyles;
  91.     }
  92.  
  93.     // Apply styles initially after a delay to outpace CAI Tools
  94.     setTimeout(applyStyles, 1000);
  95.  
  96.     // Debounce function to reduce excessive updates
  97.     function debounce(func, wait) {
  98.         let timeout;
  99.         return function (...args) {
  100.             clearTimeout(timeout);
  101.             timeout = setTimeout(() => func.apply(this, args), wait);
  102.         };
  103.     }
  104.  
  105.     // Function to change colors for quotation marks and custom words
  106.     function changeColors() {
  107.         const pTags = document.querySelectorAll(
  108.             'p[node="[object Object]"], #chat-messages div[class*="rounded-2xl"] p:not([title]), .chat2 p:not(.no-color-override), div[class*="message"] p, div[class*="user-message"] p, div[class*="bot-message"] p, p:not(.cai-tools-managed):not(.no-color-override)'
  109.         );
  110.         const wordlistCc = JSON.parse(localStorage.getItem('wordlist_cc')) || [];
  111.         const wordRegex = wordlistCc.length > 0
  112.             ? new RegExp('\\b(' + wordlistCc.map(word => word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|') + ')\\b', 'gi')
  113.             : null;
  114.  
  115.         Array.from(pTags).forEach((pTag) => {
  116.             if (
  117.                 pTag.dataset.colorChanged === "true" ||
  118.                 pTag.querySelector("code") ||
  119.                 pTag.querySelector("img") ||
  120.                 pTag.querySelector("textarea") ||
  121.                 pTag.querySelector("button") ||
  122.                 pTag.querySelector("div") ||
  123.                 pTag.classList.contains('no-color-override') ||
  124.                 pTag.classList.contains('cai-tools-managed')
  125.             ) {
  126.                 return;
  127.             }
  128.  
  129.             let text = pTag.innerHTML;
  130.             const katexElems = Array.from(pTag.querySelectorAll(".katex"));
  131.             const katexReplacements = katexElems.map((elem, index) => {
  132.                 const placeholder = `KATEX_PLACEHOLDER_${index}`;
  133.                 text = text.replace(elem.outerHTML, placeholder);
  134.                 return { html: elem.outerHTML, placeholder };
  135.             });
  136.  
  137.             const aTags = Array.from(pTag.getElementsByTagName("a"));
  138.             const aTagsReplacements = aTags.map((aTag, j) => {
  139.                 const placeholder = `REPLACE_ME_${j}`;
  140.                 text = text.replace(aTag.outerHTML, placeholder);
  141.                 return { tag: aTag, placeholder };
  142.             });
  143.  
  144.             text = text.replace(/(["“”«»].*?["“”«»])/g, `<span style="color: ${quotationMarksColor} !important; font-family: '${selectedFont}', sans-serif !important; font-size: ${fontSize} !important;">$1</span>`);
  145.             if (wordRegex) {
  146.                 text = text.replace(wordRegex, `<span style="color: ${customColor} !important; font-family: '${selectedFont}', sans-serif !important; font-size: ${fontSize} !important;">$1</span>`);
  147.             }
  148.  
  149.             [...katexReplacements, ...aTagsReplacements].forEach(({ html, placeholder, tag }) => {
  150.                 text = text.replace(placeholder, html || tag.outerHTML);
  151.             });
  152.  
  153.             pTag.innerHTML = text;
  154.             pTag.dataset.colorChanged = "true";
  155.         });
  156.     }
  157.  
  158.     // Function to check if a mutation is relevant to chat content
  159.     function isRelevantMutation(mutation) {
  160.         const target = mutation.target;
  161.         // Check if the mutation involves elements we're styling
  162.         const isRelevantTarget = (
  163.             target.matches('#chat-messages, #chat-messages *') ||
  164.             target.matches('.chat2, .chat2 *') ||
  165.             target.matches('div[class*="message"], div[class*="message"] *') ||
  166.             target.matches('div[class*="user-message"], div[class*="user-message"] *') ||
  167.             target.matches('div[class*="bot-message"], div[class*="bot-message"] *') ||
  168.             target.matches('div[class*="swiper-slide"], div[class*="swiper-slide"] *') ||
  169.             target.matches('p:not(.cai-tools-managed):not(.no-color-override), p:not(.cai-tools-managed):not(.no-color-override) *')
  170.         );
  171.  
  172.         // Additional check: only proceed if new nodes were added or removed
  173.         const hasRelevantNodes = mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0;
  174.  
  175.         return isRelevantTarget && hasRelevantNodes;
  176.     }
  177.  
  178.     // Observe DOM changes with debounced callback for both styles and colors
  179.     const debouncedUpdate = debounce(() => {
  180.         applyStyles();
  181.         changeColors();
  182.     }, 1000);
  183.  
  184.     // Find the chat container to limit the observer's scope
  185.     const chatContainer = document.querySelector('#chat-messages') || document.querySelector('.chat2') || document.body;
  186.     const observerConfig = { childList: true, subtree: true }; // Removed attributes and characterData
  187.  
  188.     const chatObserver = new MutationObserver((mutations) => {
  189.         // Only proceed if the mutation is relevant to chat content
  190.         if (mutations.some(isRelevantMutation)) {
  191.             debouncedUpdate();
  192.         }
  193.     });
  194.     chatObserver.observe(chatContainer, observerConfig);
  195.  
  196.     // Initial application of colors
  197.     setTimeout(changeColors, 1000);
  198.  
  199.     // Function to create buttons
  200.     function createButton(symbol, onClick) {
  201.         const button = document.createElement('button');
  202.         button.innerHTML = symbol;
  203.         button.style.position = 'relative';
  204.         button.style.background = 'none';
  205.         button.style.border = 'none';
  206.         button.style.fontSize = '18px';
  207.         button.style.top = '-5px';
  208.         button.style.cursor = 'pointer';
  209.         button.addEventListener('click', onClick);
  210.         return button;
  211.     }
  212.  
  213.     // Function to create the color and font selector panel
  214.     function createColorPanel() {
  215.         const panel = document.createElement('div');
  216.         panel.id = 'colorPanel';
  217.         panel.style.position = 'fixed';
  218.         panel.style.top = '50%';
  219.         panel.style.left = '50%';
  220.         panel.style.transform = 'translate(-50%, -50%)';
  221.         panel.style.backgroundColor = currentTheme === 'dark' ? 'rgba(19, 19, 22, 0.95)' : 'rgba(214, 214, 221, 0.95)';
  222.         panel.style.border = 'none';
  223.         panel.style.borderRadius = '5px';
  224.         panel.style.padding = '20px';
  225.         panel.style.zIndex = '9999';
  226.  
  227.         const categories = ['plaintext', 'italic', 'quotationmarks', 'custom'];
  228.         const colorPickers = {};
  229.         const transparentCheckboxes = {};
  230.         const labelWidth = '150px';
  231.  
  232.         // Color pickers
  233.         categories.forEach(category => {
  234.             const colorPicker = document.createElement('input');
  235.             colorPicker.type = 'color';
  236.             const storedColor = localStorage.getItem(`${category}_color`) || getDefaultColor(category);
  237.             colorPicker.value = storedColor !== 'transparent' ? storedColor : '#000000';
  238.             colorPickers[category] = colorPicker;
  239.  
  240.             const colorDiv = document.createElement('div');
  241.             colorDiv.style.position = 'relative';
  242.             colorDiv.style.width = '20px';
  243.             colorDiv.style.height = '20px';
  244.             colorDiv.style.marginLeft = '10px';
  245.             colorDiv.style.top = '0px';
  246.             colorDiv.style.backgroundColor = storedColor === 'transparent' ? 'transparent' : colorPicker.value;
  247.             colorDiv.style.display = 'inline-block';
  248.             colorDiv.style.marginRight = '10px';
  249.             colorDiv.style.cursor = 'pointer';
  250.             colorDiv.style.border = '1px solid black';
  251.  
  252.             colorDiv.addEventListener('click', function () {
  253.                 if (!transparentCheckboxes[category].checked) {
  254.                     colorPicker.click();
  255.                 }
  256.             });
  257.  
  258.             colorPicker.addEventListener('input', function () {
  259.                 if (!transparentCheckboxes[category].checked) {
  260.                     colorDiv.style.backgroundColor = colorPicker.value;
  261.                     localStorage.setItem(`${category}_color`, colorPicker.value);
  262.                 }
  263.             });
  264.  
  265.             const transparentCheckbox = document.createElement('input');
  266.             transparentCheckbox.type = 'checkbox';
  267.             transparentCheckbox.style.marginLeft = '10px';
  268.             transparentCheckbox.checked = storedColor === 'transparent';
  269.             transparentCheckbox.title = 'Toggle transparency';
  270.             transparentCheckbox.style.marginRight = '5px';
  271.             transparentCheckboxes[category] = transparentCheckbox;
  272.  
  273.             transparentCheckbox.addEventListener('change', function () {
  274.                 if (transparentCheckbox.checked) {
  275.                     colorDiv.style.backgroundColor = 'transparent';
  276.                     localStorage.setItem(`${category}_color`, 'transparent');
  277.                 } else {
  278.                     colorDiv.style.backgroundColor = colorPicker.value;
  279.                     localStorage.setItem(`${category}_color`, colorPicker.value);
  280.                 }
  281.             });
  282.  
  283.             const label = document.createElement('label');
  284.             label.style.width = labelWidth;
  285.             label.style.margin = '0';
  286.             label.style.padding = '0';
  287.             label.appendChild(document.createTextNode(`${category}: `));
  288.  
  289.             const resetButton = createButton('↺', function () {
  290.                 const defaultColor = getDefaultColor(category);
  291.                 colorPicker.value = defaultColor;
  292.                 colorDiv.style.backgroundColor = defaultColor;
  293.                 transparentCheckbox.checked = false;
  294.                 localStorage.setItem(`${category}_color`, defaultColor);
  295.             });
  296.             resetButton.style.position = 'relative';
  297.             resetButton.style.top = '-2px';
  298.             resetButton.style.margin = '0';
  299.             resetButton.style.padding = '0';
  300.  
  301.             const containerDiv = document.createElement('div');
  302.             containerDiv.style.margin = '2px 0';
  303.             containerDiv.style.padding = '0';
  304.             containerDiv.style.display = 'flex';
  305.             containerDiv.style.alignItems = 'center';
  306.  
  307.             containerDiv.appendChild(label);
  308.             containerDiv.appendChild(colorDiv);
  309.             containerDiv.appendChild(transparentCheckbox);
  310.             containerDiv.appendChild(resetButton);
  311.  
  312.             panel.appendChild(containerDiv);
  313.         });
  314.  
  315.         // Font picker
  316.         const fontLabel = document.createElement('label');
  317.         fontLabel.style.width = labelWidth;
  318.         fontLabel.style.margin = '0';
  319.         fontLabel.style.padding = '0';
  320.         fontLabel.appendChild(document.createTextNode('Font: '));
  321.  
  322.         const fontSelect = document.createElement('select');
  323.         fontSelect.style.width = '150px';
  324.         fontSelect.style.height = '30px';
  325.         fontSelect.style.borderRadius = '3px';
  326.         fontList.forEach(font => {
  327.             const option = document.createElement('option');
  328.             option.value = font;
  329.             option.text = font;
  330.             if (font === selectedFont) option.selected = true;
  331.             fontSelect.appendChild(option);
  332.         });
  333.  
  334.         const fontContainer = document.createElement('div');
  335.         fontContainer.style.margin = '2px 0';
  336.         fontContainer.style.padding = '0';
  337.         fontContainer.style.display = 'flex';
  338.         fontContainer.style.alignItems = 'center';
  339.         fontContainer.appendChild(fontLabel);
  340.         fontContainer.appendChild(fontSelect);
  341.         panel.appendChild(fontContainer);
  342.  
  343.         // Font size picker
  344.         const sizeLabel = document.createElement('label');
  345.         sizeLabel.style.width = labelWidth;
  346.         sizeLabel.style.margin = '0';
  347.         sizeLabel.style.padding = '0';
  348.         sizeLabel.appendChild(document.createTextNode('Font Size: '));
  349.  
  350.         const sizeInput = document.createElement('input');
  351.         sizeInput.type = 'number';
  352.         sizeInput.min = '8';
  353.         sizeInput.max = '48';
  354.         sizeInput.value = parseInt(fontSize);
  355.         sizeInput.style.width = '60px';
  356.         sizeInput.style.height = '30px';
  357.         sizeInput.style.borderRadius = '3px';
  358.  
  359.         const sizeContainer = document.createElement('div');
  360.         sizeContainer.style.margin = '2px 0';
  361.         sizeContainer.style.padding = '0';
  362.         sizeContainer.style.display = 'flex';
  363.         sizeContainer.style.alignItems = 'center';
  364.         sizeContainer.appendChild(sizeLabel);
  365.         sizeContainer.appendChild(sizeInput);
  366.         panel.appendChild(sizeContainer);
  367.  
  368.         // Custom word list input
  369.         const wordListInput = document.createElement('input');
  370.         wordListInput.type = 'text';
  371.         wordListInput.placeholder = 'Separate words with commas';
  372.         wordListInput.style.width = '250px';
  373.         wordListInput.style.height = '35px';
  374.         wordListInput.style.borderRadius = '3px';
  375.         wordListInput.style.marginBottom = '10px';
  376.         panel.appendChild(wordListInput);
  377.         panel.appendChild(document.createElement('br'));
  378.  
  379.         const wordListContainer = document.createElement('div');
  380.         wordListContainer.style.display = 'flex';
  381.         wordListContainer.style.flexWrap = 'wrap';
  382.         wordListContainer.style.maxWidth = '300px';
  383.  
  384.         const wordListArray = JSON.parse(localStorage.getItem('wordlist_cc')) || [];
  385.  
  386.         function createWordButton(word) {
  387.             const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
  388.             const removeSymbol = isMobile ? '×' : '🞮';
  389.             const wordButton = createButton(`${word} ${removeSymbol}`, function() {
  390.                 const index = wordListArray.indexOf(word);
  391.                 if (index !== -1) {
  392.                     wordListArray.splice(index, 1);
  393.                     updateWordListButtons();
  394.                 }
  395.             });
  396.             wordButton.style.borderRadius = '3px';
  397.             wordButton.style.border = 'none';
  398.             wordButton.style.backgroundColor = currentTheme === 'dark' ? '#26272B' : '#E4E4E7';
  399.             wordButton.style.marginBottom = '5px';
  400.             wordButton.style.marginRight = '5px';
  401.             wordButton.style.fontSize = '16px';
  402.             return wordButton;
  403.         }
  404.  
  405.         function updateWordListButtons() {
  406.             wordListContainer.innerHTML = '';
  407.             wordListArray.forEach(word => {
  408.                 const wordButton = createWordButton(word);
  409.                 wordListContainer.appendChild(wordButton);
  410.             });
  411.         }
  412.  
  413.         updateWordListButtons();
  414.  
  415.         const addWordsButton = document.createElement('button');
  416.         addWordsButton.textContent = 'Add';
  417.         addWordsButton.style.marginTop = '-8px';
  418.         addWordsButton.style.marginLeft = '5px';
  419.         addWordsButton.style.borderRadius = '3px';
  420.         addWordsButton.style.border = 'none';
  421.         addWordsButton.style.backgroundColor = currentTheme === 'dark' ? '#26272B' : '#E4E4E7';
  422.         addWordsButton.addEventListener('click', function() {
  423.             const wordListValue = wordListInput.value;
  424.             const newWords = wordListValue.split(',').map(word => word.trim().toLowerCase()).filter(word => word !== '');
  425.             wordListArray.push(...newWords);
  426.             updateWordListButtons();
  427.         });
  428.  
  429.         const inputButtonContainer = document.createElement('div');
  430.         inputButtonContainer.style.display = 'flex';
  431.         inputButtonContainer.style.alignItems = 'center';
  432.         inputButtonContainer.appendChild(wordListInput);
  433.         inputButtonContainer.appendChild(addWordsButton);
  434.         panel.appendChild(inputButtonContainer);
  435.         panel.appendChild(wordListContainer);
  436.  
  437.         // OK button
  438.         const okButton = document.createElement('button');
  439.         okButton.textContent = 'Confirm';
  440.         okButton.style.marginTop = '-20px';
  441.         okButton.style.width = '75px';
  442.         okButton.style.height = '35px';
  443.         okButton.style.marginRight = '5px';
  444.         okButton.style.borderRadius = '3px';
  445.         okButton.style.border = 'none';
  446.         okButton.style.backgroundColor = currentTheme === 'dark' ? '#26272B' : '#D9D9DF';
  447.         okButton.style.position = 'relative';
  448.         okButton.style.left = '24%';
  449.         okButton.addEventListener('click', function () {
  450.             categories.forEach(category => {
  451.                 const colorPicker = colorPickers[category];
  452.                 const transparentCheckbox = transparentCheckboxes[category];
  453.                 const newValue = transparentCheckbox.checked ? 'transparent' : colorPicker.value;
  454.                 localStorage.setItem(`${category}_color`, newValue);
  455.                 if (category === 'plaintext') plaintextColor = newValue;
  456.                 else if (category === 'italic') italicColor = newValue;
  457.                 else if (category === 'quotationmarks') quotationMarksColor = newValue;
  458.                 else if (category === 'custom') customColor = newValue;
  459.             });
  460.  
  461.             selectedFont = fontSelect.value;
  462.             localStorage.setItem('selected_font', selectedFont);
  463.             fontSize = sizeInput.value + 'px';
  464.             localStorage.setItem('font_size', fontSize);
  465.  
  466.             // Update CSS dynamically
  467.             css = `
  468.                 @import url('https://fonts.googleapis.com/css2?family=Roboto|Josefin+Sans|JetBrains+Mono|Open+Sans|Montserrat|Montserrat+Alternates|Lato|PT+Sans|Nunito+Sans|Courier+Prime|Averia+Serif+Libre|Fira+Code|Fira+Sans|Dancing+Script|MedievalSharp|Anime+Ace|Manga+Temple&display=swap');
  469.  
  470.                 body div[class*="swiper-slide"] p[node='[object Object]'],
  471.                 body #chat-messages div[class*="rounded-2xl"] p:not([title]),
  472.                 body .chat2 p:not(.no-color-override),
  473.                 body div[class*="message"] p,
  474.                 body div[class*="user-message"] p,
  475.                 body div[class*="bot-message"] p,
  476.                 body p:not(.cai-tools-managed):not(.no-color-override) {
  477.                     color: ${plaintextColor} !important;
  478.                     background: none !important;
  479.                     font-family: "${selectedFont}", sans-serif !important;
  480.                     font-size: ${fontSize} !important;
  481.                 }
  482.                 body div[class*="swiper-slide"] p[node='[object Object]'] em,
  483.                 body #chat-messages div[class*="rounded-2xl"] p:not([title]) em,
  484.                 body .chat2 p:not(.no-color-override) em,
  485.                 body div[class*="message"] p em,
  486.                 body div[class*="user-message"] p em,
  487.                 body div[class*="bot-message"] p em,
  488.                 body p:not(.cai-tools-managed):not(.no-color-override) em {
  489.                     color: ${italicColor} !important;
  490.                     font-family: "${selectedFont}", sans-serif !important;
  491.                     font-size: ${fontSize} !important;
  492.                 }
  493.             `;
  494.             applyStyles();
  495.             changeColors();
  496.             const wordListValue = wordListInput.value;
  497.             const newWords = wordListValue.split(',').map(word => word.trim().toLowerCase()).filter(word => word !== '');
  498.             const uniqueNewWords = Array.from(new Set(newWords));
  499.             uniqueNewWords.forEach(newWord => {
  500.                 if (!wordListArray.includes(newWord)) {
  501.                     wordListArray.push(newWord);
  502.                 }
  503.             });
  504.             localStorage.setItem('wordlist_cc', JSON.stringify(wordListArray));
  505.             updateWordListButtons();
  506.             changeColors();
  507.             panel.remove();
  508.         });
  509.  
  510.         // Cancel button
  511.         const cancelButton = document.createElement('button');
  512.         cancelButton.textContent = 'Cancel';
  513.         cancelButton.style.marginTop = '-20px';
  514.         cancelButton.style.borderRadius = '3px';
  515.         cancelButton.style.width = '75px';
  516.         cancelButton.style.marginLeft = '5px';
  517.         cancelButton.style.height = '35px';
  518.         cancelButton.style.border = 'none';
  519.         cancelButton.style.backgroundColor = currentTheme === 'dark' ? '#5E5E5E' : '#CBD2D4';
  520.         cancelButton.style.position = 'relative';
  521.         cancelButton.style.left = '25%';
  522.         cancelButton.addEventListener('click', function() {
  523.             panel.remove();
  524.         });
  525.  
  526.         // Reset all button
  527.         const resetAll = document.createElement('button');
  528.         resetAll.style.marginBottom = '20px';
  529.         resetAll.style.borderRadius = '3px';
  530.         resetAll.style.width = '80px';
  531.         resetAll.style.marginLeft = '5px';
  532.         resetAll.style.height = '30px';
  533.         resetAll.style.border = 'none';
  534.         resetAll.textContent = 'Reset All';
  535.         resetAll.addEventListener('click', function () {
  536.             const resetConfirmed = confirm('This will reset all colors, font, and size to default. Proceed?');
  537.             if (resetConfirmed) {
  538.                 categories.forEach(category => {
  539.                     const defaultColor = getDefaultColor(category);
  540.                     colorPickers[category].value = defaultColor;
  541.                     transparentCheckboxes[category].checked = false;
  542.                     localStorage.setItem(`${category}_color`, defaultColor);
  543.                     if (category === 'plaintext') plaintextColor = defaultColor;
  544.                     else if (category === 'italic') italicColor = defaultColor;
  545.                     else if (category === 'quotationmarks') quotationMarksColor = defaultColor;
  546.                     else if (category === 'custom') customColor = defaultColor;
  547.                 });
  548.                 selectedFont = 'Roboto';
  549.                 fontSelect.value = 'Roboto';
  550.                 localStorage.setItem('selected_font', 'Roboto');
  551.                 fontSize = '16px';
  552.                 sizeInput.value = '16';
  553.                 localStorage.setItem('font_size', '16px');
  554.                 localStorage.removeItem('wordlist_cc');
  555.                 wordListArray.length = 0;
  556.                 updateWordListButtons();
  557.                 css = `
  558.                     @import url('https://fonts.googleapis.com/css2?family=Roboto|Josefin+Sans|JetBrains+Mono|Open+Sans|Montserrat|Montserrat+Alternates|Lato|PT+Sans|Nunito+Sans|Courier+Prime|Averia+Serif+Libre|Fira+Code|Fira+Sans|Dancing+Script|MedievalSharp|Anime+Ace|Manga+Temple&display=swap');
  559.  
  560.                     body div[class*="swiper-slide"] p[node='[object Object]'],
  561.                     body #chat-messages div[class*="rounded-2xl"] p:not([title]),
  562.                     body .chat2 p:not(.no-color-override),
  563.                     body div[class*="message"] p,
  564.                     body div[class*="user-message"] p,
  565.                     body div[class*="bot-message"] p,
  566.                     body p:not(.cai-tools-managed):not(.no-color-override) {
  567.                         color: ${getDefaultColor('plaintext')} !important;
  568.                         background: none !important;
  569.                         font-family: "Roboto", sans-serif !important;
  570.                         font-size: 16px !important;
  571.                     }
  572.                     body div[class*="swiper-slide"] p[node='[object Object]'] em,
  573.                     body #chat-messages div[class*="rounded-2xl"] p:not([title]) em,
  574.                     body .chat2 p:not(.no-color-override) em,
  575.                     body div[class*="message"] p em,
  576.                     body div[class*="user-message"] p em,
  577.                     body div[class*="bot-message"] p em,
  578.                     body p:not(.cai-tools-managed):not(.no-color-override) em {
  579.                         color: ${getDefaultColor('italic')} !important;
  580.                         font-family: "Roboto", sans-serif !important;
  581.                         font-size: 16px !important;
  582.                     }
  583.                 `;
  584.                 applyStyles();
  585.                 changeColors();
  586.             }
  587.         });
  588.  
  589.         panel.appendChild(document.createElement('br'));
  590.         panel.appendChild(resetAll);
  591.         panel.appendChild(document.createElement('br'));
  592.         panel.appendChild(okButton);
  593.         panel.appendChild(cancelButton);
  594.         document.body.appendChild(panel);
  595.     }
  596.  
  597.     // Function to get default colors
  598.     function getDefaultColor(category) {
  599.         if (currentTheme === 'dark') {
  600.             const defaultColors = {
  601.                 'plaintext': '#A2A2AC',
  602.                 'italic': '#E0DF7F',
  603.                 'quotationmarks': '#FFFFFF',
  604.                 'custom': '#E0DF7F'
  605.             };
  606.             return defaultColors[category];
  607.         } else {
  608.             const defaultColors = {
  609.                 'plaintext': '#374151',
  610.                 'italic': '#4F7AA6',
  611.                 'quotationmarks': '#000000',
  612.                 'custom': '#4F7AA6'
  613.             };
  614.             return defaultColors[category];
  615.         }
  616.     }
  617.  
  618.     // Create and insert main button
  619.     const mainButton = createButton('', function() {
  620.         const colorPanelExists = document.getElementById('colorPanel');
  621.         if (!colorPanelExists) {
  622.             createColorPanel();
  623.         }
  624.     });
  625.     mainButton.style.backgroundImage = "url('https://i.imgur.com/yBgJ3za.png')";
  626.     mainButton.style.backgroundSize = "cover";
  627.     mainButton.style.position = "fixed";
  628.     mainButton.style.top = "135px";
  629.     mainButton.style.right = "5px";
  630.     mainButton.style.width = "22px";
  631.     mainButton.style.height = "22px";
  632.     mainButton.style.zIndex = '10000';
  633.     document.body.appendChild(mainButton);
  634.  
  635.     console.info('c.ai Text Color and Font Button appended to the top right corner.');
  636. })();