How to apply color themes?

HTML & CSS
1

Hello. I would like to apply a different color theme to at least one page on my website and maybe more.

Right now I have white pages with black text, and I want an easy way to switch to a black background and yellow text.

I tried styling the body like this…

<body class=themeDark">
</body>

.themeDark{
     background-color: #000;
     color: #FFD700;
}

But that doesn’t seem to work for a couple of reasons…

First, my mast - which is inside < body > and has a position:fixed doesn’t recognize the style.

Second, my < H1 > in the mast doesn’t pick up the font color.

Is there an easy way to apply a global background and font color change to a page?

2

Here is a test page that will show what code I have so far…

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

	<title></title>

  <style>
    *{
      margin: 0;
      padding: 0;
    }

    body{
      font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
      font-weight: normal;
      font-size: 1em;
      line-height: 1.4em;
      color: #000;
    }

    h1, h2, h3, h4{
      padding: 0.5em 0 0.5em 0;
      font-weight: bold;
      text-align: left;
    }

    h1{
      border-bottom: solid 2px #000;
    }

    p{
      padding: 0 0 1em 0;
    }

    #containerMast_fixed{
      position: fixed;
      top: 0;
      width: 100%;
      box-sizing: border-box;
      padding: 0 2rem 1rem 2rem;
      background-color: #FFF;
    }

    #containerBody{
      width: 100%;
      box-sizing: border-box;
      padding: 5.5rem 2rem 2rem 2rem;
    }

    .flexBox{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin: 0 auto;
    }

    .themeDark{
      background-color: #000;
      color: #FFD700;
    }
  </style>
</head>

<body>
  <!-- Mast -->
  <div id="containerMast_fixed">
    <h1>MySite</h1>
  </div>
  
  <!-- Body -->
  <div id="containerBody">    
    
    <!-- Flex Container -->
    <div class="flexBox">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id justo rhoncus, finibus nisl sit amet, pretium nibh. Aliquam nec turpis auctor justo fringilla aliquet et vitae magna. Vestibulum est mauris, condimentum id pulvinar sed, volutpat eu massa. Morbi cursus lacus in lectus venenatis gravida. Ut facilisis mollis hendrerit. Maecenas a nunc erat. Quisque erat arcu, facilisis sed consectetur vel, efficitur at quam. Pellentesque semper est nec arcu imperdiet, id facilisis neque luctus. Cras in rutrum ante, nec fringilla tortor. Pellentesque ac nibh volutpat, bibendum mi non, ultricies nisl. Sed malesuada condimentum nunc ut imperdiet. Pellentesque faucibus eu lorem aliquam volutpat. Duis gravida aliquet ultricies. Nam eu tempus lectus.</p>

      <p>Duis semper commodo gravida. Aenean dolor mauris, laoreet nec tempus id, congue vitae enim. Morbi at ultrices nisl. Maecenas quis lorem sollicitudin, fringilla elit eget, mollis velit. Morbi gravida consequat nisl, eget accumsan velit. Ut feugiat quis diam ac aliquam. Aenean ornare placerat hendrerit. Donec vel nulla quis sapien laoreet dictum et id nulla.</p>

      <p>Donec eleifend porta ullamcorper. Sed diam tortor, ornare vel gravida non, tristique in sem. Sed vel condimentum odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eros libero, gravida at egestas ac, ultricies in erat. Vestibulum condimentum lorem in erat mollis, in fermentum orci consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum venenatis pulvinar ullamcorper. Etiam sollicitudin vitae metus vel posuere. Quisque viverra, libero id egestas consequat, ipsum lorem varius arcu, semper condimentum ex eros id ex. Curabitur tincidunt felis ultrices, blandit ipsum in, vestibulum mauris.</p>
    </div><!-- End of .flexBox -->
    
  </div><!-- End of #containerBody -->
</body>

</html>
3

Well, you’re overwriting the background-color. So it’s not that it isnt recognizing it, you’ve told it to do something different, and it’s complying with your demand. It uses the correct text color.

It does for me.

4

By default I need a background-color on my mast so that the text underneath it doesn’t bleed through.

So if I want to apply a global .themeDark to the < body >, then how can I over-ride the background-color in…

<div id="containerMast_fixed">

Now that seems to work - maybe a caching issue?

Btw, where is the best place to apply such styles? Since I have a super simple website to display photos, I figured just styling the < body > on a given web page - or even the whole site - would be the easiest and eliminate me having to change things for numerous elements.

Thoughts?

5

I’m playing around with this, and it is not as simple as it seems.

It’s like I fix one thing and another breaks.

