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

making background colors nicer

This commit is contained in:
Fabian 2020-11-03 17:32:10 +01:00
parent 185510f4e7
commit 722271c13e
9 changed files with 42 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -49,7 +49,7 @@
<body class="light-theme">
<button
style="position: fixed; top: 10px; left: 10px; z-index: 100;"
style="position: fixed; top: 10px; left: 10px; z-index: 100"
onclick="switchStyle()"
>
Switch
@ -86,6 +86,10 @@
</div>
</div>
<div class="margin prev">
<div class="card">Card</div>
</div>
<div class="margin prev">
<button class="btn">Hallo Welt</button>
<button class="btn btn-primary">Hallo Welt</button>
@ -207,7 +211,7 @@
</div>
<div class="margin prev">
<div class="header" style="justify-content: space-between;">
<div class="header" style="justify-content: space-between">
<span>I1</span>
<span>I2</span>
<div class="header-icon-button">
@ -296,7 +300,7 @@
}
let match = window.matchMedia("prefers-color-scheme: dark");
match.addListener(ev => {
match.addListener((ev) => {
applyStyleSheet(ev.matches);
});
</script>

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@hibas123/theme",
"version": "2.0.5",
"version": "2.0.6",
"description": "",
"main": " ",
"files": [

20
src/_maketheme.scss
View File

@ -5,6 +5,10 @@ $name: false !default;
$background: false !default;
$on-background: false !default;
$root-background: false !default;
$on-root-background: false !default;
$button-color: #cccccc !default;
$on-button: #000000 !default;
@ -12,19 +16,31 @@ $on-button: #000000 !default;
@error ("background and on-background must be set!");
}
@if $root-background==false or $on-root-background==false {
@error ("root-background and on-root-background must be set!");
}
@if $name==false {
@error ("name must be set!");
}
$theme: #{$name}-theme;
.#{$theme} {
--background: #{$background};
--on-background: #{$on-background};
--root-background: #{$root-background};
--on-root-background: #{$on-root-background};
}
@mixin background-default {
background: $background;
color: $on-background;
}
.#{$theme} .background-default {
background: $background;
color: $on-background;
@include background-default();
}
@each $dp in $elevations {

6
src/dark.scss
View File

@ -1,7 +1,11 @@
@import "./_vals.scss";
$background: #000000;
$background: #111111;
$on-background: white;
$root-background: #000000;
$on-root-background: white;
$disabled-brightness: 1.1;
@mixin Elevation($dp, $imp: false) {

5
src/light.scss
View File

@ -1,5 +1,9 @@
$background: #f9f9f9;
$on-background: black;
$root-background: #eee;
$on-root-background: black;
$disabled-brightness: 0.9;
@mixin MakeShadow($imp, $type) {
@ -24,6 +28,7 @@ $disabled-brightness: 0.9;
)
)
// 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,

2
src/theme/_card.scss
View File

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

4
src/theme/_global.scss
View File

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

3
src/theme/_input.scss
View File

@ -2,8 +2,7 @@
color: $on-background;
option {
background: $background;
color: $on-background;
@include background-default();
}
}

2
src/theme/_modal.scss
View File

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