关于javascript:深入了解CSS颜色架构提升你的网页设计技巧

33次阅读

共计 10127 个字符，预计需要花费 26 分钟才能阅读完成。

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验 ChatGpt plus 版本的，咱们出的钱 体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找 bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home

这篇文章深入探讨了 CSS 色彩架构的重要性和实际办法，以帮忙开发人员和设计师创立更具吸引力和一致性的网页设计。作者首先介绍了 CSS 色彩的基础知识，包含色彩表示法、色彩值和色彩抉择工具。接着，他强调了良好的色彩架构对于网页的视觉吸引力和用户体验的重要性。

作者提供了一些实用的技巧和领导准则，帮忙读者建设和组织无效的色彩架构。他探讨了色彩调色板的设计，包含主色、辅助色和中性色的抉择和配对。此外，他强调了在不同设施和主题模式下放弃一致性的重要性，并分享了一些工具和资源，帮忙读者更好地治理和调整色彩计划。

最初，作者总结了文章的次要观点，并激励读者在设计和开发过程中器重色彩架构的重要性。他强调了良好的色彩抉择和组织对于网页的整体外观和用户体验的影响。

上面是注释~~~

编程语言中最艰难的事件之一就是以易于了解和保护的形式组织代码。

在这篇文章中，我想解释一下我是如何在咱们的 Pink Design 我的项目中工作和组织色彩的。

就像生存中的所有，咱们有许多正确的办法，更多的谬误的办法来做同样的事件。在我向你展现如何组织咱们的 CSS 变量之前，让咱们先探讨在 CSS 中组织色彩的错误方法。

留神：咱们的一些色彩架构应用 Sass 预处理。

定义 CSS 色彩变量的错误方法

审查其余 CSS 架构时，尝试思考哪些低效会使其难以保护。

应用全局变量来代替没有语义意义的所有内容

作者从 LinkedIn 网站上的 :root 元素中，通过应用 inspect 性能，拿了这个小例子。

正如你在上面的示例中所看到的，一个 :root 选择器上有超过 900 个 CSS 变量！在如此宽泛的变量列表中找到某些货色简直是不可能的。

将色彩与语义名称关联

我常常看到的第二个选项是具备语义名称的全局变量色彩，例如 --header-background-color 。

定义逻辑全局命名的问题首先在于你有太多的命名。

创立深色模式主题的第二个问题是，网页设计师不遵循特定色彩须要在深色模式下更改为其余色彩的逻辑。这可能会导致创立过多类型的变量，这些变量难以了解或保护。

来自旧版 Appwrite 控制台 1.0 的示例：

此外，全局色彩的笼罩会使代码的调试变得不清晰，在 Chrome 的查看元素中会呈现所有笼罩的穿插线。

理解了这些问题之后，作者思考如何更好地构建咱们的 CSS 色彩变量。

咱们如何决定治理咱们的 CSS 色彩变量

作者次要想法是为色调谱上的每个色彩组家族创立一个 CSS 变量，以连贯每个色彩组（例如蓝色、绿色、橙色和红色）。通过这种形式，我能够更改每个色彩组的主色调，并轻松替换该色彩家族的所有色调。

作者示意，他对这种办法的惟一疑虑在于，设计团队定义的色彩是用十六进制代码示意的，这种代码实际上代表了 RGB 色彩。当咱们须要创立同一色调的不同深浅时，应用这种示意形式会变得比拟艰难。

在解决这个问题时，作者抉择将 HEX/RGB 色彩转换为 HSL 色彩，而后尝试找出每一组色彩的典型色调。

从 HEX/RGB 转换为 HSL

如果咱们将信息（蓝色）色彩转换为 HSL 色彩，咱们能够看到所有色调（第一个值）都不同；它们的范畴在 188 和 192 之间。

次要思维是将第一个值保留为另一个 CSS 变量。

为了应答这个挑战，作者决定利用 CSS 的 calc() 函数，通过对根底色调值进行加减运算来解决问题。

从每个家族组的主色中取基色色调；在咱们的状况下，主色是“100”色彩，信息（蓝色）家族组的色调是 189。

:root {
  --color-info-hue: 189;

  --color-info-10:  var(--color-information-hue) 87% 97%;            /* #F1FCFE */
  --color-info-50:  calc(var(--color-information-hue) + 3) 90% 89%;  /* #C8F2FC */
  --color-info-100: var(--color-information-hue) 100% 38%;           /* #00A7C3 */
  --color-info-120: calc(var(--color-information-hue) + 1) 100% 26%; /* #007187 */
  --color-info-200: calc(var(--color-information-hue) - 1) 87% 12%;  /* #04333A */
}

