diff --git a/gulpfile.js b/gulpfile.js
index 539cb9fe..6baf3f5e 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -64,6 +64,7 @@ const cssFiles = [
path.src + '/css/background.css',
path.src + '/css/group.css',
path.src + '/css/link.css',
+ path.src + '/css/theme.css',
path.src + '/css/auto-suggest.css',
path.src + '/css/fontawesome.css'
]
diff --git a/src/css/theme.css b/src/css/theme.css
new file mode 100644
index 00000000..2bc6246e
--- /dev/null
+++ b/src/css/theme.css
@@ -0,0 +1,221 @@
+.theme-preset-button {
+ padding: 0;
+ flex-direction: column;
+ justify-content: center;
+ overflow: hidden;
+ max-width: 6em;
+}
+
+.theme-preset-button .button-text {
+ margin-top: 0.75em;
+ margin-bottom: 1em;
+ margin-left: 0;
+ font-size: 0.75em;
+}
+
+.theme-preset-button:after {
+ content: none;
+}
+
+.theme-preset-preview {
+ width: 6em;
+ height: 6em;
+ position: relative;
+}
+
+.theme-preset-background-01,
+.theme-preset-background-02,
+.theme-preset-background-03,
+.theme-preset-background-04,
+.theme-preset-accent {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: block;
+}
+
+.theme-preset-background-01 {
+ z-index: 1;
+}
+
+.theme-preset-background-02 {
+ z-index: 2;
+ clip-path: polygon(0 40%, 60% 100%, 100% 100%, 100% 0, 0 0);
+}
+
+.theme-preset-background-03 {
+ z-index: 3;
+ clip-path: polygon(0 0, 100% 100%, 100% 0);
+}
+
+.theme-preset-background-04 {
+ z-index: 4;
+ clip-path: polygon(40% 0, 100% 60%, 100% 0);
+}
+
+.theme-preset-accent {
+ z-index: 5;
+ clip-path: polygon(100% 50%, 100% 100%, 50% 100%);
+}
+
+.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))
+}
+
+.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))
+}
+
+.theme-preset-accent-nighttab {
+ background-color: rgb(var(--theme-preset-accent-nighttab))
+}
+
+.theme-preset-background-midnightblue-01 {
+ background-color: rgb(var(--theme-preset-background-midnightblue-01))
+}
+
+.theme-preset-background-midnightblue-02 {
+ background-color: rgb(var(--theme-preset-background-midnightblue-02))
+}
+
+.theme-preset-background-midnightblue-03 {
+ background-color: rgb(var(--theme-preset-background-midnightblue-03))
+}
+
+.theme-preset-background-midnightblue-04 {
+ background-color: rgb(var(--theme-preset-background-midnightblue-04))
+}
+
+.theme-preset-accent-midnightblue {
+ background-color: rgb(var(--theme-preset-accent-midnightblue))
+}
+
+.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))
+}
+
+.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))
+}
+
+.theme-preset-accent-bluegum {
+ background-color: rgb(var(--theme-preset-accent-bluegum))
+}
+
+.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))
+}
+
+.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))
+}
+
+.theme-preset-accent-sharpmint {
+ background-color: rgb(var(--theme-preset-accent-sharpmint))
+}
+
+.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))
+}
+
+.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))
+}
+
+.theme-preset-accent-snowblue {
+ background-color: rgb(var(--theme-preset-accent-snowblue))
+}
+
+.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))
+}
+
+.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))
+}
+
+.theme-preset-accent-coralgreen {
+ background-color: rgb(var(--theme-preset-accent-coralgreen))
+}
+
+.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))
+}
+
+.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))
+}
+
+.theme-preset-accent-purplegem {
+ background-color: rgb(var(--theme-preset-accent-purplegem))
+}
+
+.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))
+}
+
+.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))
+}
+
+.theme-preset-accent-hotpepper {
+ background-color: rgb(var(--theme-preset-accent-hotpepper))
+}
diff --git a/src/css/variables.css b/src/css/variables.css
index c3abc385..ecad6de5 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -26,6 +26,46 @@
--theme-shade-pos-08: 25, 25, 25;
--theme-shade-pos-09: 25, 25, 25;
--theme-shade-pos-10: 25, 25, 25;
+ --theme-preset-background-nighttab-01: 25, 25, 25;
+ --theme-preset-background-nighttab-02: 25, 25, 25;
+ --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-background-midnightblue-01: 25, 25, 25;
+ --theme-preset-background-midnightblue-02: 25, 25, 25;
+ --theme-preset-background-midnightblue-03: 25, 25, 25;
+ --theme-preset-background-midnightblue-04: 25, 25, 25;
+ --theme-preset-accent-midnightblue: 25, 25, 25;
+ --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-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-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-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-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-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;
/* header */
--header-area-width: 100%;
--header-shade-color: var(--theme-color-01);
diff --git a/src/index.html b/src/index.html
index d49cb35a..fc8d783c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -34,6 +34,7 @@
+
@@ -1309,28 +1310,100 @@
diff --git a/src/js/control.js b/src/js/control.js
index 0188a3fa..422baf97 100644
--- a/src/js/control.js
+++ b/src/js/control.js
@@ -2542,10 +2542,10 @@ var control = (function() {
render.update();
}
}, {
- element: helper.e(".control-theme-preset-nightingaleblue"),
+ element: helper.e(".control-theme-preset-midnightblue"),
type: "button",
func: function() {
- theme.preset("nightingaleblue");
+ theme.preset("midnightblue");
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
diff --git a/src/js/state.js b/src/js/state.js
index e2c32c75..52004271 100644
--- a/src/js/state.js
+++ b/src/js/state.js
@@ -389,7 +389,7 @@ var state = (function() {
radius: 0.25,
style: "dark"
},
- nightingaleblue: {
+ midnightblue: {
color: {
hsl: {
h: 220,
@@ -445,9 +445,9 @@ var state = (function() {
}
},
accent: {
- r: 255,
- g: 10,
- b: 178
+ r: 94,
+ g: 255,
+ b: 226
},
radius: 0.8,
style: "dark"
@@ -456,18 +456,18 @@ var state = (function() {
color: {
hsl: {
h: 197,
- s: 14,
- l: 61
+ s: 25,
+ l: 46
},
rgb: {
- r: 141,
- g: 161,
- b: 169
+ r: 87,
+ g: 130,
+ b: 146
}
},
accent: {
- r: 105,
- g: 183,
+ r: 59,
+ g: 207,
b: 214
},
radius: 0,
@@ -497,23 +497,23 @@ var state = (function() {
purplegem: {
color: {
hsl: {
- h: 300,
- s: 30,
- l: 51
+ h: 301,
+ s: 28,
+ l: 56
},
rgb: {
- r: 170,
- g: 95,
- b: 169
+ r: 175,
+ g: 112,
+ b: 173
}
},
accent: {
- r: 26,
- g: 167,
- b: 255
+ r: 110,
+ g: 109,
+ b: 208
},
radius: 0.40,
- style: "dark"
+ style: "light"
},
hotpepper: {
color: {
diff --git a/src/js/theme.js b/src/js/theme.js
index 2655f480..cea661f6 100644
--- a/src/js/theme.js
+++ b/src/js/theme.js
@@ -240,6 +240,50 @@ var theme = (function() {
}
};
+ render.preset = function() {
+ var html = helper.e("html");
+ for (var key in state.get.preset()) {
+ var preset = state.get.preset()[key];
+ var shadeSteps = 4;
+ var lightShift = 12;
+ var hsl = helper.convertColor.rgb.hsl(preset.color.rgb);
+ var renderPreview = function(name, index, rgb) {
+ for (var key in rgb) {
+ if (rgb[key] < 0) {
+ rgb[key] = 0;
+ } else if (rgb[key] > 255) {
+ rgb[key] = 255;
+ };
+ rgb[key] = parseInt(rgb[key], 10);
+ };
+ if (index < 10) {
+ index = "0" + index;
+ } else {
+ index = index;
+ };
+ html.style.setProperty(name + index, rgb.r + ", " + rgb.g + ", " + rgb.b);
+ };
+ for (var i = 1; i <= shadeSteps; i++) {
+ var rgb;
+ if (preset.style == "dark") {
+ rgb = helper.convertColor.hsl.rgb({
+ h: hsl.h,
+ s: hsl.s,
+ l: hsl.l - (lightShift * i)
+ });
+ } else if (preset.style == "light") {
+ rgb = helper.convertColor.hsl.rgb({
+ h: hsl.h,
+ s: hsl.s,
+ l: hsl.l + (lightShift * i)
+ });
+ };
+ renderPreview("--theme-preset-background-" + key + "-", i, rgb);
+ };
+ html.style.setProperty("--theme-preset-accent-" + key, preset.accent.r + ", " + preset.accent.g + ", " + preset.accent.b);
+ };
+ };
+
var accent = {
random: function() {
mod.accent.random();
@@ -283,6 +327,7 @@ var theme = (function() {
render.color.shade();
render.accent.color();
render.radius();
+ render.preset();
};
// exposed methods