OpenServer/Theme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Switching to different style of theme selection

Browse Source
This commit is contained in:
Fabian Stamm 2020-03-27 11:04:50 +01:00
parent 2835b1bac9
commit 67478113cb
15 changed files with 326 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
index.html
View File

@ -1,56 +1,18 @@
<html>
<head>
<link rel="stylesheet" href="./out/base.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" href="./out/base.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
<script src="./ipsum.js"></script>
<script>
const l = new LoremIpsum();
window.prip = (i = 12) => window.document.write(l.paragraph(i));
window.lo = (i = 32) => l.paragraph(i);
const createStyle = (link) => {
let e = document.createElement("link");
e.type = "text/css";
e.rel = "stylesheet";
e.media = "screen,print";
e.href = link;
return e;
}
const light = "./out/light.css";
const dark = "./out/dark.css"
let active;
function applyStyleSheet(d = false) {
let n = createStyle(d ? dark : light);
if (n === active)
return;
if (active)
active.remove();
document.head.appendChild(n);
active = n;
}
applyStyleSheet(false);
let isLight = true;
function switchStyle() {
applyStyleSheet(isLight);
isLight = !isLight;
}
window.$ = document.querySelector.bind(document);
let match = window.matchMedia("prefers-color-scheme: dark");
match.addListener((ev) => {
applyStyleSheet(ev.matches)
})
</script>
<style>
/* :root {
--primary: blue;
@ -83,10 +45,15 @@
overflow-y: scroll;
}
</style>
</head>
</head>
<body>
<button style="position: fixed; top: 10px; left: 10px; z-index: 100;" onclick="switchStyle()">Switch</button>
<body class="light-theme">
<button
style="position: fixed; top: 10px; left: 10px; z-index: 100;"
onclick="switchStyle()"
>
Switch
</button>
<div class="content">
<div class="margin prev">
<div class="parent">
@ -100,15 +67,18 @@
<div class="child elv-12"></div>
<div class="child elv-16"></div>
<div class="child elv-24"></div>
<div id="elv-transition" class="child elv-transition elv-1"></div>
<div
id="elv-transition"
class="child elv-transition elv-1"
></div>
<script>
const elm = document.getElementById("elv-transition");
setInterval(() => {
if (elm.classList.contains("elv-1")) {
elm.classList.remove("elv-1")
elm.classList.remove("elv-1");
elm.classList.add("elv-24");
} else {
elm.classList.remove("elv-24")
elm.classList.remove("elv-24");
elm.classList.add("elv-1");
}
}, 600);
@ -128,23 +98,36 @@
</div>
<div class="margin prev">
<button class="btn" onclick="$('#modal1').classList.toggle('modal-hidden')">Open Modal</button>
<button
class="btn"
onclick="$('#modal1').classList.toggle('modal-hidden')"
>
Open Modal
</button>
<div id="modal1" class="modal modal-hidden">
<div class="modal-title">Title</div>
<div id="modal1_content" class="modal-content">
<script>
prip(80)
prip(80);
</script>
</div>
<div class="modal-action">
<button onclick="$('#modal1_content').innerHTML += lo(32)">Save</button>
<button id="modal1_close" onclick="$('#modal1').classList.toggle('modal-hidden')">Close</button>
<button
onclick="$('#modal1_content').innerHTML += lo(32)"
>
Save
</button>
<button
id="modal1_close"
onclick="$('#modal1').classList.toggle('modal-hidden')"
>
Close
</button>
</div>
</div>
</div>
<div class="margin prev">
<form>
<div class="input-group">
@ -158,24 +141,35 @@
</div>
<input class="inp" type="text" placeholder="Name" />
<input class="inp" type="text" placeholder="Name2" value="Test01" />
<input class="inp" type="text" placeholder="Name" disabled />
<input
class="inp"
type="text"
placeholder="Name2"
value="Test01"
/>
<input
class="inp"
type="text"
placeholder="Name"
disabled
/>
<div class="input-group">
<div class="input-group"></div>
</div>
<label class="input-checkbox">Checkbox
<label class="input-checkbox"
>Checkbox
<input type="checkbox" />
<span></span>
</label>
<label class="input-checkbox">Radio 1
<label class="input-checkbox"
>Radio 1
<input type="radio" name="rad" checked />
<span></span>
</label>
<label class="input-checkbox">Radio 2
<label class="input-checkbox"
>Radio 2
<input type="radio" name="rad" />
<span></span>
</label>
@ -190,7 +184,9 @@
</div>
<div class="margin prev">
<button onclick="$('#ul1').classList.toggle('list-divider')">Toggle Divider</button>
<button onclick="$('#ul1').classList.toggle('list-divider')">
Toggle Divider
</button>
<ul id="ul1" class="list">
<li>Item 1</li>
<li>Item 2</li>
@ -215,11 +211,22 @@
<span>I1</span>
<span>I2</span>
<div class="header-icon-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-trash-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-trash-2"
>
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
<path
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
@ -268,10 +275,30 @@
<div class="margin prev">
<div class="scroll-test">
<script>prip(2000)</script>
<script>
prip(2000);
</script>
</div>
</div>
</div>
</body>
<script>
function applyStyleSheet(d = false) {
if (d) document.body.className = "dark-theme";
else document.body.className = "light-theme";
}
applyStyleSheet(false);
let isLight = true;
function switchStyle() {
applyStyleSheet(isLight);
isLight = !isLight;
}
let match = window.matchMedia("prefers-color-scheme: dark");
match.addListener(ev => {
applyStyleSheet(ev.matches);
});
</script>
</body>
</html>

10
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@hibas123/theme",
"version": "2.0.0",
"version": "2.0.1",
"description": "",
"main": " ",
"files": [
@ -13,10 +13,10 @@
"scripts": {
"build-grid": "sass src/grid.scss:out/grid.css",
"watch-grid": "sass --watch src/grid.scss:out/grid.css",
"build-clean": "sass src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css ",
"watch-clean": "sass --watch src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",
"build-prefix": "sass src/base-ht.scss:out/base-ht.css src/dark-ht.scss:out/dark-ht.css src/light-ht.scss:out/light-ht.css",
"watch-prefix": "sass --watch src/base-ht.scss:out/base-ht.css src/dark-ht.scss:out/dark-ht.css src/light-ht.scss:out/light-ht.css",
"build-clean": "sass src/build.scss:out/base.css",
"watch-clean": "sass --watch src/build.scss:out/base.css",
"build-prefix": "sass src/build-pref.scss:out/prefix.css",
"watch-prefix": "sass --watch src/build-pref.scss:out/prefix.css",
"build": "npm run build-clean && npm run build-prefix && npm run build-grid",
"prepublishOnly": "npm run build"
},

16
src/_maketheme.scss
View File

@ -1,6 +1,7 @@
@import "./_vals.scss";
$ns: "" !default;
$name: false !default;
$background: false !default;
$on-background: false !default;
@ -11,26 +12,31 @@ $on-button: #000000 !default;
@error ("background and on-background must be set!");
}
:root {
@if $name==false {
@error ("name must be set!");
}
$theme: #{$name}-theme;
::root {
--background: #{$background};
--on-background: #{$on-background};
}
.background-default {
.#{$theme} .background-default {
background: $background;
}
@each $dp in $elevations {
.elv-#{$dp} {
.#{$theme} .elv-#{$dp} {
@include Elevation($dp, false);
}
.elv-#{$dp}-imp {
.#{$theme} .elv-#{$dp}-imp {
@include Elevation($dp, true);
}
}
.elv-transition {
.#{$theme} .elv-transition {
@include ElevationTransition();
}

3
src/build-pref.scss Normal file
View File

@ -0,0 +1,3 @@
$ns: "ht-";
@import "./build.scss";

5
src/build.scss Normal file
View File

@ -0,0 +1,5 @@
@import "./base.scss";
@import "./light.scss";
@import "./dark.scss";

2
src/dark.scss
View File

@ -18,4 +18,6 @@ $disabled-brightness: 1.1;
transition: background $time;
}
$name: "dark";
@import "./_maketheme.scss";

4
src/light.scss
View File

@ -23,7 +23,7 @@ $disabled-brightness: 0.9;
0 1px 3px 0 rgba(0, 0, 0, 0.2)
)
)
// box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .20);
// box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .20);;
} @else if $dp==2 {
@include MakeShadow(
$imp,
@ -116,4 +116,6 @@ $disabled-brightness: 0.9;
transition: box-shadow $time;
}
$name: "light";
@import "./_maketheme.scss";

6
src/theme/_btn.scss
View File

@ -13,11 +13,11 @@
}
}
.btn-flat {
.#{$theme} .#{$ns}btn-flat {
@include btn-flat();
}
.#{$ns}btn {
.#{$theme} .#{$ns}btn {
@include Elevation(1);
@include ElevationTransition(0.2s);
&:focus {
@ -26,7 +26,7 @@
@include btn-flat();
}
.#{$ns}fab {
.#{$theme} .#{$ns}fab {
@include Elevation(8);
@include ElevationTransition(0.2s);
&:focus {

4
src/theme/_card.scss
View File

@ -1,7 +1,7 @@
.#{$ns}card {
.#{$theme} .#{$ns}card {
@include Elevation(3);
}
.#{$ns}card-elevated {
.#{$theme} .#{$ns}card-elevated {
@include Elevation(8);
}

3
src/theme/_global.scss
View File

@ -1,5 +1,4 @@
html,
body {
.#{$theme} {
background: $background;
color: $on-background;
}

2
src/theme/_header.scss
View File

@ -1,3 +1,3 @@
.#{$ns}header {
.#{$theme} .#{$ns}header {
@include Elevation(3);
}

6
src/theme/_input.scss
View File

@ -1,4 +1,4 @@
.#{$ns}inp {
.#{$theme} .#{$ns}inp {
color: $on-background;
option {
@ -7,13 +7,13 @@
}
}
.#{$ns}input-group {
.#{$theme} .#{$ns}input-group {
input {
@extend .#{$ns}inp;
}
}
.#{$ns}input-checkbox {
.#{$theme} .#{$ns}input-checkbox {
span {
background-color: $button-color;
}

4
src/theme/_list.scss
View File

@ -1,9 +1,9 @@
.#{$ns}list-clickable {
.#{$theme} .#{$ns}list-clickable {
li:hover {
background: darken-brighten-color($background, 5%);
}
}
.#{$ns}list-selected {
.#{$theme} .#{$ns}list-selected {
background: darken-brighten-color($background, 10%);
}

2
src/theme/_modal.scss
View File

@ -1,4 +1,4 @@
.#{$ns}modal {
.#{$theme} .#{$ns}modal {
background: $background;
@include Elevation(24);

2
src/theme/_table.scss
View File

@ -1,4 +1,4 @@
.#{$ns}table {
.#{$theme} .#{$ns}table {
tr:nth-child(odd):not(:first-child) {
background: darken-brighten-color($background, 10%);
}