通过这种形式，作者能够灵便地调整色调，并扭转所有由这个色调派生出的色彩。

如何应用这些变量？

应用色彩变量时，每个调用都必须用 hsl() 函数包装。例如：

background-color: hsl(var(--color-info-100) );

作者并未将 hsl() 函数间接退出到变量中，这是因为他心愿在须要的时候可能不便地管制色彩的透明度。

background-color: hsl(var(--color-info-100) / 0.5 ); /* with 50% opacity */

公有本地变量逻辑

因为存在不同的色彩模式（亮堂模式和暗黑模式），在大多数状况下，每个局部的色彩在切换模式后都会变动。

在作者的办法中，所有的色彩都是全局的，包含亮堂模式和暗黑模式的色彩。为了治理这两种模式的色彩，他增加了本地色彩变量，这些变量会依据以后模式援用全局色彩变量。为了防止全局变量过多导致凌乱，他应用了为每个局部设置公有变量的办法。他用 p- 作为前缀来示意一个变量是公有的。

.partial {--p-variable-name: value;}

作者以按钮局部为例，解释了他如何为文本色彩、background-color和 border-color 设置次要的公有变量。

.button {
    /* Light-mode Theme */
    --p-text-color:   value;
    --p-button-color: value;
    --p-border-color: value;
}

这些变量的应用形式如下：

.button {color:            hsl( var(--p-text-color)   ); 
    background-color: hsl(var(--p-button-color) );
    border-color:     hsl(var(--p-border-color) );
}

简单局部中的变量能够有很多状态。例如，按钮能够有默认、:hover、:focus、:active 或 :disabled 状态。这些根本外部变量应用其余外部变量来出现任何状态。

按钮变量的代码如下：

.button {
    /* Light Theme */
    --p-text-color:            var(--p-text-color-default);
    --p-button-color:          var(--p-button-color-default);
    --p-border-color:          var(--p-border-color-default);

    --p-text-color-default:    var(--color-neutral-5);
    --p-button-color-default:  var(--color-primary-200);
    --p-border-color-default:  var(--color-primary-300);

    --p-text-color-hover:      var(--p-text-color-default);
    --p-button-color-hover:    var(--color-primary-100);
    --p-border-color-hover:    var(--p-border-color-default);

    --p-text-color-focus:      var(--p-text-color-default);
    --p-button-color-focus:    var(--color-primary-200);
    --p-border-color-focus:    var(--color-primary-200);

    --p-text-color-active:     var(--p-text-color-default);
    --p-button-color-active:   var(--color-primary-300);
    --p-border-color-active:   var(--color-primary-300);

    --p-text-color-disabled:   var(--color-neutral-50);
    --p-button-color-disabled: var(--color-neutral-10);
    --p-border-color-disabled: var(--color-neutral-10);
}

定义按钮的状态

当初很好的一点是，只须要在想要更改按钮时更新变量的值。而后，这些变量能够依据局部的状态进行利用。

根本状态定义（应用 Sass 编写）：

/* global Sass Variable */
$disabled: ":disabled, .is-disabled";

