diff --git a/stylesheets/commons/Mainpage.scss b/stylesheets/commons/Mainpage.scss
index 1ebdbc23fca..c895ac14199 100644
--- a/stylesheets/commons/Mainpage.scss
+++ b/stylesheets/commons/Mainpage.scss
@@ -2,6 +2,41 @@
 Template(s): Main Page
 Author(s): FO-nTTaX, salle
 *******************************************************************************/
+
+/* Matches */
+$matches-transfer-green-background-color--light: rgba( 0, 255, 0, 0.065 );
+$matches-transfer-green-background-color--dark: var( --clr-semantic-positive-10 );
+$matches-transfer-red-background-color--light: rgba( 153, 0, 34, 0.065 );
+$matches-transfer-red-background-color--dark: var( --clr-semantic-negative-10 );
+$matches-toggle-button-background-color--light: color-mix( in srgb, #ffffff 32%, var( --clr-wiki-primary-container ) );
+$matches-toggle-button-background-color--dark: var( --clr-wiki-theme-20 );
+$matches-toggle-button-hover-background-color--light: color-mix( in srgb, #ffffff 50%, var( --clr-wiki-primary-container ) );
+$matches-toggle-button-hover-background-color--dark: var( --clr-wiki-theme-30 );
+$matches-toggle-button-color--light: var( --clr-wiki-on-primary-container );
+$matches-toggle-button-color--dark: var( --clr-wiki-theme-90 );
+
+/* Tournaments */
+$tournament-list-header-background-color--light: var( --clr-surface-4 );
+$tournament-list-header-background-color--dark: color-mix( in srgb, #000000 20%, var( --clr-wiki-theme-20 ) );
+
+:root {
+	--matches-transfer-red-background-color: #{$matches-transfer-red-background-color--light};
+	--matches-transfer-green-background-color: #{$matches-transfer-green-background-color--light};
+	--matches-toggle-button-background-color: #{$matches-toggle-button-background-color--light};
+	--matches-toggle-button-hover-background-color: #{$matches-toggle-button-hover-background-color--light};
+	--matches-toggle-button-color: #{$matches-toggle-button-color--light};
+	--tournament-list-header-background-color: #{$tournament-list-header-background-color--light};
+}
+
+.theme--dark {
+	--matches-transfer-red-background-color: #{$matches-transfer-red-background-color--dark};
+	--matches-transfer-green-background-color: #{$matches-transfer-green-background-color--dark};
+	--matches-toggle-button-background-color: #{$matches-toggle-button-background-color--dark};
+	--matches-toggle-button-hover-background-color: #{$matches-toggle-button-hover-background-color--dark};
+	--matches-toggle-button-color: #{$matches-toggle-button-color--dark};
+	--tournament-list-header-background-color: #{$tournament-list-header-background-color--dark};
+}
+
 .mainpage-v2 {
 	display: flex;
 	flex-flow: column nowrap;
diff --git a/stylesheets/commons/Panels.scss b/stylesheets/commons/Panels.scss
index 765b4546739..d97b33839a1 100644
--- a/stylesheets/commons/Panels.scss
+++ b/stylesheets/commons/Panels.scss
@@ -2,6 +2,38 @@
 Template(s): Panels
 Author(s): FO-nTTaX
 *******************************************************************************/
+
+/* Panel box */
+/* Default values */
+.theme--light {
+	--panel-box-border-color: color-mix( in srgb, #000000 16%, var( --clr-wiki-primary-container ) );
+	--panel-box-color: var( --clr-wiki-on-primary-container );
+	--panel-header-background-color: var( --clr-wiki-primary-container );
+}
+
+.theme--dark {
+	--panel-box-border-color: var( --clr-surface-3 );
+	--panel-box-color: var( --clr-wiki-on-primary-container );
+	--panel-header-background-color: color-mix( in srgb, #000000 20%, var( --clr-wiki-theme-20 ) );
+}
+
+/* If theme was in the known list */
+$themes: sun, tuliptree, redviolet, gigas, forest;
+
+@each $theme in $themes {
+	html[data-wiki-theme='#{$theme}'].theme--light {
+		--panel-box-border-color: var( --clr-#{$theme}-80 );
+		--panel-box-color: var( --clr-#{$theme}-10 );
+		--panel-header-background-color: var( --clr-#{$theme}-90 );
+	}
+
+	html[data-wiki-theme='#{$theme}'].theme--dark {
+		--panel-box-border-color: var( --clr-#{$theme}-30 );
+		--panel-box-color: var( --clr-#{$theme}-90 );
+		--panel-header-background-color: var( --clr-#{$theme}-20 );
+	}
+}
+
 // Add html prefix to get higher specificity
 html .panel-box {
 	margin-bottom: 10px;
diff --git a/stylesheets/commons/TeamPortal.scss b/stylesheets/commons/TeamPortal.scss
index f7b4500a371..d5060900cbc 100644
--- a/stylesheets/commons/TeamPortal.scss
+++ b/stylesheets/commons/TeamPortal.scss
@@ -2,6 +2,60 @@
 Template(s): Team Portal Boxes
 Author(s): salle
 *******************************************************************************/
+
+/* Buttons - General */
+$button-background-color--light: var( --clr-primary );
+$button-background-color--dark: var( --clr-wiki-theme-20 );
+$button-background-color-hover--light: color-mix( in srgb, #ffffff 16%, var( --clr-primary ) );
+$button-background-color-hover--dark: color-mix( in srgb, #000000 16%, var( --clr-wiki-theme-20 ) );
+$button-background-color-focus--light: color-mix( in srgb, #ffffff 12%, var( --clr-primary ) );
+$button-background-color-focus--dark: color-mix( in srgb, #ffffff 12%, var( --clr-wiki-theme-20 ) );
+$button-background-color-active--light: color-mix( in srgb, #ffffff 8%, var( --clr-primary ) );
+$button-background-color-active--dark: color-mix( in srgb, #ffffff 8%, var( --clr-wiki-theme-20 ) );
+$button-background-color-disabled--light: color-mix( in srgb, #000000 12%, #e3e3e3 );
+$button-background-color-disabled--dark: color-mix( in srgb, #ffffff 12%, #1f1f1f );
+$button-border-color-focus--light: var( --clr-wiki-theme-20 );
+$button-border-color-focus--dark: var( --clr-wiki-theme-40 );
+$button-color--light: var( --clr-on-primary );
+$button-color--dark: #ffffff;
+$button-secondary-background-color-hover--light: hsl( from var( --clr-primary ) h s l / 0.08 );
+$button-secondary-background-color-hover--dark:  hsl( from var( --clr-primary ) h s l / 0.08 );
+$button-secondary-color--light: var( --clr-primary-30 );
+$button-secondary-color--dark: var( --clr-primary-80 );
+$button-error-color--light: var( --clr-semantic-negative-40 );
+$button-error-color--dark: var( --clr-semantic-negative-80 );
+
+$button-new-primary-color--light: var( --clr-wiki-theme-40 );
+$button-new-primary-color--dark: var( --clr-wiki-theme-30 );
+
+:root {
+	--button-background-color: #{$button-background-color--light};
+	--button-background-color-hover: #{$button-background-color-hover--light};
+	--button-background-color-focus: #{$button-background-color-focus--light};
+	--button-background-color-active: #{$button-background-color-active--light};
+	--button-background-color-disabled: #{$button-background-color-disabled--light};
+	--button-border-color-focus: #{$button-border-color-focus--light};
+	--button-color: #{$button-color--light};
+	--button-secondary-background-color-hover: #{$button-secondary-background-color-hover--light};
+	--button-secondary-color: #{$button-secondary-color--light};
+	--button-error-color: #{$button-error-color--light};
+	--button-new-primary-color: #{$button-new-primary-color--light};
+}
+
+.theme--dark {
+	--button-background-color: #{$button-background-color--dark};
+	--button-background-color-hover: #{$button-background-color-hover--dark};
+	--button-background-color-focus: #{$button-background-color-focus--dark};
+	--button-background-color-active: #{$button-background-color-active--dark};
+	--button-background-color-disabled: #{$button-background-color-disabled--dark};
+	--button-border-color-focus: #{$button-border-color-focus--dark};
+	--button-color: #{$button-color--dark};
+	--button-secondary-background-color-hover: #{$button-secondary-background-color-hover--dark};
+	--button-secondary-color: #{$button-secondary-color--dark};
+	--button-error-color: #{$button-error-color--dark};
+	--button-new-primary-color: #{$button-new-primary-color--dark};
+}
+
 .team-portal-list {
 	max-width: 970px;
 }