ModernDesktopInitiative/koto
4
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity Actions

Implement support for dedicated theme CSS files from our gresource.

Browse source 
Properly implement light and gruvbox themes. Yay!
This commit is contained in:
Joshua Strobl 2021-05-27 15:47:45 +03:00
parent 4cc5c6efd4
commit 8334323af8
27 changed files with 285 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

7
theme/variants/dark/_cover-art-button.scss
View file

@ -1,7 +0,0 @@
@import '../../vars';
.cover-art-button {
& > revealer > box { // Inner controls
background-color: rgba(0,0,0,0.75);
}
}

21
theme/variants/dark/_disc-view.scss
View file

@ -1,21 +0,0 @@
@import '../../vars';
.disc-view {
& > box { // Horizontal box with image and disc label
color: #ccc;
}
& .track-list {
& > row {
&:not(:active):not(:selected) { // Neither active nor selected, see gtk overrides
&:nth-child(odd):not(:hover) {
background-color: $midnight;
}
&:nth-child(even), &:hover {
background-color: $grey;
}
}
}
}
}

21
theme/variants/dark/_main.scss
View file

@ -1,21 +0,0 @@
@import '../../vars';
window {
&.koto-theme-dark {
background-color: $grey;
& > headerbar, & > headerbar:active {
background-color: $midnight;
}
.koto-dialog-container {
background-color: transparentize($midnight, 0.75);
}
@import 'cover-art-button';
@import 'disc-view';
@import 'music-local';
@import 'player-bar';
@import 'playlist-page';
}
}

7
theme/variants/dark/_music-local.scss
View file

@ -1,7 +0,0 @@
.page-music-local {
& > .artist-list {
&, & > viewport, & > viewport > list {
background-color: $midnight;
}
}
}

15
theme/variants/dark/_player-bar.scss
View file

@ -1,15 +0,0 @@
@import '../../vars';
.player-bar {
background-color: $midnight;
.koto-button {
&:not(.toggled) {
color: $darkgrey;
}
&.toggled {
color: white;
}
}
}

13
theme/variants/dark/_playlist-page.scss
View file

@ -1,13 +0,0 @@
@import '../../vars';
.playlist-page {
.track-list-content { // Our Track List
& > .track-list-columned { // Column content
& > row {
&:nth-child(odd):not(:selected) {
background-color: $midnight;
}
}
}
}
}

25
theme/variants/dark/_vars.scss Normal file
View file

@ -0,0 +1,25 @@
$koto-primary-color: $green;
$bg-primary : #2e2e2e;
$bg-secondary : $midnight;
$border-color: black;
$text-color-bright: white;
$text-color-faded: $palewhite;
$button-destructive-color-bg: $red;
$button-destructive-color-text: white;
$button-suggested-color-bg: $koto-primary-color;
$button-suggested-color-text: $midnight;
$button-normal-color-bg: $midnight;
$button-normal-color-text: $text-color-bright;
$button-normal-color-border: black;
$input-background: $bg-primary;
$artist-list-bg: $bg-secondary;
$player-bar-icon-color: $darkgrey;
$selected-row-color-bg : $koto-primary-color;
$selected-row-color-text : $midnight;

25
theme/variants/gruvbox/_vars.scss Normal file
View file

@ -0,0 +1,25 @@
$koto-primary-color: #ba5923;
$bg-primary : #2C2826;
$bg-secondary : #211e1c;
$border-color: black;
$text-color-bright: white;
$text-color-faded: $palewhite;
$button-destructive-color-bg: $red;
$button-destructive-color-text: white;
$button-suggested-color-bg: $koto-primary-color;
$button-suggested-color-text: $midnight;
$button-normal-color-bg: $midnight;
$button-normal-color-text: $text-color-bright;
$button-normal-color-border: black;
$input-background: $bg-primary;
$artist-list-bg: $bg-secondary;
$player-bar-icon-color: #423C3A;
$selected-row-color-bg : $koto-primary-color;
$selected-row-color-text : $midnight;

25
theme/variants/light/_vars.scss Normal file
View file

@ -0,0 +1,25 @@
$koto-primary-color: $green;
$bg-primary : #fafafa;
$bg-secondary : $palewhite;
$border-color: $darkgrey;
$text-color-bright: $midnight;
$text-color-faded: $darkgrey;
$button-destructive-color-bg: $red;
$button-destructive-color-text: white;
$button-suggested-color-bg: $koto-primary-color;
$button-suggested-color-text: $midnight;
$button-normal-color-bg: white;
$button-normal-color-text: $text-color-bright;
$button-normal-color-border: $darkgrey;
$input-background: $bg-primary;
$artist-list-bg: $bg-secondary;
$player-bar-icon-color: $darkgrey;
$selected-row-color-bg : $koto-primary-color;
$selected-row-color-text : $midnight;