What was hoping for is a way to have a single place where I can flip the background/font color scheme without having to modify my HTML/CSS depending on the color I want.

6

I think I figured out the problems…

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

	<title>sp_change-color-theme.php</title>

  <style>
    *{
      margin: 0;
      padding: 0;
    }

    body{
      font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
      font-weight: normal;
      font-size: 1em;
      line-height: 1.4em;
      color: #000;
    }

    h1, h2, h3, h4{
      padding: 0.5em 0 0.5em 0;
      font-weight: bold;
      text-align: left;
    }

    h1{
      border-bottom: solid 2px #000;
    }

    h1 > a{
      color: inherit;
    /*  color: #000;          /**/
      text-decoration: none;
    }
    
    p{
      padding: 0 0 1em 0;
    }

    #containerMast_fixed{
      position: fixed;
      top: 0;
      width: 100%;
      box-sizing: border-box;
      padding: 0 2rem 1rem 2rem;
      background-color: inherit;
/*      background-color: #FFF;     /**/
    }

    #containerBody{
      width: 100%;
      box-sizing: border-box;
      padding: 5.5rem 2rem 2rem 2rem;
    }

    .flexBox{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin: 0 auto;
    }

    .themeDark{
      background-color: #000;
      color: #FFD700;
    }
    
    .themeNormal{
      background-color: #FFF;
      color: #000;      
    }
  </style>
</head>

<body class="themeDark">
  <!-- Mast -->
  <div id="containerMast_fixed">
    <h1><a href="">MySite</a></h1>
  </div>
  
  <!-- Body -->
  <div id="containerBody">    
    
    <!-- Flex Container -->
    <div class="flexBox">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id justo rhoncus, finibus nisl sit amet, pretium nibh. Aliquam nec turpis auctor justo fringilla aliquet et vitae magna. Vestibulum est mauris, condimentum id pulvinar sed, volutpat eu massa. Morbi cursus lacus in lectus venenatis gravida. Ut facilisis mollis hendrerit. Maecenas a nunc erat. Quisque erat arcu, facilisis sed consectetur vel, efficitur at quam. Pellentesque semper est nec arcu imperdiet, id facilisis neque luctus. Cras in rutrum ante, nec fringilla tortor. Pellentesque ac nibh volutpat, bibendum mi non, ultricies nisl. Sed malesuada condimentum nunc ut imperdiet. Pellentesque faucibus eu lorem aliquam volutpat. Duis gravida aliquet ultricies. Nam eu tempus lectus.</p>

      <p>Duis semper commodo gravida. Aenean dolor mauris, laoreet nec tempus id, congue vitae enim. Morbi at ultrices nisl. Maecenas quis lorem sollicitudin, fringilla elit eget, mollis velit. Morbi gravida consequat nisl, eget accumsan velit. Ut feugiat quis diam ac aliquam. Aenean ornare placerat hendrerit. Donec vel nulla quis sapien laoreet dictum et id nulla.</p>

      <p>Donec eleifend porta ullamcorper. Sed diam tortor, ornare vel gravida non, tristique in sem. Sed vel condimentum odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eros libero, gravida at egestas ac, ultricies in erat. Vestibulum condimentum lorem in erat mollis, in fermentum orci consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum venenatis pulvinar ullamcorper. Etiam sollicitudin vitae metus vel posuere. Quisque viverra, libero id egestas consequat, ipsum lorem varius arcu, semper condimentum ex eros id ex. Curabitur tincidunt felis ultrices, blandit ipsum in, vestibulum mauris.</p>

      <p>Nam ullamcorper diam nunc, sed dignissim augue lacinia ac. Quisque bibendum ipsum consequat, aliquet metus a, tempor elit. Suspendisse porta dui eget lacinia maximus. Donec non sem aliquet, varius urna sit amet, rhoncus dolor. Curabitur nulla sem, finibus sit amet aliquam in, viverra vitae dolor. Suspendisse quis luctus massa, at rutrum ante. Etiam pharetra, metus tempor pharetra molestie, magna dui iaculis ligula, vel suscipit libero odio nec orci.</p>

      <p>Cras condimentum feugiat urna, sagittis viverra lacus consectetur at. Morbi id ex eget urna fermentum tempor ac a enim. Fusce sed vestibulum ipsum. Nunc convallis, ex ut fringilla euismod, dolor felis fringilla mauris, eget bibendum urna justo ut est. Donec consectetur sapien non ultricies viverra. Nam congue vel dolor nec iaculis. Pellentesque imperdiet nibh risus, at facilisis metus aliquam porttitor. Mauris malesuada nec nisi ac pellentesque. Vivamus cursus feugiat mi, at interdum magna suscipit a. Suspendisse potenti. Donec lacinia posuere ex sit amet interdum. Aliquam nec ex mi. Vivamus nec euismod tellus. Vestibulum rhoncus placerat sollicitudin. Nam facilisis non metus ut tincidunt. Vivamus eget semper elit.</p>

      <p>Vivamus vestibulum molestie lectus, ut tristique tellus imperdiet at. Vivamus pretium luctus diam in congue. Mauris urna quam, eleifend non magna eu, scelerisque pulvinar erat. Donec ac velit quam. Vivamus fringilla, ligula vel sodales iaculis, quam lorem auctor arcu, eget dictum enim lacus et sapien. Praesent nec ipsum nec velit rutrum ultrices. Nullam facilisis sem pretium felis maximus tempor. Morbi cursus mollis convallis. Curabitur vel justo consequat sapien gravida malesuada. Mauris sit amet arcu vel lacus condimentum finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus rutrum eu sapien quis interdum.</p>

      <p>Aenean magna nisl, tempus sed quam sit amet, tincidunt euismod velit. Aenean eleifend, diam in ultricies pulvinar, justo eros viverra ligula, sit amet facilisis ipsum erat et metus. Nunc finibus, turpis ut hendrerit pharetra, leo risus sollicitudin mi, vel porttitor est diam eu odio. Mauris euismod, dolor quis molestie malesuada, libero mauris lobortis eros, eu euismod massa mi at tortor. Nulla dictum, metus eget pulvinar feugiat, leo enim varius mauris, nec tincidunt lorem neque at elit. Fusce sodales nisi arcu, eu porttitor enim lacinia id. Pellentesque aliquet eget augue vel sodales. Aliquam quis elementum mauris. Proin luctus luctus convallis. Pellentesque cursus dolor vel eleifend consequat. Integer metus nibh, pharetra id interdum in, accumsan sed leo. Ut tortor urna, placerat quis suscipit quis, convallis sit amet diam.</p>

      <p>Fusce varius nibh in maximus commodo. Fusce vel fermentum velit, et dictum tortor. Sed at ligula molestie, tempus diam non, auctor magna. Mauris odio magna, molestie vitae rhoncus et, mollis quis purus. Pellentesque feugiat turpis tristique, dictum lectus id, iaculis sapien. Maecenas ut maximus nulla. Nunc mattis risus erat, id consequat quam bibendum at. Aliquam ultrices egestas orci, lacinia porta ante efficitur in. Nulla eget enim lobortis, lobortis felis at, molestie mi. Aliquam placerat lorem metus, id finibus velit ultrices vitae. Vestibulum est nulla, malesuada sed interdum at, ultrices sit amet nisl. Nunc elementum vestibulum elementum. Proin auctor vulputate enim vitae vulputate. Integer lacinia urna sed ipsum consectetur, nec fermentum mi porta. Integer at ante quis sem ornare rutrum in vel massa.</p>
    </div><!-- End of .flexBox -->
    
  </div><!-- End of #containerBody -->

