extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-23 06:19:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve theme preset preview

Browse Source
This commit is contained in:
zombieFox 2019-12-27 23:33:37 -07:00
parent 126803f851
commit f884999d09
4 changed files with 339 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

320
src/css/theme.css
View File

@ -26,7 +26,8 @@
.theme-preset-background-02,
.theme-preset-background-03,
.theme-preset-background-04,
.theme-preset-accent {
.theme-preset-accent,
.theme-preset-font {
width: 100%;
height: 100%;
position: absolute;
@ -60,10 +61,23 @@
.theme-preset-accent {
z-index: 5;
clip-path: polygon(100% 50%, 100% 100%, 50% 100%);
clip-path: polygon(100% 70%, 100% 100%, 70% 100%);
transition-delay: var(--layout-duration-02);
}
.theme-preset-font {
z-index: 6;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.theme-preset-font-display {
font-size: 2em;
margin-bottom: 0.25em;
}
.theme-preset-button:focus .theme-preset-background-02,
.theme-preset-button:hover .theme-preset-background-02 {
clip-path: polygon(0 20%, 80% 100%, 100% 100%, 100% 0, 0 0);
@ -84,306 +98,456 @@
.theme-preset-button:focus .theme-preset-accent,
.theme-preset-button:hover .theme-preset-accent {
clip-path: polygon(100% 30%, 100% 100%, 30% 100%);
clip-path: polygon(100% 50%, 100% 100%, 50% 100%);
transition-delay: var(--layout-duration-01);
}
.theme-preset-background-nighttab-01 {
background-color: rgb(var(--theme-preset-background-nighttab-01))
background-color: rgb(var(--theme-preset-background-nighttab-01));
}
.theme-preset-background-nighttab-02 {
background-color: rgb(var(--theme-preset-background-nighttab-02))
background-color: rgb(var(--theme-preset-background-nighttab-02));
}
.theme-preset-background-nighttab-03 {
background-color: rgb(var(--theme-preset-background-nighttab-03))
background-color: rgb(var(--theme-preset-background-nighttab-03));
}
.theme-preset-background-nighttab-04 {
background-color: rgb(var(--theme-preset-background-nighttab-04))
background-color: rgb(var(--theme-preset-background-nighttab-04));
}
.theme-preset-accent-nighttab {
background-color: rgb(var(--theme-preset-accent-nighttab))
background-color: rgb(var(--theme-preset-accent-nighttab));
}
.theme-preset-font-display-nighttab {
font-family: var(--theme-preset-font-display-nighttab);
color: rgb(var(--theme-preset-accent-nighttab));
}
.theme-preset-font-ui-nighttab {
font-family: var(--theme-preset-font-ui-nighttab);
color: rgb(var(--theme-preset-font-color-nighttab));
}
.theme-preset-background-midnight-01 {
background-color: rgb(var(--theme-preset-background-midnight-01))
background-color: rgb(var(--theme-preset-background-midnight-01));
}
.theme-preset-background-midnight-02 {
background-color: rgb(var(--theme-preset-background-midnight-02))
background-color: rgb(var(--theme-preset-background-midnight-02));
}
.theme-preset-background-midnight-03 {
background-color: rgb(var(--theme-preset-background-midnight-03))
background-color: rgb(var(--theme-preset-background-midnight-03));
}
.theme-preset-background-midnight-04 {
background-color: rgb(var(--theme-preset-background-midnight-04))
background-color: rgb(var(--theme-preset-background-midnight-04));
}
.theme-preset-accent-midnight {
background-color: rgb(var(--theme-preset-accent-midnight))
background-color: rgb(var(--theme-preset-accent-midnight));
}
.theme-preset-font-display-midnight {
font-family: var(--theme-preset-font-display-midnight);
color: rgb(var(--theme-preset-accent-midnight));
}
.theme-preset-font-ui-midnight {
font-family: var(--theme-preset-font-ui-midnight);
color: rgb(var(--theme-preset-font-color-midnight));
}
.theme-preset-background-bluegum-01 {
background-color: rgb(var(--theme-preset-background-bluegum-01))
background-color: rgb(var(--theme-preset-background-bluegum-01));
}
.theme-preset-background-bluegum-02 {
background-color: rgb(var(--theme-preset-background-bluegum-02))
background-color: rgb(var(--theme-preset-background-bluegum-02));
}
.theme-preset-background-bluegum-03 {
background-color: rgb(var(--theme-preset-background-bluegum-03))
background-color: rgb(var(--theme-preset-background-bluegum-03));
}
.theme-preset-background-bluegum-04 {
background-color: rgb(var(--theme-preset-background-bluegum-04))
background-color: rgb(var(--theme-preset-background-bluegum-04));
}
.theme-preset-accent-bluegum {
background-color: rgb(var(--theme-preset-accent-bluegum))
background-color: rgb(var(--theme-preset-accent-bluegum));
}
.theme-preset-font-display-bluegum {
font-family: var(--theme-preset-font-display-bluegum);
color: rgb(var(--theme-preset-accent-bluegum));
}
.theme-preset-font-ui-bluegum {
font-family: var(--theme-preset-font-ui-bluegum);
color: rgb(var(--theme-preset-font-color-bluegum));
}
.theme-preset-background-sharpmint-01 {
background-color: rgb(var(--theme-preset-background-sharpmint-01))
background-color: rgb(var(--theme-preset-background-sharpmint-01));
}
.theme-preset-background-sharpmint-02 {
background-color: rgb(var(--theme-preset-background-sharpmint-02))
background-color: rgb(var(--theme-preset-background-sharpmint-02));
}
.theme-preset-background-sharpmint-03 {
background-color: rgb(var(--theme-preset-background-sharpmint-03))
background-color: rgb(var(--theme-preset-background-sharpmint-03));
}
.theme-preset-background-sharpmint-04 {
background-color: rgb(var(--theme-preset-background-sharpmint-04))
background-color: rgb(var(--theme-preset-background-sharpmint-04));
}
.theme-preset-accent-sharpmint {
background-color: rgb(var(--theme-preset-accent-sharpmint))
background-color: rgb(var(--theme-preset-accent-sharpmint));
}
.theme-preset-font-display-sharpmint {
font-family: var(--theme-preset-font-display-sharpmint);
color: rgb(var(--theme-preset-accent-sharpmint));
}
.theme-preset-font-ui-sharpmint {
font-family: var(--theme-preset-font-ui-sharpmint);
color: rgb(var(--theme-preset-font-color-sharpmint));
}
.theme-preset-background-snowblue-01 {
background-color: rgb(var(--theme-preset-background-snowblue-01))
background-color: rgb(var(--theme-preset-background-snowblue-01));
}
.theme-preset-background-snowblue-02 {
background-color: rgb(var(--theme-preset-background-snowblue-02))
background-color: rgb(var(--theme-preset-background-snowblue-02));
}
.theme-preset-background-snowblue-03 {
background-color: rgb(var(--theme-preset-background-snowblue-03))
background-color: rgb(var(--theme-preset-background-snowblue-03));
}
.theme-preset-background-snowblue-04 {
background-color: rgb(var(--theme-preset-background-snowblue-04))
background-color: rgb(var(--theme-preset-background-snowblue-04));
}
.theme-preset-accent-snowblue {
background-color: rgb(var(--theme-preset-accent-snowblue))
background-color: rgb(var(--theme-preset-accent-snowblue));
}
.theme-preset-font-display-snowblue {
font-family: var(--theme-preset-font-display-snowblue);
color: rgb(var(--theme-preset-accent-snowblue));
}
.theme-preset-font-ui-snowblue {
font-family: var(--theme-preset-font-ui-snowblue);
color: rgb(var(--theme-preset-font-color-snowblue));
}
.theme-preset-background-chocorum-01 {
background-color: rgb(var(--theme-preset-background-chocorum-01))
background-color: rgb(var(--theme-preset-background-chocorum-01));
}
.theme-preset-background-chocorum-02 {
background-color: rgb(var(--theme-preset-background-chocorum-02))
background-color: rgb(var(--theme-preset-background-chocorum-02));
}
.theme-preset-background-chocorum-03 {
background-color: rgb(var(--theme-preset-background-chocorum-03))
background-color: rgb(var(--theme-preset-background-chocorum-03));
}
.theme-preset-background-chocorum-04 {
background-color: rgb(var(--theme-preset-background-chocorum-04))
background-color: rgb(var(--theme-preset-background-chocorum-04));
}
.theme-preset-accent-chocorum {
background-color: rgb(var(--theme-preset-accent-chocorum))
background-color: rgb(var(--theme-preset-accent-chocorum));
}
.theme-preset-font-display-chocorum {
font-family: var(--theme-preset-font-display-chocorum);
color: rgb(var(--theme-preset-accent-chocorum));
}
.theme-preset-font-ui-chocorum {
font-family: var(--theme-preset-font-ui-chocorum);
color: rgb(var(--theme-preset-font-color-chocorum));
}
.theme-preset-background-sunburst-01 {
background-color: rgb(var(--theme-preset-background-sunburst-01))
background-color: rgb(var(--theme-preset-background-sunburst-01));
}
.theme-preset-background-sunburst-02 {
background-color: rgb(var(--theme-preset-background-sunburst-02))
background-color: rgb(var(--theme-preset-background-sunburst-02));
}
.theme-preset-background-sunburst-03 {
background-color: rgb(var(--theme-preset-background-sunburst-03))
background-color: rgb(var(--theme-preset-background-sunburst-03));
}
.theme-preset-background-sunburst-04 {
background-color: rgb(var(--theme-preset-background-sunburst-04))
background-color: rgb(var(--theme-preset-background-sunburst-04));
}
.theme-preset-accent-sunburst {
background-color: rgb(var(--theme-preset-accent-sunburst))
background-color: rgb(var(--theme-preset-accent-sunburst));
}
.theme-preset-font-display-sunburst {
font-family: var(--theme-preset-font-display-sunburst);
color: rgb(var(--theme-preset-accent-sunburst));
}
.theme-preset-font-ui-sunburst {
font-family: var(--theme-preset-font-ui-sunburst);
color: rgb(var(--theme-preset-font-color-sunburst));
}
.theme-preset-background-coralgreen-01 {
background-color: rgb(var(--theme-preset-background-coralgreen-01))
background-color: rgb(var(--theme-preset-background-coralgreen-01));
}
.theme-preset-background-coralgreen-02 {
background-color: rgb(var(--theme-preset-background-coralgreen-02))
background-color: rgb(var(--theme-preset-background-coralgreen-02));
}
.theme-preset-background-coralgreen-03 {
background-color: rgb(var(--theme-preset-background-coralgreen-03))
background-color: rgb(var(--theme-preset-background-coralgreen-03));
}
.theme-preset-background-coralgreen-04 {
background-color: rgb(var(--theme-preset-background-coralgreen-04))
background-color: rgb(var(--theme-preset-background-coralgreen-04));
}
.theme-preset-accent-coralgreen {
background-color: rgb(var(--theme-preset-accent-coralgreen))
background-color: rgb(var(--theme-preset-accent-coralgreen));
}
.theme-preset-font-display-coralgreen {
font-family: var(--theme-preset-font-display-coralgreen);
color: rgb(var(--theme-preset-accent-coralgreen));
}
.theme-preset-font-ui-coralgreen {
font-family: var(--theme-preset-font-ui-coralgreen);
color: rgb(var(--theme-preset-font-color-coralgreen));
}
.theme-preset-background-purplegem-01 {
background-color: rgb(var(--theme-preset-background-purplegem-01))
background-color: rgb(var(--theme-preset-background-purplegem-01));
}
.theme-preset-background-purplegem-02 {
background-color: rgb(var(--theme-preset-background-purplegem-02))
background-color: rgb(var(--theme-preset-background-purplegem-02));
}
.theme-preset-background-purplegem-03 {
background-color: rgb(var(--theme-preset-background-purplegem-03))
background-color: rgb(var(--theme-preset-background-purplegem-03));
}
.theme-preset-background-purplegem-04 {
background-color: rgb(var(--theme-preset-background-purplegem-04))
background-color: rgb(var(--theme-preset-background-purplegem-04));
}
.theme-preset-accent-purplegem {
background-color: rgb(var(--theme-preset-accent-purplegem))
background-color: rgb(var(--theme-preset-accent-purplegem));
}
.theme-preset-font-display-purplegem {
font-family: var(--theme-preset-font-display-purplegem);
color: rgb(var(--theme-preset-accent-purplegem));
}
.theme-preset-font-ui-purplegem {
font-family: var(--theme-preset-font-ui-purplegem);
color: rgb(var(--theme-preset-font-color-purplegem));
}
.theme-preset-background-hotpepper-01 {
background-color: rgb(var(--theme-preset-background-hotpepper-01))
background-color: rgb(var(--theme-preset-background-hotpepper-01));
}
.theme-preset-background-hotpepper-02 {
background-color: rgb(var(--theme-preset-background-hotpepper-02))
background-color: rgb(var(--theme-preset-background-hotpepper-02));
}
.theme-preset-background-hotpepper-03 {
background-color: rgb(var(--theme-preset-background-hotpepper-03))
background-color: rgb(var(--theme-preset-background-hotpepper-03));
}
.theme-preset-background-hotpepper-04 {
background-color: rgb(var(--theme-preset-background-hotpepper-04))
background-color: rgb(var(--theme-preset-background-hotpepper-04));
}
.theme-preset-accent-hotpepper {
background-color: rgb(var(--theme-preset-accent-hotpepper))
background-color: rgb(var(--theme-preset-accent-hotpepper));
}
.theme-preset-font-display-hotpepper {
font-family: var(--theme-preset-font-display-hotpepper);
color: rgb(var(--theme-preset-accent-hotpepper));
}
.theme-preset-font-ui-hotpepper {
font-family: var(--theme-preset-font-ui-hotpepper);
color: rgb(var(--theme-preset-font-color-hotpepper));
}
.theme-preset-background-steelgrey-01 {
background-color: rgb(var(--theme-preset-background-steelgrey-01))
background-color: rgb(var(--theme-preset-background-steelgrey-01));
}
.theme-preset-background-steelgrey-02 {
background-color: rgb(var(--theme-preset-background-steelgrey-02))
background-color: rgb(var(--theme-preset-background-steelgrey-02));
}
.theme-preset-background-steelgrey-03 {
background-color: rgb(var(--theme-preset-background-steelgrey-03))
background-color: rgb(var(--theme-preset-background-steelgrey-03));
}
.theme-preset-background-steelgrey-04 {
background-color: rgb(var(--theme-preset-background-steelgrey-04))
background-color: rgb(var(--theme-preset-background-steelgrey-04));
}
.theme-preset-accent-steelgrey {
background-color: rgb(var(--theme-preset-accent-steelgrey))
background-color: rgb(var(--theme-preset-accent-steelgrey));
}
.theme-preset-font-display-steelgrey {
font-family: var(--theme-preset-font-display-steelgrey);
color: rgb(var(--theme-preset-accent-steelgrey));
}
.theme-preset-font-ui-steelgrey {
font-family: var(--theme-preset-font-ui-steelgrey);
color: rgb(var(--theme-preset-font-color-steelgrey));
}
.theme-preset-background-outrun-01 {
background-color: rgb(var(--theme-preset-background-outrun-01))
background-color: rgb(var(--theme-preset-background-outrun-01));
}
.theme-preset-background-outrun-02 {
background-color: rgb(var(--theme-preset-background-outrun-02))
background-color: rgb(var(--theme-preset-background-outrun-02));
}
.theme-preset-background-outrun-03 {
background-color: rgb(var(--theme-preset-background-outrun-03))
background-color: rgb(var(--theme-preset-background-outrun-03));
}
.theme-preset-background-outrun-04 {
background-color: rgb(var(--theme-preset-background-outrun-04))
background-color: rgb(var(--theme-preset-background-outrun-04));
}
.theme-preset-accent-outrun {
background-color: rgb(var(--theme-preset-accent-outrun))
background-color: rgb(var(--theme-preset-accent-outrun));
}
.theme-preset-font-display-outrun {
font-family: var(--theme-preset-font-display-outrun);
color: rgb(var(--theme-preset-accent-outrun));
}
.theme-preset-font-ui-outrun {
font-family: var(--theme-preset-font-ui-outrun);
color: rgb(var(--theme-preset-font-color-outrun));
}
.theme-preset-background-pumpkin-01 {
background-color: rgb(var(--theme-preset-background-pumpkin-01))
background-color: rgb(var(--theme-preset-background-pumpkin-01));
}
.theme-preset-background-pumpkin-02 {
background-color: rgb(var(--theme-preset-background-pumpkin-02))
background-color: rgb(var(--theme-preset-background-pumpkin-02));
}
.theme-preset-background-pumpkin-03 {
background-color: rgb(var(--theme-preset-background-pumpkin-03))
background-color: rgb(var(--theme-preset-background-pumpkin-03));
}
.theme-preset-background-pumpkin-04 {
background-color: rgb(var(--theme-preset-background-pumpkin-04))
background-color: rgb(var(--theme-preset-background-pumpkin-04));
}
.theme-preset-accent-pumpkin {
background-color: rgb(var(--theme-preset-accent-pumpkin))
background-color: rgb(var(--theme-preset-accent-pumpkin));
}
.theme-preset-font-display-pumpkin {
font-family: var(--theme-preset-font-display-pumpkin);
color: rgb(var(--theme-preset-accent-pumpkin));
}
.theme-preset-font-ui-pumpkin {
font-family: var(--theme-preset-font-ui-pumpkin);
color: rgb(var(--theme-preset-font-color-pumpkin));
}
.theme-preset-background-whoosh-01 {
background-color: rgb(var(--theme-preset-background-whoosh-01))
background-color: rgb(var(--theme-preset-background-whoosh-01));
}
.theme-preset-background-whoosh-02 {
background-color: rgb(var(--theme-preset-background-whoosh-02))
background-color: rgb(var(--theme-preset-background-whoosh-02));
}
.theme-preset-background-whoosh-03 {
background-color: rgb(var(--theme-preset-background-whoosh-03))
background-color: rgb(var(--theme-preset-background-whoosh-03));
}
.theme-preset-background-whoosh-04 {
background-color: rgb(var(--theme-preset-background-whoosh-04))
background-color: rgb(var(--theme-preset-background-whoosh-04));
}
.theme-preset-accent-whoosh {
background-color: rgb(var(--theme-preset-accent-whoosh))
background-color: rgb(var(--theme-preset-accent-whoosh));
}
.theme-preset-font-display-whoosh {
font-family: var(--theme-preset-font-display-whoosh);
color: rgb(var(--theme-preset-accent-whoosh));
}
.theme-preset-font-ui-whoosh {
font-family: var(--theme-preset-font-ui-whoosh);
color: rgb(var(--theme-preset-font-color-whoosh));
}
.theme-preset-background-eldergold-01 {
background-color: rgb(var(--theme-preset-background-eldergold-01))
background-color: rgb(var(--theme-preset-background-eldergold-01));
}
.theme-preset-background-eldergold-02 {
background-color: rgb(var(--theme-preset-background-eldergold-02))
background-color: rgb(var(--theme-preset-background-eldergold-02));
}
.theme-preset-background-eldergold-03 {
background-color: rgb(var(--theme-preset-background-eldergold-03))
background-color: rgb(var(--theme-preset-background-eldergold-03));
}
.theme-preset-background-eldergold-04 {
background-color: rgb(var(--theme-preset-background-eldergold-04))
background-color: rgb(var(--theme-preset-background-eldergold-04));
}
.theme-preset-accent-eldergold {
background-color: rgb(var(--theme-preset-accent-eldergold))
background-color: rgb(var(--theme-preset-accent-eldergold));
}
.theme-preset-font-display-eldergold {
font-family: var(--theme-preset-font-display-eldergold);
color: rgb(var(--theme-preset-accent-eldergold));
}
.theme-preset-font-ui-eldergold {
font-family: var(--theme-preset-font-ui-eldergold);
color: rgb(var(--theme-preset-font-color-eldergold));
}

30
src/css/variables.css
View File

@ -31,72 +31,100 @@
--theme-preset-background-nighttab-03: 25, 25, 25;
--theme-preset-background-nighttab-04: 25, 25, 25;
--theme-preset-accent-nighttab: 25, 25, 25;
--theme-preset-font-display-nighttab: sans-serif;
--theme-preset-font-ui-nighttab: sans-serif;
--theme-preset-background-midnight-01: 25, 25, 25;
--theme-preset-background-midnight-02: 25, 25, 25;
--theme-preset-background-midnight-03: 25, 25, 25;
--theme-preset-background-midnight-04: 25, 25, 25;
--theme-preset-accent-midnight: 25, 25, 25;
--theme-preset-font-display-midnight: sans-serif;
--theme-preset-font-ui-midnight: sans-serif;
--theme-preset-background-bluegum-01: 25, 25, 25;
--theme-preset-background-bluegum-02: 25, 25, 25;
--theme-preset-background-bluegum-03: 25, 25, 25;
--theme-preset-background-bluegum-04: 25, 25, 25;
--theme-preset-accent-bluegum: 25, 25, 25;
--theme-preset-font-display-bluegum: sans-serif;
--theme-preset-font-ui-bluegum: sans-serif;
--theme-preset-background-sharpmint-01: 25, 25, 25;
--theme-preset-background-sharpmint-02: 25, 25, 25;
--theme-preset-background-sharpmint-03: 25, 25, 25;
--theme-preset-background-sharpmint-04: 25, 25, 25;
--theme-preset-accent-sharpmint: 25, 25, 25;
--theme-preset-font-display-sharpmint: sans-serif;
--theme-preset-font-ui-sharpmint: sans-serif;
--theme-preset-background-snowblue-01: 25, 25, 25;
--theme-preset-background-snowblue-02: 25, 25, 25;
--theme-preset-background-snowblue-03: 25, 25, 25;
--theme-preset-background-snowblue-04: 25, 25, 25;
--theme-preset-accent-snowblue: 25, 25, 25;
--theme-preset-font-display-snowblue: sans-serif;
--theme-preset-font-ui-snowblue: sans-serif;
--theme-preset-background-chocorum-01: 25, 25, 25;
--theme-preset-background-chocorum-02: 25, 25, 25;
--theme-preset-background-chocorum-03: 25, 25, 25;
--theme-preset-background-chocorum-04: 25, 25, 25;
--theme-preset-accent-chocorum: 25, 25, 25;
--theme-preset-font-display-chocorum: sans-serif;
--theme-preset-font-ui-chocorum: sans-serif;
--theme-preset-background-sunburst-01: 25, 25, 25;
--theme-preset-background-sunburst-02: 25, 25, 25;
--theme-preset-background-sunburst-03: 25, 25, 25;
--theme-preset-background-sunburst-04: 25, 25, 25;
--theme-preset-accent-sunburst: 25, 25, 25;
--theme-preset-font-display-sunburst: sans-serif;
--theme-preset-font-ui-sunburst: sans-serif;
--theme-preset-background-coralgreen-01: 25, 25, 25;
--theme-preset-background-coralgreen-02: 25, 25, 25;
--theme-preset-background-coralgreen-03: 25, 25, 25;
--theme-preset-background-coralgreen-04: 25, 25, 25;
--theme-preset-accent-coralgreen: 25, 25, 25;
--theme-preset-font-display-coralgreen: sans-serif;
--theme-preset-font-ui-coralgreen: sans-serif;
--theme-preset-background-purplegem-01: 25, 25, 25;
--theme-preset-background-purplegem-02: 25, 25, 25;
--theme-preset-background-purplegem-03: 25, 25, 25;
--theme-preset-background-purplegem-04: 25, 25, 25;
--theme-preset-accent-purplegem: 25, 25, 25;
--theme-preset-font-display-purplegem: sans-serif;
--theme-preset-font-ui-purplegem: sans-serif;
--theme-preset-background-hotpepper-01: 25, 25, 25;
--theme-preset-background-hotpepper-02: 25, 25, 25;
--theme-preset-background-hotpepper-03: 25, 25, 25;
--theme-preset-background-hotpepper-04: 25, 25, 25;
--theme-preset-accent-hotpepper: 25, 25, 25;
--theme-preset-font-display-hotpepper: sans-serif;
--theme-preset-font-ui-hotpepper: sans-serif;
--theme-preset-background-steelgrey-01: 25, 25, 25;
--theme-preset-background-steelgrey-02: 25, 25, 25;
--theme-preset-background-steelgrey-03: 25, 25, 25;
--theme-preset-background-steelgrey-04: 25, 25, 25;
--theme-preset-accent-steelgrey: 25, 25, 25;
--theme-preset-font-display-steelgrey: sans-serif;
--theme-preset-font-ui-steelgrey: sans-serif;
--theme-preset-background-outrun-01: 25, 25, 25;
--theme-preset-background-outrun-02: 25, 25, 25;
--theme-preset-background-outrun-03: 25, 25, 25;
--theme-preset-background-outrun-04: 25, 25, 25;
--theme-preset-accent-outrun: 25, 25, 25;
--theme-preset-font-display-outrun: sans-serif;
--theme-preset-font-ui-outrun: sans-serif;
--theme-preset-background-pumpkin-01: 25, 25, 25;
--theme-preset-background-pumpkin-02: 25, 25, 25;
--theme-preset-background-pumpkin-03: 25, 25, 25;
--theme-preset-background-pumpkin-04: 25, 25, 25;
--theme-preset-accent-pumpkin: 25, 25, 25;
--theme-preset-font-display-pumpkin: sans-serif;
--theme-preset-font-ui-pumpkin: sans-serif;
--theme-preset-background-whoosh-01: 25, 25, 25;
--theme-preset-background-whoosh-02: 25, 25, 25;
--theme-preset-background-whoosh-03: 25, 25, 25;
--theme-preset-background-whoosh-04: 25, 25, 25;
--theme-preset-accent-whoosh: 25, 25, 25;
--theme-preset-preview-size: 6em;
--theme-preset-font-display-whoosh: sans-serif;
--theme-preset-font-ui-whoosh: sans-serif;
--theme-preset-preview-size: 7em;
/* header */
--header-area-width: 100%;
--header-shade-color: var(--theme-color-01);

61
src/index.html
View File

@ -38,6 +38,7 @@
<link rel="stylesheet" href="css/auto-suggest.css">
<link rel="stylesheet" href="css/fontawesome.css">
<!-- end-css-block -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel|Alatsi|Big+Shoulders+Display|Calistoga|Fredoka+One|Girassol|Gugi|Lato|Life+Savers|Major+Mono+Display|Monoton|Montserrat|Muli|Odibee+Sans|Poiret+One|Quicksand|Raleway|Righteous|Roboto+Condensed|Source+Sans+Pro|Unica+One&display=swap">
</head>
<body>
@ -1317,6 +1318,10 @@
<span class="theme-preset-background-03 theme-preset-background-nighttab-03"></span>
<span class="theme-preset-background-04 theme-preset-background-nighttab-04"></span>
<span class="theme-preset-accent theme-preset-accent-nighttab"></span>
<span class="theme-preset-font theme-preset-font-nighttab">
<span class="theme-preset-font-display theme-preset-font-display-nighttab">Abcd</span>
<span class="theme-preset-font-ui theme-preset-font-ui-nighttab">Xyz - 123</span>
</span>
</div>
<span class="button-text small">nightTab</span>
</button>
@ -1329,6 +1334,10 @@
<span class="theme-preset-background-03 theme-preset-background-midnight-03"></span>
<span class="theme-preset-background-04 theme-preset-background-midnight-04"></span>
<span class="theme-preset-accent theme-preset-accent-midnight"></span>
<span class="theme-preset-font theme-preset-font-midnight">
<span class="theme-preset-font-display theme-preset-font-display-midnight">Abcd</span>
<span class="theme-preset-font-ui theme-preset-font-ui-midnight">Xyz - 123</span>
</span>
</div>
<span class="button-text small">Midnight</span>
</button>
@ -1341,6 +1350,10 @@
<span class="theme-preset-background-03 theme-preset-background-bluegum-03"></span>
<span class="theme-preset-background-04 theme-preset-background-bluegum-04"></span>
<span class="theme-preset-accent theme-preset-accent-bluegum"></span>
<span class="theme-preset-font theme-preset-font-bluegum">
<span class="theme-preset-font-display theme-preset-font-display-bluegum">Abcd</span>
<span class="theme-preset-font-ui theme-preset-font-ui-bluegum">Xyz - 123</span>
</span>
</div>
<span class="button-text small">Blue Gum</span>
</button>
@ -1353,6 +1366,10 @@
<span class="theme-preset-background-03 theme-preset-background-sharpmint-03"></span>
<span class="theme-preset-background-04 theme-preset-background-sharpmint-04"></span>
<span class="theme-preset-accent theme-preset-accent-sharpmint"></span>
<span class="theme-preset-font theme-preset-font-sharpmint">
<span class="theme-preset-font-display theme-preset-font-display-sharpmint">Abcd</span>
<span class="theme-preset-font-ui theme-preset-font-ui-sharpmint">Xyz - 123</span>
</span>
</div>
<span class="button-text small">Sharp Mint</span>
</button>
@ -1365,6 +1382,10 @@
<span class="theme-preset-background-03 theme-preset-background-snowblue-03"></span>
<span class="theme-preset-background-04 theme-preset-background-snowblue-04"></span>
<span class="theme-preset-accent theme-preset-accent-snowblue"></span>
<span class="theme-preset-font theme-preset-font-snowblue">
<span class="theme-preset-font-display theme-preset-font-display-snowblue">Abcd</span>
<span class="theme-preset-font-ui theme-preset-font-ui-snowblue">Xyz - 123</span>
</span>
</div>
<span class="button-text small">Snow Blue</span>
</button>
@ -1377,6 +1398,10 @@
<span class="theme-preset-background-03 theme-preset-background-chocorum-03"></span>
<span class="theme-preset-background-04 theme-preset-background-chocorum-04"></span>
<span class="theme-preset-accent theme-preset-accent-chocorum"></span>
<span class="theme-preset-font theme-preset-font-chocorum">
<span class="theme-preset-font-display theme-preset-font-display-chocorum">Abcd</span>
<span class="theme-preset-font-ui theme-preset-font-ui-chocorum">Xyz - 123</span>
</span>
</div>
<span class="button-text small">Choco Rum</span>
</button>
@ -1389,6 +1414,10 @@
<span class="theme-preset-background-03 theme-preset-background-sunburst-03"></span>
<span class="theme-preset-background-04 theme-preset-background-sunburst-04"></span>
<span class="theme-preset-accent theme-preset-accent-sunburst"></span>
<span class="theme-preset-font theme-preset-font-sunburst">
<span class="theme-preset-font-display theme-preset-font-display-sunburst">Abcd</span>
<span class="theme-preset-font-ui theme-preset-font-ui-sunburst">Xyz - 123</span>
</span>
</div>
<span class="button-text small">Sun Burst</span>
</button>
@ -1401,6 +1430,10 @@
<span class="theme-preset-background-03 theme-preset-background-coralgreen-03"></span>
<span class="theme-preset-background-04 theme-preset-background-coralgreen-04"></span>
<span class="theme-preset-accent theme-preset-accent-coralgreen"></span>
<span class="theme-preset-font theme-preset-font-coralgreen">
<span class="theme-preset-font-display theme-preset-font-display-coralgreen">Abcd</span>
<span class="theme-preset-font-ui theme-preset-font-ui-coralgreen">Xyz - 123</span>
</span>
</div>
<span class="button-text small">Coral Green</span>
</button>
@ -1413,6 +1446,10 @@
<span class="theme-preset-background-03 theme-preset-background-purplegem-03"></span>
<span class="theme-preset-background-04 theme-preset-background-purplegem-04"></span>
<span class="theme-preset-accent theme-preset-accent-purplegem"></span>
<span class="theme-preset-font theme-preset-font-purplegem">
<span class="theme-preset-font-display theme-preset-font-display-purplegem">Abcd</span>
<span class="theme-preset-font-ui theme-preset-font-ui-purplegem">Xyz - 123</span>
</span>
</div>
<span class="button-text small">Purple Gem</span>
</button>
@ -1425,6 +1462,10 @@
<span class="theme-preset-background-03 theme-preset-background-hotpepper-03"></span>
<span class="theme-preset-background-04 theme-preset-background-hotpepper-04"></span>
<span class="theme-preset-accent theme-preset-accent-hotpepper"></span>
<span class="theme-preset-font theme-preset-font-hotpepper">
<span class="theme-preset-font-display theme-preset-font-display-hotpepper">Abcd</span>
<span class="theme-preset-font-ui theme-preset-font-ui-hotpepper">Xyz - 123</span>
</span>
</div>
<span class="button-text small">Hot Pepper</span>
</button>
@ -1437,6 +1478,10 @@
<span class="theme-preset-background-03 theme-preset-background-steelgrey-03"></span>
<span class="theme-preset-background-04 theme-preset-background-steelgrey-04"></span>
<span class="theme-preset-accent theme-preset-accent-steelgrey"></span>
<span class="theme-preset-font theme-preset-font-steelgrey">
<span class="theme-preset-font-display theme-preset-font-display-steelgrey">Abcd</span>
<span class="theme-preset-font-ui theme-preset-font-ui-steelgrey">Xyz - 123</span>
</span>
</div>
<span class="button-text small">Steel Grey</span>
</button>
@ -1449,6 +1494,10 @@
<span class="theme-preset-background-03 theme-preset-background-outrun-03"></span>
<span class="theme-preset-background-04 theme-preset-background-outrun-04"></span>
<span class="theme-preset-accent theme-preset-accent-outrun"></span>
<span class="theme-preset-font theme-preset-font-outrun">
<span class="theme-preset-font-display theme-preset-font-display-outrun">Abcd</span>
<span class="theme-preset-font-ui theme-preset-font-ui-outrun">Xyz - 123</span>
</span>
</div>
<span class="button-text small">Outrun</span>
</button>
@ -1461,6 +1510,10 @@
<span class="theme-preset-background-03 theme-preset-background-pumpkin-03"></span>
<span class="theme-preset-background-04 theme-preset-background-pumpkin-04"></span>
<span class="theme-preset-accent theme-preset-accent-pumpkin"></span>
<span class="theme-preset-font theme-preset-font-pumpkin">
<span class="theme-preset-font-display theme-preset-font-display-pumpkin">Abcd</span>
<span class="theme-preset-font-ui theme-preset-font-ui-pumpkin">Xyz - 123</span>
</span>
</div>
<span class="button-text small">Pumpkin</span>
</button>
@ -1473,6 +1526,10 @@
<span class="theme-preset-background-03 theme-preset-background-whoosh-03"></span>
<span class="theme-preset-background-04 theme-preset-background-whoosh-04"></span>
<span class="theme-preset-accent theme-preset-accent-whoosh"></span>
<span class="theme-preset-font theme-preset-font-whoosh">
<span class="theme-preset-font-display theme-preset-font-display-whoosh">Abcd</span>
<span class="theme-preset-font-ui theme-preset-font-ui-whoosh">Xyz - 123</span>
</span>
</div>
<span class="button-text small">Whoosh</span>
</button>
@ -1485,6 +1542,10 @@
<span class="theme-preset-background-03 theme-preset-background-eldergold-03"></span>
<span class="theme-preset-background-04 theme-preset-background-eldergold-04"></span>
<span class="theme-preset-accent theme-preset-accent-eldergold"></span>
<span class="theme-preset-font theme-preset-font-eldergold">
<span class="theme-preset-font-display theme-preset-font-display-eldergold">Abcd</span>
<span class="theme-preset-font-ui theme-preset-font-ui-eldergold">Xyz - 123</span>
</span>
</div>
<span class="button-text small">Elder Gold</span>
</button>

7
src/js/theme.js
View File

@ -740,6 +740,13 @@ var theme = (function() {
renderPreview("--theme-preset-background-" + key + "-", i, rgb);
};
html.style.setProperty("--theme-preset-accent-" + key, preset.accent.r + ", " + preset.accent.g + ", " + preset.accent.b);
html.style.setProperty("--theme-preset-font-display-" + key, "\"" + preset.font.display + "\", sans-serif");
html.style.setProperty("--theme-preset-font-ui-" + key, "\"" + preset.font.ui + "\", sans-serif");
if (preset.style == "dark") {
html.style.setProperty("--theme-preset-font-color-" + key, "var(--theme-white)");
} else if (preset.style == "light") {
html.style.setProperty("--theme-preset-font-color-" + key, "var(--theme-black)");
};
};
};