Gutenberg – Eigene Farben hinzufügen

Hallo Zusammen,

ich habe für den Gutenberg Editor eigene Farben hinzugefügt. Im Backend wird mir alles richtig angezeigt. Doch im Frontend übernimmt er die Farbe nicht. Obwohl ich diese auch in der style.css angegeben habe. Ich kann den Fehler leider nicht finden. Vielleicht kann mir jemand weiterhelfen, anbei der Code.

Viele Grüße

/**
 * Registers support for Gutenberg features.
 */
function theme_slug_gutenberg_support() {

	// Add theme support for custom color palette.
	add_theme_support( 'editor-color-palette', array(
		array(
			'name'  => esc_html__( 'Primary', 'theme-slug' ),
			'slug'  => 'dunkelgrau',
			'color' => '#646363',
		),
		array(
			'name'  => esc_html__( 'Accent', 'theme-slug' ),
			'slug'  => 'blau',
			'color' => '#0968B1',
		),
		array(
			'name'  => esc_html__( 'Light Gray', 'theme-slug' ),
			'slug'  => 'hellgrau',
			'color' => '#e5e5e5',
		),
		array(
			'name'  => esc_html__( 'Dark Gray', 'theme-slug' ),
			'slug'  => 'weiss',
			'color' => '#FFFFFF',
		),
		array(
			'name'  => esc_html__( 'Dark Gray', 'theme-slug' ),
			'slug'  => 'schwarz',
			'color' => '#000000',
		),
	) );

	// Disable theme support for custom colors.
	add_theme_support( 'disable-custom-colors' );
}
add_action( 'after_setup_theme', 'theme_slug_gutenberg_support' );

/* Gutenberg Text Colors */
.dunkelgrau {
	color: #646363;
}

.blau {
	color: #0968B1;
}

.hellgrau {
	color: #e5e5e5;
}

.weiss {
	color: #FFFFFF;
}

.schwarz {
	color: #000000;
}

/* Gutenberg Background Colors */
.dunkelgrau {
	background-color:#646363;
}

.blau {
	background-color:#0968B1;
}

.hellgrau {
	background-color:#e5e5e5;
}

.weiss {
	background-color:#FFFFFF;
}

.schwarz {
	color: #000000;
}

Dies wird angezeigt wenn ich die Seite prüfe:

<p class="has-text-color has-background has-large-font-size has-weiss-color has-dunkelgrau-background-color">Text</p>