secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Upgrading to theme mixin for auto variant

Browse Source
This commit is contained in:
James Barnsley
2020-05-05 16:50:07 +12:00
parent 67fc8c4ee0
commit 3c407e4220
35 changed files with 450 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/store/index.js
View File

@ -43,7 +43,7 @@ let state = {
http_streaming_url: `http://${window.location.hostname}:8000/mopidy`,
},
ui: {
theme: 'dark',
theme: 'auto',
smooth_scrolling_enabled: true,
hotkeys_enabled: true,
playback_controls_touch_enabled: true,

17
src/js/views/Settings.js
View File

@ -184,12 +184,25 @@ class Settings extends React.Component {
Theme
</div>
<div className="input">
<label>
<input
type="radio"
name="theme"
value="auto"
checked={ui.theme === 'auto'}
onChange={(e) => uiActions.set({ theme: e.target.value })}
/>
<span className="label tooltip">
Auto
<span className="tooltip__content">Detects your browser or OS preference</span>
</span>
</label>
<label>
<input
type="radio"
name="theme"
value="dark"
checked={ui.theme == 'dark'}
checked={ui.theme === 'dark'}
onChange={(e) => uiActions.set({ theme: e.target.value })}
/>
<span className="label">Dark</span>
@ -199,7 +212,7 @@ class Settings extends React.Component {
type="radio"
name="theme"
value="light"
checked={ui.theme == 'light'}
checked={ui.theme === 'light'}
onChange={(e) => uiActions.set({ theme: e.target.value })}
/>
<span className="label">Light</span>

2
src/manifest.json
View File

@ -1,5 +1,5 @@
{
"manifest_version": 3.44,
"manifest_version": "3.44",
"short_name": "Iris",
"name": "Iris",
"icons": [

22
src/scss/components/_context-menu.scss
View File

@ -18,7 +18,7 @@
@include animate();
overflow-y: scroll;
&--submenu {
&--submenu {
z-index: 3;
border-radius: 3px;
transform: translateX(100%);
@ -125,11 +125,11 @@
border-radius: 3px;
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
.light-theme & {
@include theme('light') {
background: colour(white);
}
.dark-theme & {
@include theme('dark') & {
background: colour(grey);
}
@ -148,11 +148,11 @@
right: 0;
bottom: 0;
.dark-theme & {
@include theme('dark') & {
background: colour(grey);
}
.light-theme & {
@include theme('light') {
background: colour(white);
}
}
@ -185,7 +185,7 @@
background-image: linear-gradient(rgba(24,24,24,0) 0%, rgba(24,24,24,1) 20%);
z-index: 1;
.light-theme & {
@include theme('light') {
background-image: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%);
}
}
@ -195,7 +195,7 @@
color: colour(mid_grey);
padding: 16px 22px;
.light-theme & {
@include theme('light') {
color: colour(darkest_grey);
}
@ -268,12 +268,12 @@
transform: none;
padding: 16px 22px;
.light-theme & {
@include theme('light') {
color: colour(darkest_grey);
}
.icon {
display: none;
display: none;
}
&:before {
@ -304,7 +304,7 @@
padding: 16px 22px;
box-sizing: border-box;
.light-theme & {
@include theme('light') {
color: colour(darkest_grey);
}

4
src/scss/components/_dragger.scss
View File

@ -30,7 +30,7 @@
z-index: 98;
background: darken(colour(dark_grey), 1%);
.light-theme & {
@include theme('light') {
background: colour(faint_grey);
}
@ -46,7 +46,7 @@
font-size: 18px;
text-align: center;
.light-theme & {
@include theme('light') {
background: colour(light_grey);
color: colour(darkest_grey);
}

16
src/scss/components/_dropdown-field.scss
View File

@ -14,7 +14,7 @@
&__name {
display: none;
}
.icon {
padding-right: 8px;
}
@ -74,7 +74,7 @@
top: -3px;
right: 9px;
.light-theme & {
@include theme('light') {
background: colour(white);
}
}
@ -87,7 +87,7 @@
overflow-y: auto;
border-radius: 3px;
.light-theme & {
@include theme('light') {
background: colour(white);
}
}
@ -118,7 +118,7 @@
}
}
#context-menu {
#context-menu {
.dropdown-field {
padding: 16px 0;
display: block;
@ -147,7 +147,7 @@
&:hover {
color: colour(white);
.light-theme & {
@include theme('light') {
color: colour(dark_grey) !important;
}
}
@ -172,7 +172,7 @@
color: colour(white) !important;
margin: -3px -5px;
.light-theme & {
@include theme('light') {
color: colour(dark_grey) !important;
}
@ -187,7 +187,7 @@
border-radius: 0;
color: colour(white) !important;
.light-theme & {
@include theme('light') {
color: colour(dark_grey) !important;
}
@ -204,5 +204,5 @@
}
}
}
}
}
}

4
src/scss/components/_grid.scss
View File

@ -216,7 +216,7 @@
overflow: hidden;
border-radius: 3px;
.light-theme & {
@include theme('light') {
color: colour(darkest_grey);
}
@ -244,7 +244,7 @@
background: lighten(colour(dark_grey), 2%);
z-index: -2;
.light-theme & {
@include theme('light') {
background: darken(colour(faint_grey), 5%);
}
}

2
src/scss/components/_header.scss
View File

@ -55,7 +55,7 @@ main {
}
}
.light-theme & {
@include theme('light') {
color: colour(darkest_grey);
&:hover {

2
src/scss/components/_icon-field.scss
View File

@ -15,7 +15,7 @@
&:after {
background: colour(grey) !important;
.light-theme & {
@include theme('light') {
background: rgba(128,128,128,0.4) !important;
}
}

6
src/scss/components/_lists.scss
View File

@ -35,7 +35,7 @@
&:not(:first-child){
border-top: 1px solid rgba(128,128,128,0.05);
.light-theme & {
@include theme('light') {
border-top-color: rgba(128,128,128,0.1);
}
}
@ -101,7 +101,7 @@
&--selected {
background: rgba(125, 125, 125, 0.15) !important;
.light-theme & {
@include theme('light') {
background: rgba(255, 239, 61, 0.35) !important;
}
}
@ -247,7 +247,7 @@
}
}
.light-theme & .flag {
@include theme('light') .flag {
background: colour(light_grey);
color: colour(white);
}

10
src/scss/components/_output-control.scss
View File

@ -21,7 +21,7 @@
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
z-index: 9;
.dark-theme & {
@include theme('dark') & {
color: colour(white);
background: lighten(colour(grey), 4%);
@ -30,7 +30,7 @@
}
}
.light-theme & {
@include theme('light') {
color: colour(darkest_grey);
background: colour(white);
@ -144,11 +144,11 @@
border-radius: 0;
max-height: 50vh;
.dark-theme & {
@include theme('dark') & {
box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.6);
}
.light-theme & {
@include theme('light') {
box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.1);
}

2
src/scss/components/_parallax.scss
View File

@ -96,7 +96,7 @@ $parallax: 'parallax';
}
}
.light-theme & {
@include theme('light') {
&__stage {
background-color: colour(faint_grey);
}

8
src/scss/components/_playback-controls.scss
View File

@ -17,7 +17,7 @@
z-index: -1;
}
.dark-theme & {
@include theme('dark') & {
color: colour(white);
&__background {
@ -26,7 +26,7 @@
}
}
.light-theme & {
@include theme('light') {
color: colour(darkest_grey);
&__background {
@ -220,7 +220,7 @@
background: none;
color: colour(white);
.light-theme & {
@include theme('light') {
color: colour(darkest_grey);
}
@ -251,7 +251,7 @@
}
&.play {
.light-theme & {
@include theme('light') {
color: colour(turquoise);
}

2
src/scss/components/_popularity.scss
View File

@ -17,7 +17,7 @@
opacity: 1;
}
.light-theme & {
@include theme('light') {
background: colour(darkest_grey);
}
}

12
src/scss/components/_sidebar.scss
View File

@ -39,11 +39,11 @@
margin: 0 1.1em;
border-radius: 3px;
.dark-theme & {
@include theme('dark') & {
@include gradient_overlay(3px);
}
.light-theme & {
@include theme('light') {
@include animate();
color: colour(darkest_grey);
font-weight: 600;
@ -88,7 +88,7 @@
opacity: 0.15;
}
.light-theme & {
@include theme('light') {
color: lighten(colour(darkest_grey), 20%);
}
}
@ -126,7 +126,7 @@
opacity: 0.5;
z-index: 99;
.light-theme & {
@include theme('light') {
color: colour(darkest_grey);
}
}
@ -140,11 +140,11 @@
position: fixed;
z-index: 100;
.light-theme & {
@include theme('light') {
background: lighten(colour(faint_grey), 2%);
}
.dark-theme & {
@include theme('dark') & {
background: colour(darkest_grey);
}

6
src/scss/components/_snapcast.scss
View File

@ -13,7 +13,7 @@
color: colour(white);
background: transparent;
.light-theme & {
@include theme('light') {
color: colour(darkest_grey);
}
}
@ -73,7 +73,7 @@
}
}
.light-theme & {
@include theme('light') {
&:hover{
.menu-item__inner {
background: darken(colour(faint_grey), 8%);
@ -109,7 +109,7 @@
font-size: 1rem;
}
.light-theme & {
@include theme('light') {
background: darken(colour(faint_grey), 8%);
}

2
src/scss/components/_sources-priority-field.scss
View File

@ -28,7 +28,7 @@
background: rgba(255,255,255,0.2);
}
.light-theme & {
@include theme('light') {
background: colour(faint_grey);
color: inherit;

8
src/scss/components/_sub-tabs.scss
View File

@ -45,7 +45,7 @@
&.icon--svg {
opacity: 0.8;
.light-theme & {
@include theme('light') {
@include invert();
}
}
@ -62,7 +62,7 @@
.menu-item__inner {
background: lighten(colour(dark_grey), 4%);
.light-theme & {
@include theme('light') {
background: darken(colour(faint_grey), 4%);
}
}
@ -82,7 +82,7 @@
padding-bottom: 40px;
margin-bottom: 0;
.light-theme & {
@include theme('light') {
background: darken(colour(faint_grey), 4%);
}
}
@ -99,7 +99,7 @@
padding-bottom: 0;
}
.light-theme & {
@include theme('light') {
background: darken(colour(faint_grey), 4%);
}
}

6
src/scss/components/_sub-views.scss
View File

@ -11,7 +11,7 @@
padding-bottom: 3px;
cursor: pointer;
.light-theme & {
@include theme('light') {
color: colour(darkest_grey);
}
@ -29,7 +29,7 @@
&--active {
border-color: colour(white) !important;
.light-theme & {
@include theme('light') {
border-color: colour(darkest_grey) !important;
}
}
@ -37,7 +37,7 @@
&:not(.sub-views__option--active):hover {
border-color: colour(soft_grey) !important;
.light-theme & {
@include theme('light') {
border-color: colour(light_grey) !important;
}
}

2
src/scss/components/_tooltip.scss
View File

@ -41,7 +41,7 @@ $module: 'tooltip';
left: 9px;
}
.light-theme & {
@include theme('light') {
background: colour(dark_grey);
color: colour(white);

23
src/scss/global/_core.scss
View File

@ -78,15 +78,15 @@ body {
height: 100%;
position: relative;
&.light-theme {
color: colour(darkest_grey);
background: colour(faint_grey);
}
&.dark-theme {
@include theme('dark', true) {
color: colour(light_grey);
background: colour(dark_grey);
}
@include theme('light', true) {
color: colour(darkest_grey);
background: colour(faint_grey);
}
}
main {
@ -144,7 +144,7 @@ main {
}
}
.notouch.light-theme & {
.notouch & {
&::-webkit-scrollbar-track {
background: colour(white);
}
@ -215,6 +215,11 @@ main {
color: colour(white);
white-space: pre-wrap;
word-wrap: break-word;
@include theme('light') {
background: rgba(128, 128, 128, 0.25);
color: colour(dark_grey);
}
}
}
@ -227,7 +232,7 @@ h1 {
color: colour(white);
display: flex;
.light-theme & {
@include theme('light') {
color: colour(darkest_grey);
}
}
@ -594,7 +599,7 @@ footer {
background: lighten(colour(dark_grey), 10%);
color: colour(mid_grey);
.light-theme & {
@include theme('light') {
background: lighten(colour(mid_grey), 25%);
}
}

36
src/scss/global/_forms.scss
View File

@ -39,7 +39,7 @@ select {
text-align: center;
}
.light-theme & {
@include theme('light') {
color: colour(darkest_grey);
background: rgba(255, 255, 255, 0.75);
}
@ -80,7 +80,7 @@ input[type="radio"] {
box-sizing: border-box;
background: rgba(128, 128, 128, 0.05);
.light-theme & {
@include theme('light') {
background: colour(white);
}
}
@ -101,7 +101,7 @@ input[type="radio"] {
background: rgba(128, 128, 128, 1);
}
.light-theme & {
@include theme('light') {
&:checked + .label:after {
background: colour(darkest_grey);
}
@ -125,7 +125,7 @@ input[type="checkbox"] {
margin-right: 0.5rem;
background: rgba(128, 128, 128, 0.05);
.light-theme & {
@include theme('light') {
background: colour(white);
}
}
@ -139,7 +139,7 @@ input[type="checkbox"] {
background: colour(mid_grey);
}
.light-theme & {
@include theme('light') {
& + .label:before {
color: colour(darkest_grey);
}
@ -200,7 +200,7 @@ select {
text-decoration: none;
border: 2px solid transparent;
.dark-theme & {
@include theme('dark') {
color: colour(white);
}
@ -214,19 +214,21 @@ select {
transform: translate(1px, 1px);
}
.light-theme &--default {
border-color: colour(darkest_grey);
@include theme('light') {
&--default {
border-color: colour(darkest_grey);
&:active {
background: rgba(128, 128, 128, 0.2);
&:active {
background: rgba(128, 128, 128, 0.2);
}
&:hover {
box-shadow: 0 0 10px rgba(colour(darkest_grey), 0.3);
}
}
}
&:hover {
box-shadow: 0 0 10px rgba(colour(darkest_grey), 0.3);
}
}
.dark-theme &--default {
@include theme('dark') &--default {
border-color: colour(white);
&:active {
@ -575,7 +577,7 @@ select {
}
}
.light-theme & {
@include theme('light') {
.description {
color: rgba(0, 0, 0, 0.6);
}

22
src/scss/global/_variables.scss
View File

@ -299,6 +299,28 @@ $bp_shallow: 650px;
}
}
@mixin theme($theme: 'dark', $apply_to_self: false) {
@if $apply_to_self {
&.#{$theme}-theme {
@content
}
&.auto-theme {
@media (prefers-color-scheme: $theme) {
@content
}
}
} @else {
@at-root .#{$theme}-theme & {
@content
}
@at-root .auto-theme & {
@media (prefers-color-scheme: $theme) {
@content
}
}
}
}
@mixin blur($size: 10px) {
-webkit-filter: blur($size);
filter: blur($size);

2
src/scss/views/_artist.scss
View File

@ -32,7 +32,7 @@
.context-menu-trigger {
color: colour(white);
.light-theme & {
@include theme('light') {
color: colour(darkest_grey);
}
}

4
src/scss/views/_discover.scss
View File

@ -133,7 +133,7 @@
}
}
.light-theme & {
@include theme('light') {
color: colour(darkest_grey);
}
}
@ -156,7 +156,7 @@
font-size: 12px;
text-transform: uppercase;
.light-theme & {
@include theme('light') {
color: colour(darkest_grey);
}
}

6
src/scss/views/_modal.scss
View File

@ -12,7 +12,7 @@
min-height: 100%;
z-index: 98;
.light-theme & {
@include theme('light') {
background: darken(colour(faint_grey), 6%);
color: colour(darkest_grey);
}
@ -42,7 +42,7 @@
font-size: 35px;
}
.light-theme & {
@include theme('light') {
color: colour(darkest_grey);
}
}
@ -334,7 +334,7 @@
font-size: 2.4rem;
margin: 0 10px;
.light-theme & {
@include theme('light') {
color: colour(darkest_grey);
}
}