stackoverflow's questions

我连接材质图标：<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

我想让CSS图标变小：

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 100,
  'GRAD' -25,
  'opsz' 20
}

我用：<span class="material-symbols-outlined">search</span>

但使用的是常规图标，为什么？

应该是这样的：

但它是这样应用的：

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' -25, 'opsz' 20
}

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

<span class="material-symbols-outlined">search</span>

我正在做一个单选按钮，出现了一个小问题。对于活动的颜色框阴影，您需要根据背景调整颜色，可以直接使用 css 来完成此操作而不添加新元素吗？有些人现在可能会编写，为背景创建一个变量，然后替换它。好的！假设我这样做了，但是如果我想在不同的背景上使用相同的按钮怎么办，我是否必须一直更改它？狂欢！

body {
  background-color: #fff;
}

.list {
  display: flex;
  gap: 15px;
}

.color {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background-color: red;
  cursor: pointer;
}

.color.checked {
  box-shadow: inset 0 0 0 2px #fff;
  border: 2px solid red;
}

<div class="list">
  <div class="color"></div>
  <div class="color"></div>
  <div class="color checked"></div>
  <div class="color"></div>
</div>

我写了 hook useTheme，我们将有标准主题：黑暗和光明。但我还想添加一个“创建主题”按钮，当您单击它时，将新主题添加到自定义主题；默认情况下，我们添加的所有主题都被禁用。如果我们已经包含了自定义主题，则不需要添加属性data-theme，而只需获取其中的所有内容details并将其传递给setProperty.键是我们的类型--background, --color，值是颜色。您能帮助实施吗？））

我假设我们需要添加每个主题active: false，当您单击分离的主题时，更改状态并检查主题的整个列表，以确定包含哪个主题并更改它。

使用主题.js

export const useTheme = () => {
    // Получить системную тему пользователя
    const getSystemTheme = () => window?.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

    const [theme, setTheme] = useState(localStorage.getItem('app-theme') || getSystemTheme());

    // Получить кастомные темы пользователя
    const getCustomThemes = () => JSON.parse(localStorage.getItem('custom-themes')) || [];

    // Добавить обьект темы в LocalStorage custom-themes
    // Example: addCustomTheme({name: 'Название тема', details: [background: 'orange']})
    const addCustomTheme = obj => {
        if (getCustomThemes().find(t => t.name === obj.name)) return false;

        localStorage.setItem(
            'custom-themes', 
            JSON.stringify(
                [
                    ...getCustomThemes(), 
                    { ...obj, active: false }
                ]
            )
        );
    }

    useLayoutEffect(() => {
        document.documentElement.setAttribute('data-theme', theme);
        localStorage.setItem('theme', theme);
    }, [theme]);

    return { currentTheme: theme, setTheme, addCustomTheme };
}