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