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

making background colors nicer

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

2
package.json
View File

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

20
src/_maketheme.scss
View File

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

6
src/dark.scss
View File

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

5
src/light.scss
View File

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

2
src/theme/_card.scss
View File

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

4
src/theme/_global.scss
View File

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

3
src/theme/_input.scss
View File

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

2
src/theme/_modal.scss
View File

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