diff --git a/src/extensionsIntegrated/CSSColorPreview/main.css b/src/extensionsIntegrated/CSSColorPreview/main.css
deleted file mode 100644
index 7ff54ecf9..000000000
--- a/src/extensionsIntegrated/CSSColorPreview/main.css
+++ /dev/null
@@ -1,30 +0,0 @@
-/* Single color preview */
-.ico-cssColorPreview {
-    border: solid 1px rgba(0, 0, 0, 0.2);
-    display: inline-block;
-    height: 14px;
-    width: 14px;
-    margin-left: 6px;
-    position: absolute;
-    top: 8px;
-    z-index: 99999;
-}
-
-/* Multiple colors preview container (this is a div) */
-.ico-multiple-cssColorPreview {
-    position: relative;
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    margin-left: 6px;
-    border: solid 1px rgba(0, 0, 0, 0.2);
-    z-index: 99999;
-}
-
-/* For individual color boxes, they will be added inside the main .ico-multiple-cssColorPreview div */
-.ico-multiple-cssColorPreview .color-box {
-    position: absolute;
-    width: 6px;
-    height: 6px;
-    box-sizing: border-box;
-}
diff --git a/src/extensionsIntegrated/CSSColorPreview/main.js b/src/extensionsIntegrated/CSSColorPreview/main.js
index 09001b2ca..dfb5d957b 100644
--- a/src/extensionsIntegrated/CSSColorPreview/main.js
+++ b/src/extensionsIntegrated/CSSColorPreview/main.js
@@ -2,7 +2,7 @@
  * GNU AGPL-3.0 License
  *
  * Copyright (c) 2021 - present core.ai . All rights reserved.
