diff --git a/scripts/postcss/color.js b/scripts/postcss/color.mjs
similarity index 91%
rename from scripts/postcss/color.js
rename to scripts/postcss/color.mjs
index b1ef7073..bd2ea3ea 100644
--- a/scripts/postcss/color.js
+++ b/scripts/postcss/color.mjs
@@ -13,10 +13,9 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+import {offColor} from 'off-color';
 
-const offColor = require("off-color").offColor;
-
-module.exports.derive = function (value, operation, argument, isDark) {
+export function derive(value, operation, argument, isDark) {
     const argumentAsNumber = parseInt(argument);
     if (isDark) {
         // For dark themes, invert the operation
diff --git a/vite.common-config.js b/vite.common-config.js
index 5d65f8e2..7f0e57a8 100644
--- a/vite.common-config.js
+++ b/vite.common-config.js
@@ -8,8 +8,8 @@ const path = require("path");
 const manifest = require("./package.json");
 const version = manifest.version;
 const compiledVariables = new Map();
-const derive = require("./scripts/postcss/color").derive;
 const replacer = require("./scripts/postcss/svg-colorizer").buildColorizedSVG;
+import {derive} from "./scripts/postcss/color.mjs";
 
 const commonOptions = {
     logLevel: "warn",