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

537
index.html
View File

@ -1,277 +1,304 @@
<html> <html>
<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>
<head> <script>
<link rel="stylesheet" href="./out/base.css"> const l = new LoremIpsum();
<meta charset="UTF-8"> window.prip = (i = 12) => window.document.write(l.paragraph(i));
<meta name="viewport" content="width=device-width, initial-scale=1.0"> window.lo = (i = 32) => l.paragraph(i);
<!-- <meta http-equiv="X-UA-Compatible" content="ie=edge"> --> window.$ = document.querySelector.bind(document);
<script src="./ipsum.js"></script> </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"; <style>
const dark = "./out/dark.css" /* :root {
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; --primary: blue;
--on-primary: white; --on-primary: white;
} */ } */
.parent { .parent {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.child { .child {
flex: 1 0 21%; flex: 1 0 21%;
margin: 20px; margin: 20px;
height: 100px; height: 100px;
} }
.prev { .prev {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 40rem; max-width: 40rem;
} }
.content { .content {
margin: 0 2rem; margin: 0 2rem;
} }
.scroll-test { .scroll-test {
height: 100px; height: 100px;
overflow-y: scroll; overflow-y: scroll;
} }
</style> </style>
</head> </head>
<body> <body class="light-theme">
<button style="position: fixed; top: 10px; left: 10px; z-index: 100;" onclick="switchStyle()">Switch</button> <button
<div class="content"> style="position: fixed; top: 10px; left: 10px; z-index: 100;"
<div class="margin prev"> onclick="switchStyle()"
<div class="parent"> >
<div class="child elv-1"></div> Switch
<div class="child elv-2"></div> </button>
<div class="child elv-3"></div> <div class="content">
<div class="child elv-4"></div> <div class="margin prev">
<div class="child elv-6"></div> <div class="parent">
<div class="child elv-8"></div> <div class="child elv-1"></div>
<div class="child elv-9"></div> <div class="child elv-2"></div>
<div class="child elv-12"></div> <div class="child elv-3"></div>
<div class="child elv-16"></div> <div class="child elv-4"></div>
<div class="child elv-24"></div> <div class="child elv-6"></div>
<div id="elv-transition" class="child elv-transition elv-1"></div> <div class="child elv-8"></div>
<script> <div class="child elv-9"></div>
const elm = document.getElementById("elv-transition"); <div class="child elv-12"></div>
setInterval(() => { <div class="child elv-16"></div>
if (elm.classList.contains("elv-1")) { <div class="child elv-24"></div>
elm.classList.remove("elv-1") <div
elm.classList.add("elv-24"); id="elv-transition"
} else { class="child elv-transition elv-1"
elm.classList.remove("elv-24") ></div>
elm.classList.add("elv-1");
}
}, 600);
</script>
</div>
</div>
<div class="margin prev">
<button class="btn">Hallo Welt</button>
<button class="btn btn-primary">Hallo Welt</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-error">Error</button>
<button class="btn fab">+</button>
<a class="btn fab fab-left" href="#">-</a>
</div>
<div class="margin prev">
<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> <script>
prip(80) const elm = document.getElementById("elv-transition");
setInterval(() => {
if (elm.classList.contains("elv-1")) {
elm.classList.remove("elv-1");
elm.classList.add("elv-24");
} else {
elm.classList.remove("elv-24");
elm.classList.add("elv-1");
}
}, 600);
</script> </script>
</div> </div>
<div class="modal-action"> </div>
<button onclick="$('#modal1_content').innerHTML += lo(32)">Save</button>
<button id="modal1_close" onclick="$('#modal1').classList.toggle('modal-hidden')">Close</button> <div class="margin prev">
<button class="btn">Hallo Welt</button>
<button class="btn btn-primary">Hallo Welt</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-error">Error</button>
<button class="btn fab">+</button>
<a class="btn fab fab-left" href="#">-</a>
</div>
<div class="margin prev">
<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);
</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>
</div>
</div>
</div>
<div class="margin prev">
<form>
<div class="input-group">
<label>Name</label>
<input type="text" placeholder="Name" />
</div>
<div class="input-group">
<label>Name</label>
<input type="text" placeholder="Name" />
</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
/>
<div class="input-group"></div>
<label class="input-checkbox"
>Checkbox
<input type="checkbox" />
<span></span>
</label>
<label class="input-checkbox"
>Radio 1
<input type="radio" name="rad" checked />
<span></span>
</label>
<label class="input-checkbox"
>Radio 2
<input type="radio" name="rad" />
<span></span>
</label>
<select class="inp">
<option>Opt1</option>
<option>Opt2</option>
<option>Opt3</option>
<option>Opt4</option>
</select>
</form>
</div>
<div class="margin prev">
<button onclick="$('#ul1').classList.toggle('list-divider')">
Toggle Divider
</button>
<ul id="ul1" class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<div class="margin prev">
<ul class="list list-divider list-clickable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<div class="margin prev">
<div class="header" style="justify-content: space-between;">
<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"
>
<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>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</div>
</div>
</div>
<div class="margin prev">
<div class="header">
<span>Header with links</span>
<a href="#">Page 1</a>
<a href="#">Page 2</a>
<a href="#">Page 3</a>
</div>
</div>
<div class="margin prev">
<table class="table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Sanna</td>
<td>Castillo</td>
<td>65</td>
</tr>
<tr>
<td>Petra</td>
<td>Serrano</td>
<td>26</td>
</tr>
</table>
</div>
<div class="margin prev">
<div class="scroll-test">
<script>
prip(2000);
</script>
</div> </div>
</div> </div>
</div> </div>
<script>
function applyStyleSheet(d = false) {
if (d) document.body.className = "dark-theme";
else document.body.className = "light-theme";
}
applyStyleSheet(false);
let isLight = true;
<div class="margin prev"> function switchStyle() {
<form> applyStyleSheet(isLight);
<div class="input-group"> isLight = !isLight;
<label>Name</label> }
<input type="text" placeholder="Name" />
</div>
<div class="input-group">
<label>Name</label>
<input type="text" placeholder="Name" />
</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 />
<div class="input-group">
</div>
<label class="input-checkbox">Checkbox
<input type="checkbox" />
<span></span>
</label>
<label class="input-checkbox">Radio 1
<input type="radio" name="rad" checked />
<span></span>
</label>
<label class="input-checkbox">Radio 2
<input type="radio" name="rad" />
<span></span>
</label>
<select class="inp">
<option>Opt1</option>
<option>Opt2</option>
<option>Opt3</option>
<option>Opt4</option>
</select>
</form>
</div>
<div class="margin prev">
<button onclick="$('#ul1').classList.toggle('list-divider')">Toggle Divider</button>
<ul id="ul1" class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<div class="margin prev">
<ul class="list list-divider list-clickable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<div class="margin prev">
<div class="header" style="justify-content: space-between;">
<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">
<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>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</div>
</div>
</div>
<div class="margin prev">
<div class="header">
<span>Header with links</span>
<a href="#">Page 1</a>
<a href="#">Page 2</a>
<a href="#">Page 3</a>
</div>
</div>
<div class="margin prev">
<table class="table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Sanna</td>
<td>Castillo</td>
<td>65</td>
</tr>
<tr>
<td>Petra</td>
<td>Serrano</td>
<td>26</td>
</tr>
</table>
</div>
<div class="margin prev">
<div class="scroll-test">
<script>prip(2000)</script>
</div>
</div>
</div>
</body>
let match = window.matchMedia("prefers-color-scheme: dark");
match.addListener(ev => {
applyStyleSheet(ev.matches);
});
</script>
</body>
</html> </html>

10
package.json
View File

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

16
src/_maketheme.scss
View File

@ -1,6 +1,7 @@
@import "./_vals.scss"; @import "./_vals.scss";
$ns: "" !default; $ns: "" !default;
$name: false !default;
$background: false !default; $background: false !default;
$on-background: false !default; $on-background: false !default;
@ -11,26 +12,31 @@ $on-button: #000000 !default;
@error ("background and on-background must be set!"); @error ("background and on-background must be set!");
} }
:root { @if $name==false {
@error ("name must be set!");
}
$theme: #{$name}-theme;
::root {
--background: #{$background}; --background: #{$background};
--on-background: #{$on-background}; --on-background: #{$on-background};
} }
.background-default { .#{$theme} .background-default {
background: $background; background: $background;
} }
@each $dp in $elevations { @each $dp in $elevations {
.elv-#{$dp} { .#{$theme} .elv-#{$dp} {
@include Elevation($dp, false); @include Elevation($dp, false);
} }
.elv-#{$dp}-imp { .#{$theme} .elv-#{$dp}-imp {
@include Elevation($dp, true); @include Elevation($dp, true);
} }
} }
.elv-transition { .#{$theme} .elv-transition {
@include ElevationTransition(); @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; transition: background $time;
} }
$name: "dark";
@import "./_maketheme.scss"; @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) 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 { } @else if $dp==2 {
@include MakeShadow( @include MakeShadow(
$imp, $imp,
@ -116,4 +116,6 @@ $disabled-brightness: 0.9;
transition: box-shadow $time; transition: box-shadow $time;
} }
$name: "light";
@import "./_maketheme.scss"; @import "./_maketheme.scss";

6
src/theme/_btn.scss
View File

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

4
src/theme/_card.scss
View File

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

3
src/theme/_global.scss
View File

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

2
src/theme/_header.scss
View File

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

6
src/theme/_input.scss
View File

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

4
src/theme/_list.scss
View File

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

2
src/theme/_modal.scss
View File

@ -1,4 +1,4 @@
.#{$ns}modal { .#{$theme} .#{$ns}modal {
background: $background; background: $background;
@include Elevation(24); @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) { tr:nth-child(odd):not(:first-child) {
background: darken-brighten-color($background, 10%); background: darken-brighten-color($background, 10%);
} }