Neptune is very very pretty, but blue on white isn't my ideal choice for what I'm trying to present. What would be involved in including configuration options via the Color module?

Also, is it crazy to envision a light text on dark background skin on Neptune? Dark themes are difficult with Drupal but maybe Neptune is geared for it already?

CommentFileSizeAuthor
#4 Screenshot_5_31_13_1_10_AM.png142.52 KBdiwant
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

laurencemercer’s picture

Thanks for the suggestion.

I like the idea of Neptune's colours being easily configurable, and including light on dark should be doable.

I'll have a look at the options and report back.

diwant’s picture

Awesome, thanks! Here's the closest thing I found to dark zen, and it looks like they won't do Zen 7.x-5.x.

http://drupal.org/project/zen_midnight

Khalor’s picture

Am also very interested in seeing this in Neptune!

diwant’s picture

FileSize
142.52 KB

Here's my solution, and it's what I've posted at #1053734: Design DesignKit module integration (comment #15), that we use DesignKit. I'm not sure how that works with subthemes, but I've implemented it on my subtheme of Neptune and it's working well (see that comment, it has screenshots).

Even if #2007470: Will DesignKit colors and images be inherited and usable by subthemes? says that subthemes cannot inherit DesignKit settings, I wonder if we can share and work together on the DesignKit integration, at least the parts common to all of us.

For people who want to try and follow along with the DesignKit integrations, here are the important bits from my files below. But first, a screenshot to show something that custom CSSing like what you see below has not yet addressed. Behold, my ugly modules page!
Modules page on a dark theme
Here is the relevant part of the info file:

 146 ; Design Kit stuff
 147 ; Background color
 148 designkit[color][g_background][title] = "Background"
 149 designkit[color][g_background][description] = "Background color (for, well, the background!)."
 150 designkit[color][g_background][default] = "#FFFFFF"
 151 ; Foreground color
 152 designkit[color][g_foreground][title] = "Foreground"
 153 designkit[color][g_foreground][description] = "Foreground color (for text, etc)."
 154 designkit[color][g_foreground][default] = "#3F3F3F"
 155 ; Primary color
 156 designkit[color][g_primary][title] = "Primary"
 157 designkit[color][g_primary][description] = "Primary color, the main color of your theme (for links, etc.)."
 158 designkit[color][g_primary][default] = "#51ACD2"
 159 ; Complementary color
 160 designkit[color][g_complementary][title] = "Complementary"
 161 designkit[color][g_complementary][description] = "Complentary color, a second to the first color."
 162 designkit[color][g_complementary][default] = "#68EA53"
 163 ; Success color
 164 designkit[color][g_success][title] = "Success"
 165 designkit[color][g_success][description] = "Whatever color represents success, i.e. Green for go!"
 166 designkit[color][g_success][default] = "#68EA53"
 167 ; Error/failure color
 168 designkit[color][g_error][title] = "Error"
 169 designkit[color][g_error][description] = "Whatever color represents error, or failure. i.e. Red for stop!"
 170 designkit[color][g_error][default] = "#FF5F5B"
 171 ; Warning color
 172 designkit[color][g_warning][title] = "Warning"
 173 designkit[color][g_warning][description] = "A color for warnings and status. i.e. Yellow for caution!"
 174 designkit[color][g_warning][default] = "#FFE45B"