</body>

</html>

First off, the sample I posted earlier neglected to include a hyperlinked H1 which also was acting strangely.

By using…

h1 > a{
     color: inherit;
     text-decoration: none;
}

#containerMast_fixed{
     background-color: inherit;
}

…I was able to get the color themes in my class to “cascade” to my H1 and Mast thus allowing me to change things in one place! :slight_smile:

Now it would be nice if I could put a conditional on my heading…

h1{
  border-bottom: 2px solid #000;
}

…so the line changes from black to yellow as the color theme changes.

7

I think the problems are because the classes contain both position, size and colours. Take a look at the example of my CSS declarations in the following Topic and notice how classes are used just to set colours:

A PHP $_SESSION variable could be set to toggle the class colour changes.

8

Since this has been asked in several places:

Simple theme changer

Please note, I called it simple for a reason as this is NOT production ready, close, but not.

1 Like
9

@bwclovis,

Thanks for the sample, but I don’t know Javascript and was hoping for a way to do this using purely CSS.

I thought in an earlier thread of mine someone posted CSS that had conditionals, or maybe it was variables, in it? I asked about that, but the poster never responded.

I was able to get my CSS set up to where if I add .themeDark to the < body > element of mt photo-details.php page, then it switches to a black background and yellow font to enhance viewing an enlarged pictured.

So I guess I accomplished what I wanted, but was just curious if there is a way in CCS to use conditionals and basic variables. For instance, in my PHP code, I have things set up so my code will change where it points depending on if I have the environment set to the DEV or PROD constant.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.