Pure CSS change stylesheet

Developer
Billy Brown
Size
4,004 Kb
Views
10,120
  1. Pure CSS change stylesheet Previews
  2. Pure CSS change stylesheet HTML Codes
  3. Pure CSS change stylesheet CSS Codes
  4. Pure CSS change stylesheet JS Codes

How do I make an pure css change stylesheet?

A pure CSS way to change between a light and a dark stylesheet.. What is a pure css change stylesheet? How do you make a pure css change stylesheet? This script and codes were developed by Billy Brown on 20 November 2022, Sunday.

Pure CSS change stylesheet Previews
IQ Test

Pure CSS change stylesheet - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS change stylesheet</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
body { background: white;
}
#page-wrap { background: #eee; border: 1px solid #ccc; margin: 0 auto; max-width: 960px; padding: 1em; transition: all linear .2s;
}
section { float: left; padding: 0.5em; width: 75%;
}
hr { background: linear-gradient(to right, rgba(0, 0, 0, 0), #000000 30%, #000000 70%, rgba(0, 0, 0, 0)); border: none; height: 1px;
}
aside { background: #e5e5e5; border: 1px solid #bbb; float: right; padding: 0.5em; width: 25%;
}
footer { background: #e5e5e5; border: 1px solid #bbb; clear: both; padding: 0.25em; text-align: center;
}
/* Goes at end so as to make sure that styles cascade.
*/
#change-style { appearance: none; background: linear-gradient(to right, #ffffff 50%, #000000 50%); border: 1px solid black; cursor: pointer; display: inline-block; height: 25px; line-height: 10px; padding: 5px; position: relative; width: 80px;
}
#change-style:before { content: 'Light'; display: block; float: left; text-decoration: underline;
}
#change-style:after { color: white; content: 'Dark'; display: block; float: right;
}
#change-style:checked:before { text-decoration: none;
}
#change-style:checked:after { text-decoration: underline;
}
#change-style:checked ~ #page-wrap { background: #333; box-shadow: 0 0 10px black; color: white; transition: all linear .2s;
}
#change-style:checked ~ #page-wrap a { color: orange;
}
#change-style:checked ~ #page-wrap aside,
#change-style:checked ~ #page-wrap footer { background: #444; border: 1px solid #666;
}
#change-style:checked ~ #page-wrap hr { background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 30%, #ffffff 70%, rgba(255, 255, 255, 0));
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <input type="checkbox" id="change-style">
<div id="page-wrap"> <header> <h1>Page title</h1> </header> <section> <h2>Sub-title</h2> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <hr> <h2>Sub-title</h2> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </section> <aside> <h3>Sidebar header</h3> <ul> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> </ul> <h3>Sidebar header</h3> <a href="http://druidofluhn.hostei.com">Random link</a> </aside> <footer> <small>&copy; Copyright <a href="http://druidofluhn.hostei.com">Druid of Lûhn</a> 2012 – 2013</small> </footer>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pure CSS change stylesheet - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { background: white;
}
#page-wrap { background: #eee; border: 1px solid #ccc; margin: 0 auto; max-width: 960px; padding: 1em; transition: all linear .2s;
}
section { float: left; padding: 0.5em; width: 75%;
}
hr { background: linear-gradient(to right, rgba(0, 0, 0, 0), #000000 30%, #000000 70%, rgba(0, 0, 0, 0)); border: none; height: 1px;
}
aside { background: #e5e5e5; border: 1px solid #bbb; float: right; padding: 0.5em; width: 25%;
}
footer { background: #e5e5e5; border: 1px solid #bbb; clear: both; padding: 0.25em; text-align: center;
}
/* Goes at end so as to make sure that styles cascade.
*/
#change-style { appearance: none; background: linear-gradient(to right, #ffffff 50%, #000000 50%); border: 1px solid black; cursor: pointer; display: inline-block; height: 25px; line-height: 10px; padding: 5px; position: relative; width: 80px;
}
#change-style:before { content: 'Light'; display: block; float: left; text-decoration: underline;
}
#change-style:after { color: white; content: 'Dark'; display: block; float: right;
}
#change-style:checked:before { text-decoration: none;
}
#change-style:checked:after { text-decoration: underline;
}
#change-style:checked ~ #page-wrap { background: #333; box-shadow: 0 0 10px black; color: white; transition: all linear .2s;
}
#change-style:checked ~ #page-wrap a { color: orange;
}
#change-style:checked ~ #page-wrap aside,
#change-style:checked ~ #page-wrap footer { background: #444; border: 1px solid #666;
}
#change-style:checked ~ #page-wrap hr { background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 30%, #ffffff 70%, rgba(255, 255, 255, 0));
}

Pure CSS change stylesheet - Script Codes JS Codes

/* If you want the entire backgroud to change colour, just have a div that takes up the entire body and change its background.
*/
Pure CSS change stylesheet - Script Codes
Pure CSS change stylesheet - Script Codes
Home Page Home
Developer Billy Brown
Username _Billy_Brown
Uploaded November 20, 2022
Rating 3
Size 4,004 Kb
Views 10,120
Do you need developer help for Pure CSS change stylesheet?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Billy Brown (_Billy_Brown) Script Codes
Name
Canvas Pacman
Aperture-style lens
Better Transparent input boxes
Group Contact Form
HMTL and CSS calendar
Cropper.js example
JavaScript Inheritance
Mandelbrot Fractal
CSS-Tricks lodge button
Single Element 8-bit characters
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!