.button {&:is(:hover) {&:where(:not(#{$disabled})) {--p-text-color:   var(--p-text-color-hover);
            --p-button-color: var(--p-button-color-hover);
            --p-border-color: var(--p-border-color-hover);
        }
    }
    &:is(:focus-visible) {&:where(:not(#{$disabled})) {--p-text-color:   var(--p-text-color-focus);
            --p-button-color: var(--p-button-color-focus);
            --p-border-color: var(--p-border-color-focus);
        }
    }
    &:is(:active) {&:where(:not(#{$disabled})) {--p-text-color:   var(--p-text-color-active);
            --p-button-color: var(--p-button-color-active);
            --p-border-color: var(--p-border-color-active);
        }
    }
    &:where(#{$disabled}) {--p-text-color:   var(--p-text-color-disabled);
            --p-button-color: var(--p-button-color-disabled);
            --p-border-color: var(--p-border-color-disabled);
    }
}

作者应用 Sass 变量 $disabled，这样我就能够在其余元素上应用禁用按钮的款式，比方链接元素。

Sass Code:

/* global Sass Variable */
$disabled: ":disabled, .is-disabled";

.button {&:where(#{$disabled}) {--p-text-color:   var(--p-text-color-disabled);
            --p-button-color: var(--p-button-color-disabled);
            --p-border-color: var(--p-border-color-disabled);
    }
}

编译后 CSS

.button:where(:disabled, .is-disabled) {--p-text-color:   var(--p-text-color-disabled);
      --p-button-color: var(--p-button-color-disabled);
      --p-border-color: var(--p-border-color-disabled);    
}
<button class="button" disabled> </button>

<a class="button is-disabled"> </a>

暗黑模式解决

在解决所有按钮的亮色模式状态之后，咱们当初想要解决咱们的暗色模式状态。

在进行这些操作之前，作者定义了另一个全局的 Sass 变量，示意暗黑模式的 CSS 类状态。这个状态类名会在他们的大多数局部中应用，以发明出暗黑模式的独特色彩。

$theme-dark: ".theme-dark";

.theme-dark 类最好间接定义在 <html> 元素上，当然，仅在应用暗模式状态时才这样做。

如果在 <html> 元素上定义它有问题，能够在 <body> 元素上定义。

<body class="theme-dark"> </body>

这样做是为了实现对所有 HTML 元素的简略全局管制。

部分内的暗模式解决

为了在按钮局部创立暗模式的定义，作者在局部底部增加了这段代码片段：

.button {
   /* regular styles and light-mode definitions */

  #{$theme-dark} & {/* definitions for dark-mode */}
}

这个 Sass 代码将编译为这个选择器：

.button {/* regular styles and light-mode definitions */}

.theme-dark .button {/* definitions for dark-mode */}

因为所有按钮状态曾经申明，惟一剩下的就是在暗模式“局部”中定义状态的公有色彩变量。

如果某些色彩放弃不变，则无需在深色模式下进行笼罩。

.button {#{$theme-dark} & { 
        /* changed colors */
        --p-border-color-default:  var(--color-primary-200);

        --p-button-color-hover:    var(--color-primary-100);
        --p-border-color-hover:    var(--color-primary-100);

        --p-border-color-focus:    var(--color-primary-300);

        --p-border-color-active:   var(--color-primary-300);

        --p-text-color-disabled:   var(--color-neutral-100);
        --p-button-color-disabled: var(--color-neutral-150);
        --p-border-color-disabled: var(--color-neutral-150);
   }
}

这种办法的益处在于咱们不须要反复任何 CSS 选择器或任何属性定义。

更多类型的按钮

在咱们的我的项目中，咱们须要有不同类型的按钮。因为咱们曾经创立了一个松软的构造，所以咱们只须要依据按钮的新状态来定义那些变量。

定义新状态

要定义一个新状态，咱们须要增加新的状态类（ .is-secondary ）：

<button class="button is-secondary"></button>

当初，为了更新新类型按钮的色彩，咱们只需笼罩公有色彩：

.button {
   &.is-secondary {
        /* Light Mode */
        --p-text-color-default:   var(--color-neutral-100);
        --p-button-color-default: var(--color-neutral-5);
        --p-border-color-default: var(--color-neutral-30);

        --p-text-color-hover:     var(--p-text-color-default);
        --p-button-color-hover:   var(--color-neutral-10);
        --p-border-color-hover:   var(--p-border-color-default);

        --p-text-color-focus:     var(--p-text-color-default);
        --p-button-color-focus:   var(--p-button-color-default);
        --p-border-color-focus:   var(--transparent);

        --p-text-color-active:    var(--color-neutral-300);
        --p-button-color-active:  var(--color-neutral-30);
        --p-border-color-active:  var(--color-neutral-30);

        --p-text-color-disabled:   var(--color-neutral-50);
        --p-button-color-disabled: var(--p-button-color-default);
        --p-border-color-disabled: var(--color-neutral-30);

        /** Dark Mode **/
        #{$theme-dark} & {--p-text-color-default:    var(--color-neutral-5);
            --p-button-color-default:  var(--color-neutral-300);
            --p-border-color-default:  var(--color-neutral-150);

            --p-text-color-hover:      var(--p-text-color-default);
            --p-button-color-hover:    var(--transparent);
            --p-border-color-hover:    var(--color-neutral-120);

            --p-text-color-focus:      var(--p-text-color-default);
            --p-button-color-focus:    var(--p-button-color-default);
            --p-border-color-focus:    var(--transparent);

            --p-text-color-active:     var(--p-text-color-default);
            --p-button-color-active:   var(--p-button-color-default);
            --p-border-color-active:   var(--color-neutral-100);

            --p-text-color-disabled:   var(--color-neutral-100);
            --p-button-color-disabled: var(--p-button-color-default);
            --p-border-color-disabled: var(--color-neutral-150);
        }
    }
}

如你所见，这里只是定义了变量，而没有波及任何属性或者任何像 :hover、:focus 这样的状态选择器伪类。

事例地址：https://codepen.io/elad2412/pen/RwBpyZg/ae478a2e98caa0990570a…

全局色彩状态

作者强调，在大多数状况下，咱们并不心愿定义那些在暗黑模式下会扭转为其余色彩的全局色彩变量。

然而，只管这在大多数状况下是正确的，但在某些特定状况下，咱们可能心愿定义一个状态色彩，使其在亮堂模式下出现一种特定色彩，而在暗黑模式下则出现另一种色彩。

全局逻辑色彩

为了解决这个问题，作者发明了另一个解决方案，他称之为“全局逻辑色彩”。对于这些全局逻辑色彩，他在一个独自的 :root 选择器中定义了全局 CSS 变量，当然，这些变量是援用了其余全局色彩变量的。

对于暗模式，这些变量会被更改为另一个全局色彩变量。例如：

:root {
  /* Global Logic Colors - Light Mode */
  --color-text-info:      var(--color-info-100);
  --color-text-danger:    var(--color-danger-100);
  --color-text-warning:   var(--color-warning-100);
  --color-text-success:   var(--color-success-100);

  --color-border:         var(--color-neutral-10);
  --scroll-color:         var(--color-neutral-50);

  #{$theme-dark} {
    /* Global Logic Colors - Dark Mode */
    --color-text-info:    var(--color-info-120);
    --color-text-danger:  var(--color-danger-120);
    --color-text-warning: var(--color-warning-120);
    --color-text-success: var(--color-success-120);

    --color-border:       var(--color-neutral-200);
    --scroll-color:       var(--color-neutral-150);
  }
}

