Future (new CSS example) en

Installations 21 Likes 4

Full

Re-creating the future theme with the new CSS variables to showcase how easy creating a theme is.

Latest version 2.1 View content

Released 1 year ago

Made it more like the original future theme

Plugin CSS for 2.1


:root {
  color-scheme: dark;
  --p: 180 100% 63%;
  --pf: 180 100% 43%;
  --pc: 0 0% 0%;
  --s: 247 100% 66%;
  --sf: 247 100% 46%;
  --sc: 0 0% 100%;
  --a: 117 73% 54%;
  --af: 117 73% 34%;
  --ac: 0 0% 0%;
  --er: 0 96% 65%;
  --erc: 0 0% 0%;
  --wa: 53 96% 59%;
  --wac: 0 0% 0%;
  --in: 181 54% 34%;
  --inc: 0 0% 100%;
  --rounded-btn: 0;
  
  --box-border: #42FFFF;
  --header-text: var(--box-border);
  
  --content-wrapper-background: #0d1517;
  --theme-main-text: #d4e4e7;
  --si: 192 29% 7%;
  --sif: 0 0% 0%;
  --sic: 192 29% 87%;
  --b1: 192 29% 7%;
  --b2: 0 0% 0%;
  --b3: 0 0% 0%;
  --bc: 192 29% 87%;
  --n: 192 29% 7%;
  --nf: 0 0% 0%;
  --nc: 192 29% 87%;
}

.rounded {
  border-radius: 0;
}
.box {
  border-radius: 0;
}
.bg-box {
  border: 1px solid hsl(var(--p)/0.2);
}
.box-solid {
  border: 1px solid hsl(var(--p)/0.2);
}
.box .box-header.with-border {
  border-bottom: 1px solid hsl(var(--p)/0.2);
}
.border-b {
  border-colour: hsl(var(--p)/1);
}
.dropdown-menu {
  border: 1px solid hsl(var(--p)/0.2);
  border-radius: 0;
}