unpreset / unocss-preset-theme

The dynamic theme presets for UnoCSS.
https://unocss-preset-theme.todev.cc
119 stars 11 forks source link

Not working, theme values directly applied #41

Closed silveltman closed 11 months ago

silveltman commented 1 year ago

I have the following config:

// uno.config.ts
import { defineConfig, presetUno } from 'unocss'
import presetTheme from 'unocss-preset-theme'

export default defineConfig({
  theme: {
    colors: {
      mycolor: 'red'
    }
  },
  presets: [
    presetUno(),
    presetTheme({
      theme: {
        mytheme: {
          colors: {
            mycolor: 'blue'
          }
        },
      }
    })
  ],
})

it putputs this css:

/* layer: default */
.text-mycolor{color:blue;}

Am I missing something?

Playground: https://uno.antfu.me/play/?html=DwEwlgbgBAxgNgQwM5ILwCJ0D4BQwAWAjLIihgC4CmAHuQLQC2AnjAPZysBO2%2BlcHUAO5c4IYAHoiuCeAi48sksjTpm5Xg0rY8RJWXRVajFuy48%2BA4Z1ESpecbKA&config=PTAEFcDsHsDoGNqQGYEsDmsAuBnAUKgLYAO0ATlqAN6gAmApmpPQMJJroA0oxZ9O9LAFUYoAL6hkZaIVAByKNHg4ccgiXKVe-QQBUAFvUL1J02QpjKcAWm0Cs1rIeNq89AB6kKdRgENwADaUDEys7BgAFFR4oKBORvQAXNQxsaCIAeQ4ydFpaYQAnhnkyXJ8tGp5YqlinKl2gtmgANqpsQ3CMBEAlHV5HQYJUW1p8cY5I3mFY0kpefPp0JlkTbkL84XFZKUARgHg9JXrsdXHtZPiI2LdqQC6dddAA&css=Q&options=N4XyA

silveltman commented 1 year ago

With another setup I get different, but still unexpected behaviour. Config:

// uno.config.ts
import { defineConfig, presetUno } from 'unocss';
import presetTheme from 'unocss-preset-theme';

export default defineConfig({
    theme: {
        colors: {
            fontSize: {
                myfont: '40px'
            }
        }
    },
    presets: [
        presetUno(),
        //@ts-ignore
        presetTheme({
            theme: {
                // Configure dark themes
                large: {
                    fontSize: {
                        myfont: '60px'
                    }
                },
                // Configure compact themes
                small: {
                    fontSize: {
                        myfont: '20px'
                    }
                }
            }
        })
    ]
});

html:

<h1 class="text-myfont">hello world</h1>
<h1 class="text-myfont small">hello world</h1>

The default theme is not applied when no theme class is set. This would mean I would have to create a medium class too, and aply that to the body or something. Would not be a problem to me, but the docs say this is not neccesary.

Playground: https://uno.antfu.me/play/?html=JAHgFgjABAxgNgQwM5ILwCIAuBTAHpgWgFsBPAMwHsA7TdAPjGzjgqgHcKAnOAExAHpIdAFChIsRCgw58xctUxREnAObZ6jZqw7c%2BgiHSA&config=PTAEFcDsHsDoGNqQGYEsDmsAuBnAUKgLYAO0ATlqAN6gAmApmpPQMJJroA0oxZ9O9LAFUYoAL6hkZaIVAByKNHg4ccgNwES5Sr36CAKgAt6hepOmyFMZTgC0ugVltZjp9Xjz0AHqQp1GAIbgADaUDEys7BgAFFR4AJAuJvQAXNQJ8YjB5DhpcfEFyEhYAMqoAF6p6QUFhACeRZBYaXIALAAMxF5yGfFiGf19nAkOgrmgANoZo8Iw0QCUwwUgAAK4thgwfNN8jkbJsb1Jpnm98SCgbCgY4Hx0AWQA1qDH-GfBD%2BhV%2BTXxjaUVb5nWoNYotABsnW6wMGNTESxqFyuHFuZkQJAC8Eor3wvxwhACwWCp1%2Bf2KZUqJNJ9X%2BLQATFCeqTYQUWbCxPMEgBdPAcjRAA&css=Q&options=N4XyA

Dunqing commented 12 months ago

Your configuration of the default theme isn't right. The fontSize should define in theme, the same level as colors.

You can see https://uno.antfu.me/play/?html=JAHgFgjABAxgNgQwM5ILwCIAuBTAHpgWgFsBPAMwHsA7TdAPjGzjgqgHcKAnOAExAHpIdAFChIsRCgw58xctUxREnAObZ6jZqw7c%2BgiHSA&config=PTAEFcDsHsDoGNqQGYEsDmsAuBnAUKgLYAO0ATlqAN6gAmApmpPQMJJroA0oxZ9O9LAFUYoAL6hkZaIVAByKNHg4ccgiXKVe-QQBUAFvUL1J02QpjKcAWm0Cs1rIeNq89AB6kKdRgENwADaUDEys7BgAFFR4oKBORvQAXNQxsZJIWADKqABeSSlpaYQAnsgZyXIALAAMxO5ynKmxYo2FiAHkOMlULam9sXaCXaAA2k08fPYi0BEAlK1pIAACuNYYMHzjg1gGCVHjsfHG3QeLYGwoGOB8dL5kANZxzvynsQF36PnRhT-pkFm5L6vH4lMr-CoANlq9QWv2asJ%2B-ThIFAFw41xMiBIvnglCOLzhoBwhF8AQCJ0JsTBALyFMpsVB5XkACZoQ1gfDgUjCtzxPNUgBdRpiWZ4IA&css=Q&options=N4XyA

silveltman commented 11 months ago

I see, stupid mistake.. Thanks!