Question

我想使这样的事情成为可能：

<div 
   class="overflow-scroll h-screen antialiased ..."
   class:whiteTheme="bg-gray-100 text-gray-800 ..."
   class:darkTheme="bg-blue-900 ..."
>
...
</div>

因此将始终应用一组类。仅当whiteTheme为真时一组，而仅当darkTheme为真时另一组。

我知道我可以定义一个whiteTheme和一个darkTheme css类，并使它像那样工作

<div 
   class="overflow-scroll h-screen antialiased ..."
   class:whiteTheme
   class:darkTheme
>

但是关键是我想设计每个元素单独（尤其是在应用程序的开始阶段）。而且必须为不同类中的每个元素定义我的类集……对我而言，这不符合使用Tailwind.css并尝试特定元素的目的（在css定义和元素定义之间不来回切换）。

我可以选择的另一种方法是：

<div 
   class="overflow-scroll h-screen antialiased ... {whiteTheme?'bg-gray-100 text-gray-800 ...':'bg-blue-900 ...'}">

可以，但是我希望通过在单独的属性中定义内容来提高可读性和可维护性...

所以我想知道是否有一种方法可以使其按我想要的方式工作。我可以轻松地为此扩展Svelte编译器吗？

最佳约翰内斯

Answer 1

您与您的一项提案很接近，但与您想要的相反： class:something={condition}

这将在满足条件时应用 something 类。

因此，您必须这样做

class:bg-gray-100={whiteTheme}
class:text-gray-800={whiteTheme}

您也可以选择

<script>
 $: whiteThemeClasses = whiteTheme ? "gray text..." : "";
 ...
...class=" fixedclasses {whiteThemeClasses} {blackThemeClasses}

Answer 2

您可以将亮色和暗色的类列表放入字符串变量中，并根据商店中变量darkTheme的真实性在三元类之间进行切换，以便在更改时更新所有组件。

它允许您分别为各个主题设置明暗主题的样式，并大大提高了可读性，因为空格分隔的字符串类似于我们以前在css中看到的字符串，并且可以将类列表扩展到每个组件的顶部，以保持可见性/易于访问。

<script>
    let light = 'bg-gray-100 text-gray-800 shadow-xl';
    let dark = 'bg-blue-900 text-white';

    import { darkTheme } from './store.js';
</script>

<div class="overflow-scroll h-screen p-3 {$darkTheme? dark : light}" >
...
</div>

这是工作中的example in the REPL

Answer 3

好吧，经过更多的挖掘，我决定采用以下模式：

使用Tailwind插件https://github.com/ChanceArthur/tailwindcss-dark-mode。这种解决方案使事情顺风顺水（从这个角度来看，这很好）。代码看起来像

<div 
   class="overflow-scroll 
          h-screen 
          antialiased 
          ... 
          bg-gray-100 
          text-gray-800
          ...
          dark:bg-blue-900
          dark:text-yellow-200
          ..."
>
...
</div>

这对所有“静态”样式都很好。对于诸如active/selected元素这样的动态事物，我决定使用以下样式：

import { darkTheme } from '../stores.js';
...
<div
    class:selected
    class:$darkTheme
...
<style>
.selected {
    // all common styles
    @apply cursor-default;

    // all light styles
    @apply text-blue-600;
    @apply border-blue-600;
}

.selected.\$darkTheme {
    // all dark styles
    @apply text-yellow-700;
    @apply border-yellow-700;
}
</style>

我认为使用样式的较小组件还不错。但是，我仍然会发现用Svelte有趣的方式定义自定义任务的可能性……或更改语法，例如class:true/false={my classes ...}

一些附加说明：

类似于插件https://github.com/ChanceArthur/tailwindcss-dark-mode，我发现了一篇不错的博客文章，仅使用自定义screen定义即可产生相同的结果：https://stefanzweifel.io/posts/support-mojave-dark-mode-with-tailwind-css/。
- 但是，这仅依赖于媒体查询，因此，如果您想在应用程序中使用自定义的明暗开关...我找不到解决办法。
- 但是，使用此方法的好处是您可以将@apply与type User @model) { id: ID! email: String! password: String! friends: [Friend] @connection(name: "UserFriendConn") blockedUsers: [BlockedUser] @connection(name: "UserBlockedConn") friendRequests: [FriendRequest] @connection(name: "UserFriendRequestConn")结合使用，而目前无法使用该插件...（https://github.com/ChanceArthur/tailwindcss-dark-mode/issues/3）。
  < / li>

Answer 4

您可以执行以下操作：

<h1 class="text-black dark:text-white">Hello world!</h1>

只需遵循本教程here！

Answer 5

这样做：

className={`block text-sm font-medium leading-5 ${
            dark ? 'text-gray-800' : 'text-gray-300'
          }`}

这只是条件类格式的示例，您可以使用条件和属性样式变量对其进行修改

苗条：指定多个条件类属性

5 个答案: