A dark color scheme for Twenty Eleven child?

Copy/paste all the css-stuff from “/colors/dark.css” into your Child “/style.css” file, then you will get a dark 2011 child theme you can edit.

Tried your solution this morning but the CSS in twentyEleven/colors/dark.css over rules any CSS rules pasted from dark.css embedded into my child’s style.css file. Why wouldn’t my child theme have it’s own /colors/dark.css file?

Why wouldn’t my child theme have it’s own /colors/dark.css file?

the child theme could have its own /colors/dark.css file, but you would need to programm it to link the /colors/dark.css file after the corresponding file of the parent theme;

dark.css of the parent theme gets enqueued in twentyeleven/inc/theme-options.php (line 319):

/**
 * Enqueue the styles for the current color scheme.
 *
 * @since Twenty Eleven 1.0
 */
...etc...

you could add a corresponding, adapted code into functions.php of your child theme:

/** Enqueue the stylesheet for the current color scheme into the child theme. */
function twentyelevenchild_enqueue_color_scheme() {
	$options = twentyeleven_get_theme_options();
	$color_scheme = $options['color_scheme'];
	if ( 'dark' == $color_scheme )
		wp_enqueue_style( 'dark_child', get_stylesheet_directory_uri() . '/colors/dark.css', array(), null );
	do_action( 'twentyelevenchild_enqueue_color_scheme', 'dark_child' );
}
add_action( 'wp_enqueue_scripts', 'twentyelevenchild_enqueue_color_scheme', 11);

(different function names, added priority, different directory)
(not extremely tested)

So…. what’s the easiest way to have a child dark.css? I don’t what to mess with functions.php unless necessary.

Tried your solution this morning but the CSS in twentyEleven/colors/dark.css over rules any CSS rules pasted from dark.css embedded into my child’s style.css file. Why wouldn’t my child theme have it’s own /colors/dark.css file?

I Choose the White default design under theme-settings, then it work for me. I Build a dark grey child version. see: https://www.lej-erhvervslokaler.dk/

Regards!

In the parent theme the stylesheet is loaded by a call to add_action, so the child stylesheet with the changes is over written by the parents add_action call that loads the dark stylesheet, if the ‘dark’ option is selected.

/inc/theme-options.php

function twentyeleven_enqueue_color_scheme() {
	$options = twentyeleven_get_theme_options();
	$color_scheme = $options['color_scheme'];

	if ( 'dark' == $color_scheme )
		wp_enqueue_style( 'dark', get_template_directory_uri() . '/colors/dark.css', array(), null );

	do_action( 'twentyeleven_enqueue_color_scheme', $color_scheme );
}
add_action( 'wp_enqueue_scripts', 'twentyeleven_enqueue_color_scheme' );

Child Theme:
So in the child theme copy and paste the /colors/ folder from the parent to the child theme.
Edit the dark.css and make the changes in the child theme.

Then in the child themes functions.php use a function called with the add_action ‘Hook’ after_setup_theme(), this is after the child and parent functions.php “have both run”, unqueue the stylesheet and load your own.

If you do not have a child theme functions.php then save the code below as functions.php, be aware that there is no closing ?> in this file, this is correct.

Note: get_template_directory_uri() becomes get_stylesheet_directory_uri() for the child theme.

UNTESTED CODE

<?php

/** Tell WordPress to run post_theme_setup() when the 'after_setup_theme' hook is run. */
add_action( 'after_setup_theme', 'post_theme_setup' );

if ( !function_exists( 'post_theme_setup' ) ):
function post_theme_setup() {

	/* Remove the Stylesheet Actions */
	$options = twentyeleven_get_theme_options();
	$color_scheme = $options['color_scheme'];
	if ( 'dark' == $color_scheme ) {
		 wp_dequeue_style( 'dark' );
		remove_action( 'wp_enqueue_scripts', 'twentyeleven_enqueue_color_scheme' );
	}

	/* Add Back our new style */
	function twentyeleven_enqueue_child_style() {
		if ( file_exists( get_stylesheet_directory_uri() . '/colors/dark.css') ) {
			wp_enqueue_style( 'child_style', get_template_directory_uri() . '/colors/dark.css', array(), null );
			do_action( 'twentyeleven_enqueue_child_style', 'child_style' );
		}
	}
	add_action( 'wp_enqueue_scripts', 'twentyeleven_enqueue_child_style' );
}
endif;

Also this might be of interest and save a bit of work, I have a child theme that finds the colors from the header image, allows you to control a lot more of the colors, light or dark twenty eleven theme, and has a text area for additional css!

HTH

David

I used this scenario and created a how-to post, slightly different from my above post but tested and working.

HTH

David