search

skeletonlabs / skeleton

A complete design system and component solution, built on Tailwind.
https://skeleton.dev
MIT License
4.96k stars 315 forks source link

Themes doesn't seem to work in latest version #2000

Closed qxb3 closed 1 year ago

qxb3 commented 1 year ago

Current Behavior

Currently, themes dont work in the latest version, it all just white even i opt in to use dark mode in default. i did use a previous version v1 and there it seems to work just fine. Might be a problem on my side but idk

Expected Behavior

Themes should work

Steps To Reproduce

This is all based on the Getting started page in the docs:

npm create svelte@latest my-skeleton-app
npm install
npm i -D @skeletonlabs/skeleton @skeletonlabs/tw-plugin
npx svelte-add@latest tailwindcss
npm install

Added this config in tailwind.config.js:

// @ts-check
import { join } from 'path';

// 1. Import the Skeleton plugin
import { skeleton } from '@skeletonlabs/tw-plugin';

/** @type {import('tailwindcss').Config} */
export default {
    // 2. Opt for dark mode to be handled via the class method
    darkMode: 'class',
    content: [
        './src/**/*.{html,js,svelte,ts}',
        // 3. Append the path to the Skeleton package
        join(require.resolve(
            '@skeletonlabs/skeleton'),
            '../**/*.{html,js,svelte,ts}'
        )
    ],
    theme: {
        extend: {},
    },
    plugins: [
        // 4. Append the Skeleton plugin (after other plugins)
        skeleton({
            themes: { preset: [ "skeleton" ] }
            })
    ]
}

Used the skeleton theme and darkmode in default:

<!DOCTYPE html>
<html lang="en" data-theme="skeleton" class="dark">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%sveltekit.assets%/favicon.png" />
        <meta name="viewport" content="width=device-width" />
        %sveltekit.head%
    </head>
    <body data-sveltekit-preload-data="hover">
        <div style="display: contents">%sveltekit.body%</div>
    </body>
</html>

Link to Reproduction / Stackblitz

https://stackblitz.com/edit/sveltejs-kit-template-default-iy1kbi

More Information

+layout.svelte

<script>
  import "../app.postcss";
</script>

<slot />

app.postcss

@tailwind base;
@tailwind components;
@tailwind utilities;

package.json

{
  "name": "my-skeleton-app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@skeletonlabs/skeleton": "^2.0.0",
    "@skeletonlabs/tw-plugin": "^0.1.0",
    "@sveltejs/adapter-auto": "^2.0.0",
    "@sveltejs/kit": "^1.20.4",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.24",
    "postcss-load-config": "^4.0.1",
    "svelte": "^4.0.5",
    "tailwindcss": "^3.3.2",
    "vite": "^4.4.2"
  },
  "type": "module"
}

Screenshot

image

Sarenor commented 1 year ago

It seems like the css variables the theme system uses aren't defined in your reproduction. Considering that Skeleton V2 has been out for nearly a month if you count the pre-release version and you're the first to report it, I'd assume it's something in the setup.

How did you set up your project?

qxb3 commented 1 year ago

It seems like the css variables the theme system uses aren't defined in your reproduction.

What do you mean by that?

How did you set up your project?

Its in the steps to reproduced i followed exactly that

Sarenor commented 1 year ago

What do you mean by that?

Exactly what I said: The theme variables that should govern CSS attributes for colors, fonts, etc are not defined:

image

Its in the steps to reproduced i followed exactly that

Sorry, missed those while I was checking out the rest. Any particular reason you're going with the manual instead of the CLI approach?

qxb3 commented 1 year ago

Exactly what I said: The theme variables that should govern CSS attributes for colors, fonts, etc are not defined:

I see

Sorry, missed those while I was checking out the rest. Any particular reason you're going with the manual instead of the CLI approach?

No particular reason, just preference i guess. i will try to use the cli and see if there is any changes

denis-kasak commented 1 year ago

For me: if i set enhancements:true for a theme to true, no enhancements are shown. If I set enhancements:false, enhancements are shown. ==> For me the expected behavior of enhancements is negated.

Sarenor commented 1 year ago

@denis-kasak that's probably a separate problem, would you be so kind as to open a separate issue?

@qxb3 only notable differences to your dependencies that I found compart to a CLI project was postcss-load-config, could you try removing it and seeing if it helps?

CLI dependencies:

{
  "name": "another-v3-app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "^2.0.0",
    "@sveltejs/kit": "^1.20.4",
    "svelte": "^4.0.5",
    "vite": "^4.4.2",
    "postcss": "8.4.29",
    "autoprefixer": "10.4.15",
    "tailwindcss": "3.3.3",
    "@skeletonlabs/skeleton": "2.0.0",
    "@skeletonlabs/tw-plugin": "0.1.0",
    "vite-plugin-tailwind-purgecss": "0.1.3"
  },
  "type": "module"
}
qxb3 commented 1 year ago

Tried the cli, works!

only notable differences to your dependencies that I found compart to a CLI project was postcss-load-config, could you try removing it and seeing if it helps?

Did that but the theme still doesnt work

Sarenor commented 1 year ago

Alright, I'll leave this to Contributors who have a firmer grasp on the magics of vite and tailwind then. Glad the CLI at least worked for you :)

qxb3 commented 1 year ago

@Sarenor i figured out the problem now. i am putting the data-theme="skeleton" on my html element instead of the body elem

Before:

<!DOCTYPE html>
<html lang="en" data-theme="skeleton" class="dark">
        <head>
                <meta charset="utf-8" />
                <link rel="icon" href="%sveltekit.assets%/favicon.png" />
                <meta name="viewport" content="width=device-width" />
                %sveltekit.head%
        </head>
        <body data-sveltekit-preload-data="hover">
                <div style="display: contents">%sveltekit.body%</div>
        </body>
</html>

After:

<!DOCTYPE html>
<html class="dark" lang="en">
        <head>
                <meta charset="utf-8" />
                <link rel="icon" href="%sveltekit.assets%/favicon.png" />
                <meta name="viewport" content="width=device-width" />
                %sveltekit.head%
        </head>
        <body data-sveltekit-preload-data="hover" data-theme="skeleton">
                <div style="display: contents">%sveltekit.body%</div>
        </body>
</html>

lmao

Sarenor commented 1 year ago

I'm a blind fool... Thanks for getting back with that!