Here is the key part of my designkit.tpl.php:

   1 <?php
   2   /**
   3    * Initial setup, probably belongs in a preprocess hook, but where?
   4    */
   5   function _compile_alternates(&$colors, $films) {
   6     foreach( $colors as &$color ) {
   7       foreach( $films as $film_name => $film ){
   8         foreach( $film['shifts'] as $shift ) {
   9           $color[$film_name][] = designkit_colorshift($color[0], $film['color'], $shift);
  10         } 
  11       } 
  12     } 
  13   } 
  14   // Set up the film, which is what will be applied in varying amounts to get variations of our colors.
  15   $down_color = (designkit_colorhsl($g_background, 'l') > 0.5) ? '#ffffff' : '#000000';
  16   $up_color = ($down_color=='#ffffff') ? '#000000' : '#ffffff';
  17   
  18   $films = array(
  19     "down" => array(
  20       "shifts" => array(0.1, 0.3, 0.5, 0.8),
  21       "color" => $down_color,
  22     ),
  23     "up" => array(
  24       "shifts" => array(0.1, 0.3),
  25       "color" => $up_color,
  26     ),
  27     "darken" => array(
  28       "shifts" => array(0.1, 0.3, 0.5, 0.8),
  29       "color" => "#000000",
  30     ),
  31     "lighten" => array(
  32       "shifts" => array(0.1, 0.3),
  33       "color" => "#fff",
  34     ),
  35   );
  36   
  37   $c = array();
  38   $c['background'][] = $g_background;
  39   $c['foreground'][] = $g_foreground;
  40   $c['primary'][] = $g_primary;
  41   $c['complementary'][] = $g_complementary;
  42   $c['success'][] = $g_success;
  43   $c['error'][] = $g_error;
  44   $c['warning'][] = $g_warning;
  45   _compile_alternates($c,$films);
  46 ?>
  47 body.designkit {
  48   background-color: <?php print $c['background'][0]; ?>;
  49   color: <?php print $c['foreground'][0]; ?>; 
  50 } 
  51 body.designkit a {
  52  color: <?php print $c['primary']['lighten'][1]; ?>;
  53 }
  54 ul.primary {
  55   border-color: <?php print $c['background']['darken'][0];?>;
  56 } 
  57 ul.primary a, ul.primary a:link, ul.primary a:visited {
  58   color: <?php print $c['foreground']['darken'][1];?>;
  59   background-color: <?php print $c['background']['darken'][2];?>;
  60   border-color: <?php print $c['background']['darken'][2];?>;
  61 } 
  62 ul.primary a.active, ul.primary a:active {
  63   color: <?php print $c['foreground']['darken'][0];?>;
  64   background-color: <?php print $c['background']['darken'][0];?>;
  65   border-color: <?php print $c['background']['darken'][0];?>;
  66 }
  67 ul.primary a:hover, ul.primary a:focus {
  68   color: <?php print $c['foreground']['lighten'][0];?>;
  69   background-color: <?php print $c['background'][0];?>;
  70 }
  71 ul.secondary {
  72   background-color: <?php print $c['background']['darken'][0];?>;
  73   border-color: <?php print $c['background']['darken'][0];?>;
  74 }
  75 ul.secondary a, ul.secondary a:link, ul.secondary a:visited {
  76   color: <?php print $c['foreground']['darken'][1];?>;
  77   background-color: <?php print $c['background']['darken'][0];?>;
  78   border-color: <?php print $c['background']['darken'][0];?>;
  79 }
  80 ul.secondary a.active, ul.secondary a:active {
  81   color: <?php print $c['foreground']['darken'][0];?>;
  82   border-color: <?php print $c['primary'][0];?>;
  83 }
  84 ul.secondary a:hover, ul.secondary a:focus {
  85   background-color: <?php print $c['background']['darken'][2];?>;
  86   border-color: <?php print $c['background']['darken'][2];?>;
  87   color: <?php print $c['foreground']['lighten'][0];?>;
  88 }
  89 input.form-text {
  90   background-color: <?php print $c['background']['down'][2];?>;
  91   color: <?php print $c['foreground']['down'][1];?>;
  92   border-color: <?php print $c['background']['up'][1];?>;
  93 }
  94 fieldset {
  95   border-color: <?php print $c['background']['darken'][2];?>;
  96 }
  97 .messages {
  98   color: <?php print $c['foreground'][0];?>;
  99 }
 100 .messages-inner {
 101   background-color: <?php print $c['background'][0];?>;
 102   border-color: <?php print $c['background']['down'][0];?>;
 103 }
 104 .messages.warning {
 105   background-color: <?php print $c['warning'][0];?>;
 106   color: <?php print $c['warning']['up'][1];?>;
 107 }
 108 .messages.warning .messages-inner {
 109   background-color: <?php print $c['warning']['down'][3];?>;
 110 }
 111 .messages.error {
 112   background-color: <?php print $c['error'][0];?>;
 113   color: <?php print $c['error']['up'][1];?>;
 114 }
 115 .messages.error .messages-inner {
 116   background-color: <?php print $c['error']['down'][3];?>;
 117 }
 118 .messages.status {
 119   background-color: <?php print $c['success'][0];?>;
 120   color: <?php print $c['success']['up'][1];?>;
 121 }
 122 .messages.status .messages-inner {
 123   background-color: <?php print $c['success']['down'][3];?>;
 124 }
 125 button, input[type="button"], input[type="reset"], input[type="submit"] {
 126   background-color: <?php print $c['primary'][0];?>;
 127 }
 128 button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
 129   background: <?php print $c['primary']['darken'][0];?>;
 130 }
 131 form tr.even {
 132   border-color: <?php print $c['background']['darken'][2];?>;
 133   background-color: <?php print $c['background']['darken'][0];?>;
 134 }
 135 form tr.odd {
 136   border-color: <?php print $c['background']['darken'][2];?>;
 137   background-color: <?php print $c['background']['darken'][1];?>;
 138 }
 139 form tbody{
 140   border-top-color: <?php print $c['background']['darken'][0];?>;
 141 }
 142 form thead th{
 143   color: <?php print $c['foreground']['darken'][1];?>;
 144 }

Derpaderpa how do I paste from VI in an SSH Terminal without the line numbers?

laurencemercer’s picture

Interesting - thanks Diwant.

I should have some spare time in a couple of weeks or so to look at this whole issue properly.

diwant’s picture

Great! When you get to it, my files will have have evolved a little and organized a little more. Let me know if you want fresh versions to look at then.