alpine:3.8_使用CSS和Alpine.js的简单颜色主题切换器实现

最新推荐文章于 2024-06-26 09:50:46 发布

weixin_26738395

最新推荐文章于 2024-06-26 09:50:46 发布

阅读量764

点赞数

文章标签： python css js java html ViewUI

原文链接：https://medium.com/swlh/simple-color-theme-implementation-with-css-and-alpine-js-ab8bb09f843f

版权

本文介绍了如何利用CSS和Alpine.js在网页中实现一个简单的颜色主题切换功能。通过Alpine.js的响应式特性，可以轻松地切换不同主题，为用户提供个性化的界面体验。

摘要由CSDN通过智能技术生成

alpine:3.8

As we start building a website, at some point we would wonder what will we use as our color theme. In demo sites, they usually provide such feature where user can toggle different color schemes and let them decide what they prefer. Thence, this post, is another attempt on implementing such feature.

当我们开始建立网站时，有时会想知道我们将使用什么作为我们的色彩主题。在演示站点中，它们通常提供这样的功能，用户可以在其中切换不同的配色方案，并让他们决定自己喜欢什么。因此，本文是实现这种功能的另一种尝试。

准备我们的网页布局 (Prepare our Web Layout)

So, to start, open up your terminal and let’s create a new folder with our main html file and our assets folders.

因此，首先，打开您的终端，让我们用我们的主要html文件和资产文件夹创建一个新文件夹。

mkdir theming && cd theming && touch index.html && mkdir -p assets/{css,js}

In the index.html file let’s add a very simple html content for our layout.

在index.html文件中，让我们为布局添加一个非常简单的html内容。

<html>
    <head>
        <title>Theming</title>
    </head>
    <body>        
        <div class="header">
            <h1>My Simple Theme</h1>
        </div>
        
        <div class="topnav">
            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>
        </div>
        
        <div class="row">
            <div class="column">
              <h2>Column</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
            </div>
            
            <div class="column">
              <h2>Column</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
            </div>
            
            <div class="column">
              <h2>Column</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
            </div></div></body>
</html>

Then, in your terminal, let’s add our css resource — touch assets/css/theme.css and then add the following css content to style our simple html layout.

然后，在您的终端中，让我们添加CSS资源- touch assets/css/theme.css ，然后添加以下CSS内容来设置简单的html布局样式。

/* Style the header */
* {
  box-sizing: border-box;
}.header {
  padding: 20px;
  text-align: center;
}/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

in our html, we need to update the html head part to include the newly created css file —

在我们的html中，我们需要更新html头部，以包括新创建的css文件-

<head>
    <title>Theming</title>
    <link rel="stylesheet" href="./assets/css/theme.css">
</head>

At this point, you would have this simple and bare layout —

在这一点上，您将拥有简单而裸露的布局-

让我们开始主题吧！ (Let’s Start Theming!)

行动中的Alpine.js (Alpine.js in Action)

Cool kids nowadays, have been using a jQuery alternative, that is alpine.js. And since, I’d like us to be one of those kids, therefore, let’s use it!

时尚的年轻人如今，已经使用jQuery的选择，这是一个 lpine.js 。而且，由于我希望我们成为这些孩子中的一员，因此，让我们使用它吧！

<body>        
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
    <script src="assets/js/theme.js"></script>
 ...
</body>

Notice that we have also included assets/js/theme.js . We’ll be using it for our own Javascript needs. But before we can use it, you’ll need to create the js file first — touch assets/js/theme.js and have it with the following js content.

注意，我们还包含了assets/js/theme.js 。我们将根据自己的Java脚本需求使用它。但是在使用它之前，您需要首先创建js文件- touch assets/js/theme.js并使其具有以下js内容。

function theme() {
    return {
        colorThemes: [
            'light-yellow', //#f7e8a4
            'dark-blue', // #172A3A
            'almond', // #d9c5b2
            'green', // #04A777
        ],
        themeClass: {},
        choiceClass(className) {
            const classes = {'color-choice': true};
            classes[className] = true;
            return classes;
        },
        changeTheme(className) {
            this.themeClass = this.colorThemes.reduce((allClasses, cn) => {
                allClasses[cn] = className === cn;
                return allClasses;
            }, {});
        }
    }
}

So what the js file does is that, it will be used to feed data to our DOM with the help of alpine.js. Awesome, right! Anyway, as you can see, we only need two properties and two functions to make our feature works —

因此，js文件的作用是，它将在alpine.js的帮助下将数据提供给我们的DOM。太好了，对！无论如何，正如您所看到的，我们只需要两个属性和两个函数即可使我们的功能正常工作-

colorThemes — our default color themes which can easily be updated anytime you want.

colorThemes我们的默认颜色主题，可以随时随地轻松更新。

themeClass — will represent the class or color theme to be applied to our layout.

