Argon主题-卡片透明 – 阿传的小破站

什么？默认看片不好看

快来试试卡片背景透明化处理吧。老规矩，先上效果图

1、实现思路：

要想实现上面的效果，单纯的依靠CSS样式来实现是不行的，因为系统中是使用样式变量来实现控制的。这就需要我们先在CSS中，同样使用变量来控制样式；然后再在Script脚本中，获取和设置这个变量；从而让透明的效果不受主题颜色和暗夜模式的影响。

获取变量：getComputedStyle（）

设置变量：document.documentElement.style.setProperty（）

什么？不太懂代码。不用怕，我们只需要按照下面的顺序，一键粘贴即可实现

2、设置样式

我们先找到：外观–自定义–额外CSS，之后把下面的代码粘贴进去。

/*卡片背景透明化*/
#leftbar_announcement {
  background: var(--themecolor-gradient) !important;
}
#footer{
  background: var(--themecolor-gradient) !important
}

别急，还没完哦，下面设置脚本代码

3、设置脚本

我们要找到：Argon主题设置–脚本–页尾脚本，之后把下面的代码粘贴进去。

想要修改透明度，可以调整下面这些变量：

op1——“白天”状态主题色透明度
op2——“白天”状态卡片颜色透明度
op3——“夜间”状态卡片颜色透明度
op4——“夜间”状态主题色透明度

快来“客制化”调整一下吧

<!--卡片透明化-->
<script>
function hexToRgb(hex,op){
  let str = hex.slice(1);
  let arr;
  if (str.length === 3) arr = str.split('').map(d => parseInt(d.repeat(2), 16));
  else arr = [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)];
  return `rgb(${arr.join(', ')}, ${op})`;
};
 
let themeColorHex = getComputedStyle(document.documentElement).getPropertyValue('--themecolor').trim();

let op1 = 0.7
let themeColorRgb = hexToRgb(themeColorHex,op1);
let themecolorGradient = getComputedStyle(document.documentElement).getPropertyValue('--themecolor-gradient')
document.documentElement.style.setProperty('--themecolor-gradient',themeColorRgb)

let op2 = 0.9
let colorTint92 = getComputedStyle(document.documentElement).getPropertyValue('--color-tint-92').trim();
colorTint92 += ', '+op2;
document.documentElement.style.setProperty('--color-tint-92',colorTint92)
 
let op3 = 0.65
let colorShade90 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-90').trim();
colorShade90 += ', ' + op3;
document.documentElement.style.setProperty('--color-shade-90',colorShade90)
 
let op4 = 0.8
let colorShade86 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-86').trim();
colorShade86 += ', ' + op4;
document.documentElement.style.setProperty('--color-shade-86',colorShade86)
</script>

至此，我们的卡片就可以实现炫酷的透明效果了

一	二	三	四	五	六	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

1、实现思路：

2、设置样式

3、设置脚本

发送评论 编辑评论

推荐文章

发送评论编辑评论