- * Original work Copyright (c) 2013 - 2021 Adobe Systems Incorporated. All rights reserved.
+ * Original work Copyright (c) 2024 [cmgddd](https://github.com/cmgddd/Brackets-css-color-preview). All rights reserved.
  *
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU Affero General Public License as published by
@@ -21,13 +21,13 @@
 
 
 /* Displays a color preview in the gutter for any file containing color values */
+/* Styles on `styles/brackets.less` file */
 
 define(function (require, exports, module) {
 
     // Brackets modules.
     const _                 = require("thirdparty/lodash"),
         EditorManager       = require('editor/EditorManager'),
-        ExtensionUtils      = require("utils/ExtensionUtils"),
         ColorUtils          = require('utils/ColorUtils'),
         AppInit             = require("utils/AppInit"),
         PreferencesManager  = require("preferences/PreferencesManager"),
@@ -38,8 +38,6 @@ define(function (require, exports, module) {
         gutterName          = "CodeMirror-colorGutter";
 
 
-    ExtensionUtils.loadStyleSheet(module, "main.css");
-
     // For preferences settings, to toggle this feature on/off
     const PREFERENCES_CSS_COLOR_PREVIEW = "CSSColorPreview";
     let enabled = true; // by default:- on
@@ -48,190 +46,210 @@ define(function (require, exports, module) {
         description: Strings.DESCRIPTION_CSS_COLOR_PREVIEW
     });
 
-    const CssColorPreview = {
+    /**
+     * Gets all the colors that are to be displayed
+     *
+     * Makes sure that the feature is enabled and editor is active, if yes:
+     * Calls showGutter function to display the color marks on the gutter
+     */
+    function showColorMarks() {
+        if (!enabled) {
+            removeColorMarks();
+            return;
+        }
 
-        // Get editor
-        getEditor: function () {
-            return EditorManager.getActiveEditor();
-        },
+        const editor = EditorManager.getActiveEditor();
+        if (editor) {
 
-        // show color preview
-        showColorMarks: function () {
-            // Check if the extension is enabled
-            if (!enabled) {
-                CssColorPreview.removeColorMarks();
-                return;
+            const cm = editor._codeMirror;
+            const nLen = cm.lineCount();
+            const aColors = [];
+
+            // match colors and push into an array
+            for (let i = 0; i < nLen; i++) {
+                let lineText = cm.getLine(i);
+
+                if ((lineText.indexOf('/*') !== -1) || (lineText.indexOf('*/') !== -1)) {
+                    continue;
+                } else {
+                    let regx = /:[^;]*;/g;
+
+                    lineText = lineText.match(regx);
+                    if (lineText) {
+                        let tempColors = lineText[0].match(COLOR_REGEX);
+                        // Support up to 4 colors
+                        if (tempColors && tempColors.length > 0) {
+                            let colors = tempColors.slice(0, 4);
+                            aColors.push({
+                                lineNumber: i,
+                                colorValues: colors
+                            });
+                        }
+                    }
+                }
             }
 
-            const editor = CssColorPreview.getEditor();
-            if (editor) {
+            showGutters(editor, aColors);
+        }
+    }
 
-                const cm = editor._codeMirror;
-                const nLen = cm.lineCount();
-                const aColors = [];
+    /**
+     * To remove the color marks from the gutter
+     */
+    function removeColorMarks() {
+        const editor = EditorManager.getActiveEditor();
+        if (editor) {
+            const cm = editor._codeMirror;
+            cm.clearGutter(gutterName);
+        }
+    }
 
-                // match colors and push into an array
-                for (let i = 0; i < nLen; i++) {
-                    let lineText = cm.getLine(i);
+    /**
+     * To display the color marks on the gutter
+     * @param {activeEditor} editor
+     * @param {Array.<object>} _results An array of objects which stores
+     *   all the line numbers and the colors to be displayed on that line.
+     */
+    function showGutters(editor, _results) {
+        if (editor && enabled) {
+            initGutter(editor);
+            const cm = editor._codeMirror;
+            cm.clearGutter(gutterName); // clear color markers
+
+            // Only add markers if enabled
+            if (enabled) {
+                cm.colorGutters = _.sortBy(_results, "lineNumber");
+
+                cm.colorGutters.forEach(function (obj) {
+                    let $marker;
 
-                    if ((lineText.indexOf('/*') !== -1) || (lineText.indexOf('*/') !== -1)) {
-                        continue;
+                    if (obj.colorValues.length === 1) {
+                        // Single color preview
+                        $marker = $("<i>")
+                            .addClass("ico-cssColorPreview")
+                            .css('background-color', obj.colorValues[0]);
+
+                        cm.setGutterMarker(obj.lineNumber, gutterName, $marker[0]);
                     } else {
-                        let regx = /:[^;]*;/g;
-
-                        lineText = lineText.match(regx);
-                        if (lineText) {
-                            let tempColors = lineText[0].match(COLOR_REGEX);
-                            // Support up to 4 colors
-                            if (tempColors && tempColors.length > 0) {
-                                let colors = tempColors.slice(0, 4);
-                                aColors.push({
-                                    lineNumber: i,
-                                    colorValues: colors
-                                });
+                        // Multiple colors preview
+                        $marker = $("<div>").addClass("ico-multiple-cssColorPreview");
+
+                        // Positions for up to 4 colors in grid
+                        const positions = [
+                            { top: 0, left: 0 },
+                            { top: 0, right: 0 },
+                            { bottom: 0, right: 0 },
+                            { bottom: 0, left: 0 }
+                        ];
+
+                        obj.colorValues.forEach((color, index) => {
+                            if (index < 4) {
+                                const $colorBox = $("<div>")
+                                    .addClass("color-box")
+                                    .css({
+                                        'background-color': color,
+                                        ...positions[index]
+                                    });
+                                $marker.append($colorBox);
                             }
-                        }
-                    }
-                }
-
-                CssColorPreview.showGutters(editor, aColors);
-            }
-        },
-
-        onChanged: function () {
-            CssColorPreview.showColorMarks();
-        },
-
-        init: function () {
-            CssColorPreview.showColorMarks();
-            CssColorPreview.registerHandlers();
-        },
-
-        registerHandlers: function () {
-            // Remove previous listeners to avoid multiple binding issue
-            EditorManager.off("activeEditorChange", CssColorPreview.onChanged);
-
-            // Add listener for all editor changes
-            EditorManager.on("activeEditorChange", function (event, newEditor, oldEditor) {
-                if (newEditor) {
-                    // Unbind the previous editor's change event if it exists
-                    if (oldEditor) {
-                        const oldCM = oldEditor._codeMirror;
-                        if (oldCM) {
-                            oldCM.off("change", CssColorPreview.onChanged);
-                        }
-                    }
+                        });
 
-                    // Bind change event to the new editor
-                    const cm = newEditor._codeMirror;
-                    if (cm) {
-                        cm.on("change", CssColorPreview.onChanged);
+                        cm.setGutterMarker(obj.lineNumber, gutterName, $marker[0]);
                     }
+                });
+            }
 
-                    CssColorPreview.showColorMarks();
-                }
-            });
+        }
+    }
 
-            // Handle the currently active editor at initialization
-            const activeEditor = EditorManager.getActiveEditor();
-            if (activeEditor) {
-                const cm = activeEditor._codeMirror;
-                if (cm) {
-                    cm.on("change", CssColorPreview.onChanged);
-                }
-                CssColorPreview.showColorMarks();
-            }
 
-        },
+    /**
+     * Initialize the gutter
+     * @param {activeEditor} editor
+     */
+    function initGutter(editor) {
 
-        initGutter: function (editor) {
+        const cm = editor._codeMirror;
+        const gutters = cm.getOption("gutters").slice(0);
+        let str = gutters.join('');
+        if (str.indexOf(gutterName) === -1) {
+            gutters.unshift(gutterName);
+            cm.setOption("gutters", gutters);
+        }
+    }
 
-            const cm = editor._codeMirror;
-            const gutters = cm.getOption("gutters").slice(0);
-            let str = gutters.join('');
-            if (str.indexOf(gutterName) === -1) {
-                gutters.unshift(gutterName);
-                cm.setOption("gutters", gutters);
-            }
-        },
-
-        showGutters: function (editor, _results) {
-            if (editor && enabled) {
-                CssColorPreview.initGutter(editor);
-                const cm = editor._codeMirror;
-                cm.clearGutter(gutterName); // clear color markers
-
-                // Only add markers if enabled
-                if (enabled) {
-                    cm.colorGutters = _.sortBy(_results, "lineNumber");
-
-                    cm.colorGutters.forEach(function (obj) {
-                        let $marker;
-
-                        if (obj.colorValues.length === 1) {
-                            // Single color preview
-                            $marker = $("<i>")
-                                .addClass("ico-cssColorPreview")
-                                .css('background-color', obj.colorValues[0]);
-
-                            cm.setGutterMarker(obj.lineNumber, gutterName, $marker[0]);
-                        } else {
-                            // Multiple colors preview
-                            $marker = $("<div>").addClass("ico-multiple-cssColorPreview");
-
-                            // Positions for up to 4 colors in grid
-                            const positions = [
-                                { top: 0, left: 0 },
-                                { top: 0, right: 0 },
-                                { bottom: 0, right: 0 },
-                                { bottom: 0, left: 0 }
-                            ];
-
-                            obj.colorValues.forEach((color, index) => {
-                                if (index < 4) {
-                                    const $colorBox = $("<div>")
-                                        .addClass("color-box")
-                                        .css({
-                                            'background-color': color,
-                                            ...positions[index]
-                                        });
-                                    $marker.append($colorBox);
-                                }
-                            });
+    /**
+     * Register all the required handlers
+     */
+    function registerHandlers() {
+        // Remove previous listeners to avoid multiple binding issue
+        EditorManager.off("activeEditorChange", onChanged);
+
+        // Add listener for all editor changes
+        EditorManager.on("activeEditorChange", function (event, newEditor, oldEditor) {
+            if (newEditor) {
+                // Unbind the previous editor's change event if it exists
+                if (oldEditor) {
+                    const oldCM = oldEditor._codeMirror;
+                    if (oldCM) {
+                        oldCM.off("change", onChanged);
+                    }
+                }
 
-                            cm.setGutterMarker(obj.lineNumber, gutterName, $marker[0]);
-                        }
-                    });
+                // Bind change event to the new editor
+                const cm = newEditor._codeMirror;
+                if (cm) {
+                    cm.on("change", onChanged);
                 }
 
+                showColorMarks();
             }
-        },
-
-        // Method to remove colors when disabled
-        removeColorMarks: function () {
-            const editor = CssColorPreview.getEditor();
-            if (editor) {
-                const cm = editor._codeMirror;
-                cm.clearGutter(gutterName);
+        });
+
+        // Handle the currently active editor at initialization
+        const activeEditor = EditorManager.getActiveEditor();
+        if (activeEditor) {
+            const cm = activeEditor._codeMirror;
+            if (cm) {
+                cm.on("change", onChanged);
             }
+            showColorMarks();
         }
-    };
 
+    }
+
+    /**
+     * Checks for preference changes, to enable/disable the feature
+     */
     function preferenceChanged() {
         const value = PreferencesManager.get(PREFERENCES_CSS_COLOR_PREVIEW);
         enabled = value;
         if (!value) {
-            CssColorPreview.removeColorMarks();
+            removeColorMarks();
         } else {
-            CssColorPreview.showColorMarks();
+            showColorMarks();
         }
     }
 
+    /**
+     * Function that gets triggered when any change occurs on the editor
+     */
+    function onChanged() {
+        showColorMarks();
+    }
+
+    /**
+     * Driver function, runs at the start of the program
+     */
+    function init() {
+        showColorMarks();
+        registerHandlers();
+    }
+
     // init after appReady
     AppInit.appReady(function () {
         PreferencesManager.on("change", PREFERENCES_CSS_COLOR_PREVIEW, preferenceChanged);
-        setTimeout(CssColorPreview.init, 1000);
+        init();
     });
-
 });
 
diff --git a/src/styles/brackets.less b/src/styles/brackets.less
index 5ed299121..8b9fa46c0 100644
--- a/src/styles/brackets.less
+++ b/src/styles/brackets.less
@@ -3522,3 +3522,35 @@ label input {
     }
 }
 
+// These styles are for CssColorPreview feature
+// Check `extensionsIntegrated/CSSColorPreview for more reference
+/* Single color preview */
+.ico-cssColorPreview {
+    border: solid 1px rgba(0, 0, 0, 0.2);
+    display: inline-block;
+    height: 14px;
+    width: 14px;
+    margin-left: 6px;
+    position: absolute;
+    top: 8px;
+    z-index: 99999;
+}
+
+/* Multiple colors preview container (this is a div) */
+.ico-multiple-cssColorPreview {
+    position: relative;
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    margin-left: 6px;
+    border: solid 1px rgba(0, 0, 0, 0.2);
+    z-index: 99999;
+}
+
+/* For individual color boxes, they will be added inside the main .ico-multiple-cssColorPreview div */
+.ico-multiple-cssColorPreview .color-box {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    box-sizing: border-box;
+}