themeClass —将代表要应用于我们的布局的类或颜色主题。

choiceClass() — set the color choice classes

choiceClass() —设置颜色选择类

changeTheme() — updates the class or color theme base on the selected color.

changeTheme() —根据所选颜色更新类或颜色主题。

For us to utilize the preceding properties and functions, let’s now update our html.

为了让我们利用前面的属性和功能，现在让我们更新html。

We need to feed our data to a certain scope, let’s add it right in our html body and also apply the color theme class within the body element —
我们需要将数据提供给一定范围，让我们将其添加到html正文中，并在body元素中应用颜色主题类-

<body x-data="theme()" :class="themeClass">
...
</body>

themeClass is a reactive property and will be changed when it is updated via some events.

themeClass是一个React性属性，通过某些事件更新时将被更改。

And for the most important part let’s add the color choices in our html. Let’s add them in our header using alpine.js. We can dynamically show our color themes this way —
对于最重要的部分，让我们在html中添加颜色选择。让我们使用alpine.js将它们添加到标题中。我们可以通过这种方式动态展示我们的色彩主题-

<div class="header">
    <h1>My Simple Theme</h1>
    <div>
        <span class="color-theme-container">
            <template x-for="(ct, index) in colorThemes" :key="index">
                <span x-bind:class="choiceClass(ct)" @click="changeTheme(ct)"></span>
            </template>
        </span>
    </div>
</div>

There , we loop colorThemes property and add a color choice or option. We then also bind a click event for each choice so that when a choice was clicked it would update the property themeClass which eventually changes our color theme.

在那里，我们循环colorThemes属性并添加颜色选择或选项。然后，我们还为每个选择绑定一个click事件，以便在单击一个选择时将更新属性themeClass ，最终更改我们的颜色主题。

By now, we already have a working manipulation of color themes to our html body. However, we need to determine our css for our color themes to finally complete our color theme switcher feature.

到现在为止，我们已经可以对HTML主体进行颜色主题的有效操作。但是，我们需要确定颜色主题CSS，才能最终完成颜色主题切换器功能。

CSS变量的力量 (The Power of CSS Variables)

There is a great power with css variables. It makes styling more flexible and we will be utilizing it right here. In our assets/css/theme.css add the following styling —

CSS变量具有强大的功能。它使样式更加灵活，我们将在这里使用它。在我们的assets/css/theme.css添加以下样式-

/* Color Themes */
.light-yellow {
  --background-color: #f7e8a4;
  --font-color: #000000;
}.dark-blue {
  --background-color: #172A3A;
  --font-color: #eee;
}.almond {
  --background-color: #d9c5b2;
  --font-color: #000000;
}.green {
  --background-color: #04A777;
  --font-color: #f5efef;
}/* Color Choice */
.color-choice {
  height: 30px;
  width: 30px;
  background-color: var(--background-color);
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}.color-choice:hover {
  opacity: 0.5;
}.color-theme-container {
  background-color: white;
  border: 2px solid #1f1e1e;
  padding: 25px 10px 5px;
}/* Color Theme Application*/
body {
  background-color: var(--background-color);
  color: var(--font-color);
}

In the css, we make use of two main css variables --background-color and --font-color to every color class we have set. These variables can then be used on other css definitions which is very convenient for our color theme styling. When a certain color class is added in our html body, consequently, the variables value set for that color class will be applied to the body’s background-color and color . Nice!

在css中，我们将两个主要的css变量--background-color和--font-color用于已设置的每个颜色类。然后，可以将这些变量用于其他CSS定义，这对于我们的颜色主题样式非常方便。因此，当在我们的html主体中添加某个颜色类别时，为此颜色类别设置的变量值将应用于该主体的background-color和color 。真好！

And now you’ll have a simple color theme switcher like this.

现在，您将拥有一个像这样的简单颜色主题切换器。

I know, there are some sophisticated implementation on famous css frameworks out there, but my take on this, is to give you an idea on adding something like this in your existing project or on your simple app. Anyway, it’s been fun! I hope you enjoyed it too.

我知道，在著名的css框架上有一些复杂的实现，但是我的看法是，给您一个在现有项目或简单应用程序中添加类似内容的想法。无论如何，这很有趣！希望您也喜欢。

You can find the entire codes at https://github.com/dxc04/simple-theme-with-css-alpinejs .

您可以在https://github.com/dxc04/simple-theme-with-css-alpinejs找到完整的代码。

翻译自: https://medium.com/swlh/simple-color-theme-implementation-with-css-and-alpine-js-ab8bb09f843f

alpine:3.8

weixin_26738395

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
alpine:3.8_使用CSS和Alpine.js的简单颜色主题切换器实现

alpine:3.8As we start building a website, at some point we would wonder what will we use as our color theme. In demo sites, they usually provide such feature where user can toggle different color sche...
复制链接

扫一扫