这些 CSS 变量有两种用法：

局部外部的间接应用

.icon-checked {color: hsl( var(--color-text-success) ); }

作为全局工具类

/* Global Utilities colors classes */
.u-color-text-disabled {color: hsl( var(--color-text-disabled) ); }
.u-color-text-offline  {color: hsl( var(--color-text-offline)  ); }
.u-color-text-info     {color: hsl( var(--color-text-info).    ); }
.u-color-text-danger   {color: hsl( var(--color-text-danger).  ); }
.u-color-text-warning  {color: hsl( var(--color-text-warning). ); }
.u-color-text-success  {color: hsl( var(--color-text-success)  ); }

全局工具类能够间接利用在元素上，而且会依据亮堂模式或暗黑模式的主题提供不同的色彩。无论是哪种形式，色彩都会依据色彩模式计划的状态进行更新。

总结

本文次要探讨了定义 CSS 色彩变量的常见办法以及这些办法存在的问题。在此基础上，咱们探讨了如何利用公有变量从新组织 CSS 变量，从而创立出一个色彩组织良好的 CSS 架构。

HSL 函数介绍

CSS 中的 HSL 函数是一种示意色彩的办法，它应用色相（Hue）、饱和度（Saturation）和亮度（Lightness）三个参数来定义色彩。这种示意办法绝对于应用 RGB（红、绿、蓝）或十六进制代码来示意色彩更加直观和易于了解。

HSL 函数的语法如下：
hsl(hue, saturation, lightness)

色相（Hue）是一个 0 到 360 之间的角度值，示意色彩在色轮上的地位。0 度对应红色，120 度对应绿色，240 度对应蓝色。
饱和度（Saturation）是一个 0 到 100 之间的百分比值，示意色彩的娇艳水平。0% 示意灰色，100% 示意全黑白。
亮度（Lightness）是一个 0 到 100 之间的百分比值，示意色彩的亮度。0% 示意彩色，100% 示意红色。
例如，hsl(0, 100%, 50%)示意纯红色。在色轮上的地位是 0 度（红色），饱和度为 100%（全黑白），亮度为 50%（半亮度）。

HSL 函数在 CSS 中常用于定义背景色彩、文本色彩和边框色彩等属性。它提供了一种更直观和灵便的形式来示意色彩，使得调整和管制色彩更加不便。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

正文完
javascript
发表至： javascript
2023-06-21
 0
关于javascript:React系列实战篇留言功能二
关于javascript:打造数字化服务能力中国联通如何借助云原生技术实现增长突围
实时预览图片
canvas生成带二维码的海报踩坑