diff --git a/doc/IMPORT-ISSUES.md b/doc/IMPORT-ISSUES.md
new file mode 100644
index 00000000..d4bb62fe
--- /dev/null
+++ b/doc/IMPORT-ISSUES.md
@@ -0,0 +1,11 @@
+## How to import common-js dependency using ES6 syntax
+---
+Until [#6632](https://github.com/vitejs/vite/issues/6632) is fixed, such imports should be done as follows:
+
+```ts
+import * as pkg from "off-color";
+// @ts-ignore 
+const offColor = pkg.offColor ?? pkg.default.offColor;
+```
+
+This way build, dev server and unit tests should all work.
diff --git a/src/platform/web/theming/DerivedVariables.ts b/src/platform/web/theming/DerivedVariables.ts
index 5a626bfa..ca46a8fd 100644
--- a/src/platform/web/theming/DerivedVariables.ts
+++ b/src/platform/web/theming/DerivedVariables.ts
@@ -98,8 +98,9 @@ export class DerivedVariables {
     }
 }
 
-import pkg from "off-color";
-const {offColor} = pkg;
+import * as pkg from "off-color";
+// @ts-ignore 
+const offColor = pkg.offColor ?? pkg.default.offColor;
 
 export function tests() {
     return {
diff --git a/src/platform/web/theming/shared/color.mjs b/src/platform/web/theming/shared/color.mjs
index e777bfac..8af76b6b 100644
--- a/src/platform/web/theming/shared/color.mjs
+++ b/src/platform/web/theming/shared/color.mjs
@@ -13,8 +13,8 @@ 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 pkg from 'off-color';
-const offColor = pkg.offColor;
+import * as pkg from 'off-color';
+const offColor = pkg.offColor ?? pkg.default.offColor;
 
 export function derive(value, operation, argument, isDark) {
     const argumentAsNumber = parseInt(argument);