¿Existe una propiedad 'box-shadow-color'?

Tengo el siguiente CSS:

box-shadow: inset 0px 0px 2px #a00;

Ahora estoy tratando de extraer ese color para hacer que los colores de la página sean 'skinnable'. ¿Hay alguna forma de hacer esto? Simplemente quitando el color, y luego usando la misma tecla nuevamente, más tarde sobrescribe la regla original.

No parece haber una box-shadow-color, al menos Google no muestra nada.

No:

http://www.w3.org/TR/css3-background/#the-box-shadow

Puede verificar esto en Chrome y Firefox consultando la lista de estilos calculados. Otras propiedades que tienen métodos abreviados (como border-radius) tienen sus variaciones definidas en la especificación.

Como con la mayoría de las propiedades CSS "de mano larga" que faltan, las variables CSS pueden resolver este problema:

#el {
    --box-shadow-color: palegoldenrod;
    box-shadow: 1px 2px 3px var(--box-shadow-color);
}

#el:hover {
    --box-shadow-color: goldenrod;
}

En realidad ... lo hay! Algo así como. box-shadowpor defecto color, al igual que lo borderhace.

De acuerdo con http://dev.w3.org/.../#the-box-shadow

El color es el color de la sombra. Si el color está ausente, el color utilizado se toma de la propiedad 'color'.

En la práctica, debe cambiar la colorpropiedad y salir box-shadowsin color:

box-shadow: 1px 2px 3px;
color: #a00;

Apoyo

• Safari 6+
• Chrome 20+ (al menos)
• Firefox 13+ (al menos)
• IE9 + (IE8 no es compatible box-shadowen absoluto)

Manifestación

div {
    box-shadow: 0 0 50px;
    transition: 0.3s color;
}
.green {
    color: green;
}
.red {
    color: red;
}
div:hover {
    color: yellow;
}

/*demo style*/
body {
    text-align: center;
}
div {
    display: inline-block;
    background: white;
    height: 100px;
    width: 100px;
    margin: 30px;
    border-radius: 50%;
}

<div class="green"></div>
<div class="red"></div>

El error mencionado en el comentario a continuación se ha solucionado :)

Podrías usar un preprocesador CSS para desollar. Con sass puedes hacer algo similar a esto:

_theme1.scss:

$theme-primary-color: #a00;
$theme-secondary-color: #d00;
// etc.

_theme2.scss:

$theme-primary-color: #666;
$theme-secondary-color: #ccc;
// etc.

styles.scss:

// import whichever theme you want to use
@import 'theme2';

-webkit-box-shadow: inset 0px 0px 2px $theme-primary-color;
-moz-box-shadow: inset 0px 0px 2px $theme-primary-color;

Si no es una temática en todo el sitio, sino una temática basada en la clase que necesita, puede hacer esto: http://codepen.io/jjenzz/pen/EaAzo

Puedes hacer esto con CSS Variable

.box-shadow {
    --box-shadow-color: #000; /* Declaring the variable */
    width: 30px;                
    height: 30px;
    box-shadow: 1px 1px 25px var(--box-shadow-color); /* Calling the variable */

}

.box-shadow:hover  {
    --box-shadow-color: #ff0000; /* Changing the value of the variable */
}

Un rápido y copiar / pegar que puede usar para Chrome y Firefox sería: (cambie las cosas después del # para cambiar el color)

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-border-radius: 10px;
-moz-box-shadow: 0 0 15px 5px #666;
-webkit-box-shadow: 0 0 15px 05px #666;

La respuesta de Matt Roberts es correcta para los navegadores webkit (safari, cromo, etc.), pero pensé que alguien podría querer una respuesta rápida en lugar de que se le diga que aprenda a programar para hacer algunas sombras.

Sí, hay una manera

box-shadow 0 0 17px 13px rgba(30,140,255,0.80) inset

Tal vez esto es nuevo (también soy bastante malo en css3), pero tengo una página que usa exactamente lo que sugieres:

-moz-box-shadow: 10px 10px 5px #384e69;
-webkit-box-shadow: 10px 10px 5px #384e69;
box-shadow: 10px 10px 5px #384e69;}

.. y funciona bien para mí (al menos en Chrome).