Possible to access the settings in JS?

[itzaks]

Hi! I'm using unocss with much joy.

I'm curious if it is possible to access some variables in my Vue-project. Would be great to be able to get the breakpoints in pixels to use the breakpoints in some js-logic. Would be nice to be able to access the colors as well. Currently grabbing them by importing windi as well, like: import colors from 'windicss/colors'

Cheers

[antfu]

import { theme } from '@unocss/preset-mini'

[Exelord]

I think this is not a solution. It does not resolve a custom config from vite file and does not take into account other presets.

The solution could be a virtual module that is build out of the whole config

[vimercati-samir]

I don't know if it has been already addressed, but you can simply import unocssConfig from "../uno.config.ts" in your app and you have your theme object and also the theme related to the presets that you are using, pretty straightforward. I wasn't able to find an official way of getting the theme like tailwindcss resolveConfig so I'm not sure if it's the appropriate way of doing things, but it works.

[paschun]

@vimercati-samir's idea worked for me, except I didn't use the default export, I did export const themeColors from my uno.config.ts , while using those same themeColors inside the default export
defineConfig({ theme: { colors: themeColors } })

[michealroberts]

I totally agree that this should not be marked as the answer.

What we're looking for, is for whatever preset or usage, we can import some idea of the theme.

[paulm17]

I have to agree with @michealroberts the selected answer isn't the right one.

I've actually tried duplicating the functionality commonly found around the source:

const myPromise = new Promise(async (resolve) => {
      const options: UnoPostcssPluginOptions = {};
      const { cwd = process.cwd(), configOrPath } = options;
      const config = loadConfig(cwd, configOrPath);

      let uno: UnoGenerator;

      try {
        const cfg = await config;
        // @ts-ignore
        if (!uno) {
          uno = createGenerator(cfg.config);
        
          resolve(uno.config as any).theme);
        }
      } catch (error: any) {
        throw new Error(`UnoCSS config not found: ${error.message}`);
      }
    });

While it works and I get the full completed theme. The problem with this is that I received the following errors:

Critical dependency: the request of a dependency is an expression

Not only that the package index.js is over 40k lines long and vs code sends my macbook fans to 100%. 😩

I'll be attempting to create my own version of resolveConfig that tailwind has, for unocss.

Let's see whether or not I'm successful... 🤔

[zyyv]

How about this plugin https://github.com/zyyv/unplugin-unocss-config?