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

12
src/koto-window.c
View file

@ -75,8 +75,6 @@ static void koto_window_init (KotoWindow * self) {
current_playlist = koto_current_playlist_new();
playback_engine = koto_playback_engine_new();
self->provider = gtk_css_provider_new();
gtk_css_provider_load_from_resource(self->provider, "/com/github/joshstrobl/koto/style.css");
koto_window_manage_style(config, 0, self); // Immediately apply the theme
g_signal_connect(config, "notify::ui-theme-desired", G_CALLBACK(koto_window_manage_style), self); // Handle changes to desired theme
g_signal_connect(config, "notify::ui-theme-override", G_CALLBACK(koto_window_manage_style), self); // Handle changes to theme overriding
@ -184,12 +182,14 @@ void koto_window_manage_style(
desired_theme = "dark";
}
GtkStyleContext * context = gtk_widget_get_style_context(GTK_WIDGET(self));
if (!GTK_IS_CSS_PROVIDER(self->provider)) { // Don't have a CSS provider yet
self->provider = gtk_css_provider_new();
}
gtk_css_provider_load_from_resource(self->provider, g_strdup_printf("/com/github/joshstrobl/koto/koto-builtin-%s.css", desired_theme));
if (!overriding_theme) { // If we are not overriding the theme
if (!gtk_style_context_has_class(context, "koto-theme-dark")) { // Don't have our css class for a theme
gtk_style_context_add_provider_for_display(gdk_display_get_default(), GTK_STYLE_PROVIDER(self->provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
}
gtk_style_context_add_provider_for_display(gdk_display_get_default(), GTK_STYLE_PROVIDER(self->provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
GList * themes = NULL;
themes = g_list_append(themes, "dark");

4
src/koto.gresource.xml
View file

@ -1,6 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<gresources>
<gresource prefix="/com/github/joshstrobl/koto">
<file alias="style.css">../theme/style.css</file>
<file alias="koto-builtin-dark.css">../theme/koto-builtin-dark.css</file>
<file alias="koto-builtin-gruvbox.css">../theme/koto-builtin-gruvbox.css</file>
<file alias="koto-builtin-light.css">../theme/koto-builtin-light.css</file>
</gresource>
</gresources>

2
src/meson.build
View file

@ -55,7 +55,7 @@ gnome = import('gnome')
koto_sources += gnome.compile_resources('koto-resources',
'koto.gresource.xml',
dependencies: [ theme ],
dependencies: themes,
c_name: 'koto',
)

6
src/pages/music/album-view.c
View file

@ -105,7 +105,11 @@ static void koto_album_view_init(KotoAlbumView * self) {
gtk_box_append(GTK_BOX(self->album_tracks_box), self->discs); // Add the discs list box to the albums tracks box
self->album_cover = koto_cover_art_button_new(220, 220, NULL);
gtk_box_prepend(GTK_BOX(self->main), koto_cover_art_button_get_main(self->album_cover));
GtkWidget * album_cover_main = koto_cover_art_button_get_main(self->album_cover);
gtk_widget_set_valign(album_cover_main, GTK_ALIGN_START);
gtk_box_prepend(GTK_BOX(self->main), album_cover_main);
KotoButton * cover_art_button = koto_cover_art_button_get_button(self->album_cover); // Get the button for the cover art
koto_button_add_click_handler(cover_art_button, KOTO_BUTTON_CLICK_TYPE_PRIMARY, G_CALLBACK(koto_album_view_toggle_album_playback), self);
}

6
theme/_button.scss
View file

@ -1,10 +1,16 @@
@import "vars";
.koto-button {
border-width: 0;
& > image {
margin-right: 10px;
}
&:not(.active) {
color: $text-color-bright;
}
&.active > image {
color: $green;
}

32
theme/_disc-view.scss
View file

@ -1,8 +1,30 @@
@import "vars";
.disc-view {
& > box { // Horizontal box with image and disc label
color: #ccc;
margin: 10px 0;
.discs-list {
background-color: transparent;
border-color: transparent;
border-width: 0;
.disc-view {
& > box { // Horizontal box with image and disc label
color: $text-color-faded;
margin: 10px 0;
}
& .track-list {
& > row {
&:not(:active):not(:selected) { // Neither active nor selected, see gtk overrides
color: $text-color-bright;
&:nth-child(odd):not(:hover) {
background-color: $bg-primary;
}
&:nth-child(even), &:hover {
background-color: $bg-secondary;
}
}
}
}
}
}
}

8
theme/main.scss → theme/_main.scss
View file

@ -1,7 +1,7 @@
@import 'components/cover-art-button';
@import 'components/gtk-overrides';
@import 'pages/music-local';
@import 'pages/playlist-page';
@import 'variants/dark/main';
@import 'button';
@import 'disc-view';
@ -9,14 +9,18 @@
@import 'player-bar';
@import 'primary-nav';
@import 'track-item';
@import 'vars';
window {
color: $text-color-bright;
background-color: $bg-primary;
& > headerbar, & > headerbar:active {
background-color: $bg-secondary;
background-image: none;
}
.koto-dialog-container {
background-color: transparentize($bg-secondary, 0.25);
padding: 20px;
}

15
theme/_player-bar.scss
View file

@ -1,13 +1,28 @@
@import 'vars';
.player-bar {
background-color: $bg-secondary;
background-image: none;
padding: $halvedpadding;
.koto-button {
&:not(.toggled) {
color: $player-bar-icon-color;
}
&.toggled {
color: $text-color-bright;
}
}
.playerbar-info { // Central info section
& > box { // Info labels
margin-left: 2ex;
& > image {
color: $text-color-faded;
}
& > label {
margin-top: 6px;
margin-bottom: 6px;

1
theme/_primary-nav.scss
View file

@ -14,6 +14,7 @@
& > .expander {
& > .expander-header {
color: $text-color-faded;
margin-bottom: 10px;
}
}

3
theme/_vars.scss
View file

@ -1,4 +1,3 @@
$grey: #2e2e2e;
$midnight: #1d1d1d;
$darkgrey: #666666;
$green: #60E078;
@ -6,4 +5,4 @@ $palewhite: #cccccc;
$red : #FF4652;
$itempadding: 40px;
$halvedpadding: $itempadding / 2;
$halvedpadding: $itempadding / 2;

11
theme/components/_cover-art-button.scss Normal file
View file

@ -0,0 +1,11 @@
.cover-art-button {
&:hover {
& > image {
opacity: 0.75;
}
& > revealer > box { // Inner controls
background-color: transparentize($bg-secondary, 0.25);
}
}
}

88
theme/components/_gtk-overrides.scss
View file

@ -1,8 +1,8 @@
@import '../vars';
@mixin selected-row-styling {
color: $midnight;
background-color: $green;
color: $selected-row-color-text;
background-color: $selected-row-color-bg;
border: 0; // Don't have a border
border-image: none; // GTK uses an image which is weird
border-image-width: 0;
@ -12,15 +12,61 @@
}
button {
.text-button {
&:not(.destructive-action):not(.suggested-action) { // Is just a plain ol' normal text button
color: $button-normal-color-text;
background: $button-normal-color-bg;
border-color: $button-normal-color-border;
}
}
&.destructive-action {
background-color: $red;
color: $button-destructive-color-text;
background-color: $button-destructive-color-bg;
background-image: none;
border-width: 0;
}
&.suggested-action { // Adwaita makes it blue but we want it green
color: $midnight;
background-color: $green;
color: $button-suggested-color-text;
background-color: $button-suggested-color-bg;
background-image: none;
border-width: 0;
}
}
checkbutton {
color: $text-color-bright;
&:active {
background-color: transparent;
}
}
check {
background-image: none;
&:not(:checked) { // Not checked
color: $text-color-faded;
}
&:active {
background-color: transparent;
}
&:checked { // Checked but not actively pressing on it
color: $text-color-bright;
background-color: $koto-primary-color;
}
}
entry {
color: $text-color-bright;
background: $input-background;
border-color: $border-color;
placeholder { // Placeholder text
color: $text-color-faded;
}
}
@ -42,11 +88,26 @@ list:not(.discs-list), listview {
}
}
popover.background {
& > arrow, & > contents {
background-color: $bg-primary;
border-color: $border-color;
}
& > contents {
color: $text-color-bright;
}
}
range {
&.dragging { // Dragging a range
& > trough {
highlight {
border-color: $koto-primary-color;
}
& > slider {
background-color: $green;
background-color: $koto-primary-color;
}
}
}
@ -54,10 +115,21 @@ range {
scale { // Progress bar
highlight {
background-color: $green;
background-color: $koto-primary-color;
border-color: $koto-primary-color;
}
slider { // Slider
outline-color: $green;
outline-color: $koto-primary-color;
}
}
scalebutton {
&, button, image {
color: $player-bar-icon-color;
}
&:active, &:checked, &:hover, button:active, button:checked, button:hover {
background-color: transparent;
}
}

5
theme/koto-builtin-dark.scss Normal file
View file

@ -0,0 +1,5 @@
$variant : 'dark';
@import 'vars'; // Root vars
@import 'variants/dark/vars'; // Dark variant vars
@import 'main';

5
theme/koto-builtin-gruvbox.scss Normal file
View file

@ -0,0 +1,5 @@
$variant : 'gruvbox';
@import 'vars'; // Root vars
@import 'variants/gruvbox/vars'; // Grubox variant vars
@import 'main';

5
theme/koto-builtin-light.scss Normal file
View file

@ -0,0 +1,5 @@
$variant : 'light';
@import 'vars'; // Root vars
@import 'variants/light/vars'; // Light variant vars
@import 'main';

30
theme/meson.build
View file

@ -1,12 +1,22 @@
sassc = find_program('sassc', required: true)
theme = custom_target('Theme generation',
input: 'main.scss',
output: 'style.css',
command: [
sassc,
[ '-a', '-M', '-t', 'compact' ],
'@INPUT@', '@OUTPUT@',
],
build_by_default: true,
)
builtin_variants = [
'dark',
'gruvbox',
'light'
]
themes = []
foreach variant: builtin_variants
themes += custom_target('@0@ theme generation'.format(variant),
input: 'koto-builtin-@0@.scss'.format(variant),
output: 'koto-builtin-@0@.css'.format(variant),
command: [
sassc,
[ '-a', '-M', '-t', 'compact' ],
'@INPUT@', '@OUTPUT@',
],
build_by_default: true,
)
endforeach

4
theme/pages/_music-local.scss
View file

@ -2,6 +2,10 @@
.page-music-local {
& > .artist-list {
&, & > viewport, & > viewport > list {
background-color: $artist-list-bg;
}
& > viewport > list {
& > row {
padding: $halvedpadding;

10
theme/pages/_playlist-page.scss
View file

@ -6,7 +6,7 @@
margin-left: 40px;
& > label { // All labels
color: $palewhite;
color: $text-color-faded;
}
& > label:nth-child(1) { // First item (type of playlist)
@ -55,6 +55,14 @@
& > .track-list-columned { // Column content
& > row {
&:not(:selected) {
color: $text-color-bright;
}
&:nth-child(odd):not(:selected) {
background-color: $bg-secondary;
}
& > .track-list-columned-item { // Track rows
font-size: x-large;
}

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;