I added a theme in my HTML page by:
<link rel="alternate stylesheet" href="css/dark.css" title="dark">
this creates an option to switch theme from view>style in browser as it is expected to. I want to create a switch in the page itself for changing the theme. <button>Switch Theme</button>will create a button but how do I make it switch theme?
You should trigger a change in the href attribute of the <link> tag on the click of the button, as demonstrated:
HTML
<link rel="stylesheet" href="dark.css" id="theme">
<button id="switch">Switch Theme</button>
JavaScript
document.getElementById('switch').onclick = function() {
if (document.getElementById('theme').href == "dark.css") {
document.getElementById('theme').href = "light.css";
} else {
document.getElementById('theme').href = "dark.css";
}
};
Now, the dark.css and light.css would contain different styles for your elements for both the themes respectively. For example:
dark.css
body{
background: #000;
}
light.css
body{
background: #fff;
}
this is very simple you need to bind the click to function and call it:
Replacing css file on the fly (and apply the new style to the page)
Related
I have the following code:
<head>
<title></title>
<link rel="stylesheet" href="./styles/darkula.css">
<link rel="stylesheet" href="./styles/github.css">
</head>
<body>
<div class="container">
<pre>
<code class="html">
<button class="button is-primary">Primary</button>
</code>
</pre>
<!-- Change theme button -->
<button onclick="changeTheme()">Change theme</button>
</div>
<script src="highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
document.querySelectorAll("code").forEach(function(element) {
element.innerHTML = element.innerHTML.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
});
function changeTheme() {
...
}
</script>
</body>
I am loading 2 themes in my file. Because the github theme is being loaded after the darkula theme, it gets applied to all the code elements automatically. This is fine, but I would like to allow users to dynamically change the theme to darkula with the click of the button. I could not find anything in the documentation. How can I do this?
If you are using sass/scss and handle your dependencies with npm, you can do the next thing:
#use "sass:meta";
html[data-theme="light"] {
#include meta.load-css("highlight.js/styles/a11y-light");
}
html[data-theme="dark"] {
#include meta.load-css("highlight.js/styles/a11y-dark");
}
To make it to work, you need to define the data-theme attribute in your html tag.
<html data-theme="light">
<!-- ensure to change it with javascript and define one with default -->
...
</html>
There's a github response to this same question here https://github.com/highlightjs/highlight.js/issues/2115
Basically you include all the themes you want, and then disable all the link tags except for the selected theme.
The highlight.js demo page does this https://highlightjs.org/static/demo/
The GitHub repository is for the code can be found here.
(https://github.com/highlightjs/highlight.js/blob/master/demo/demo.js)
I currently am trying to change the style of my page on the push of a button - the button is part of a dropdown. Everything I try does not seem to work,
here is what I'm trying:
Lead</li>
Have two <link /> tags defined like this:
<link rel="stylesheet" href="default.css" />
<link rel="stylesheet" href="onclick.css" disabled id="onclick" />
<link rel="stylesheet" href="offclick.css" disabled id="offclick" />
Using the jQuery, you can easily give the control to the following HTML:
Change Style
$(function () {
$("#style-change").click(function () {
if ($("#onclick").prop("disabled")) {
$("#onclick").prop("disabled", false);
$("#offclick").prop("disabled", true);
} else {
$("#onclick").prop("disabled", true);
$("#offclick").prop("disabled", false);
}
});
});
Hope this helps.
To begin with this line of code looks scary !
Lead</li>
If you want to change the style for a particular container ? or change the entire stylesheet ?
If later is the case, then you need to hold the current stylesheet value somewhere, may be in ViewBag or even Session. And then check when you are including in your layout, something on this lines..
#if(ViewBag.Style == "red")
{
Styles.Render("~Views/Customer/css/Hide.css");
}
else if(ViewBag.Style == "blue")
{
// you get the idea...
}
If you're willing to use JQuery you can do this within one line:
$("head").append("<link rel='stylesheet' id='extracss' href='"~Views/Customer/css/Hide.css"' type='text/css' />");
I am using 3 stylesheets (style1, style2, style3) for many pages.
style1 for my web header,
style2 for my contents and
style3 for footer
Now I want to apply a new stylesheet on my home page and disable style2 for only home page.
I added new classes for different elements but at some places it is still detecting my previous stylesheets. How can I disable CSS on a specific page?
Since you did not include the code to see how you doing it, and considering you are having the header as an include file:
USE PHP:
In your Home page before including header:
<?php $homepage = 1; ?>
//include your header//
In your header where you are referencing CSS:
<link href="css/style1.css" rel="stylesheet" type="text/css" />
<link href="css/style3.css" rel="stylesheet" type="text/css" />
<link href="<?php if($homepage == 1){ echo "css/Home-style.css";}else{ echo "css/style2.css";}?>" rel="stylesheet" type="text/css" />
Your files should be in PHP for this to work.
change "Home-style.css" to your new CSS file for home page.
Check for page then grab the dom stylesheets array object and disable anything you want .
if(window.location.href.indexOf("<name in page url >") > -1) {
//Next line will disable the 2nd stylsheet in the document .
document.styleSheets[1].disabled = true;
}
Also fyi you can view all style sheets in the dom with:
console.log(document.styleSheets)
This should give you the appropriate index of whatever stylesheet you want to remove.
You have to use jQuery to disable a stylesheet like :
<script>
$(function () {
if (location.pathname.indexOf('/pagename') >= 0) {
$('link[href*="/media/css/csspagename.css"]').prop('disable', true);
}
});
</script>
I have a page which uses a css file which has
html
{
width:100%;
}
However when that page in Iframe - it causes x-scroll.
But - If I remove the width attribute ( via chrome developer toolbar) OR set an invalid value like '' - it's getting fine :
Question :
Is it Ok to do this : ( in order to reset the value)
<head >
/*The original css file - I dont want to touch it*/
<link href="<%= ResolveUrl("~/Css/style.css") %>" rel="stylesheet" type="text/css" />
<style type="text/css">
html
{
width: '' !important;
}
</style>
p.s.
No js solutions please.
In order to reset that value you have to use the default one for width:
html
{
width:auto;
}
Also is not necessary to use the !important declaration.
When an SVG is directly included in a document using the <svg> tag, you can apply CSS styles to the SVG via the document's stylesheet. However, I am trying to apply a style to an SVG which is embedded (using the <object> tag).
Is it possible to use anything such as the following code?
object svg {
fill: #fff;
}
Short answer: no, since styles don't apply across document boundaries.
However, since you have an <object> tag you can insert the stylesheet into the svg document using script.
Something like this, and note that this code assumes that the <object> has loaded fully:
var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }"; // add whatever you need here
svgDoc.getElementById("where-to-insert").appendChild(styleElement);
It's also possible to insert a <link> element to reference an external stylesheet:
var svgDoc = yourObjectElement.contentDocument;
var linkElm = svgDoc.createElementNS("http://www.w3.org/1999/xhtml", "link");
linkElm.setAttribute("href", "my-style.css");
linkElm.setAttribute("type", "text/css");
linkElm.setAttribute("rel", "stylesheet");
svgDoc.getElementById("where-to-insert").appendChild(linkElm);
Yet another option is to use the first method, to insert a style element, and then add an #import rule, e.g styleElement.textContent = "#import url(my-style.css)".
Of course you can directly link to the stylesheet from the svg file too, without doing any scripting. Either of the following should work:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="my-style.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg">
... rest of document here ...
</svg>
or:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<link href="my-style.css" type="text/css" rel="stylesheet"
xmlns="http://www.w3.org/1999/xhtml"/>
</defs>
... rest of document here ...
</svg>
Update 2015: you can use jquery-svg plugin for apply js scripts and css styles to an embedded SVG.
You can do this without javsscrpt by putting a style block with your styles inside the SVG file itself.
<style type="text/css">
path,
circle,
polygon {
fill: #fff;
}
</style>
If the only reason for using the tag to inlcude the SVG is that you do not want to clutter your source code with the markup from the SVG, you should take a look at SVG injectors like SVGInject.
SVG injection uses Javascript to inject an SVG file inline into your HTML document. This allows for clean HTML source code while making the SVGs fully styleable with CSS. A basic example looks like this:
<html>
<head>
<script src="svg-inject.min.js"></script>
</head>
<body>
<img src="image.svg" onload="SVGInject(this)" />
</body>
</html>
Based on #Erik Dahlström answer, found a short path as follow:
let svg_objecst = document.getElementsByClassName('svg-object')
const forceStylingObjSvg = (svg)=>{
var svgDoc = svg.contentDocument;
svgDoc.firstElementChild.setAttribute('fill','blue')
}
Array.from(svg_objecst).forEach((obj)=>{
obj.addEventListener('load',()=>forceStylingObjSvg(obj))
})
You can create a custom element to inject the SVG file into your html.
This way, the SVG will be inlined, and you can easily apply styles using CSS.
This custom element will work just like the <object> or <embed> tags. The only difference is that <object> or <embed> tags injects the data in a shadow root, which prevents styling from the parent document, while <custom-svg> injects the data in the document itself.
I have tried too many ways to style my SVG images, and this was the easiest and more flexible way i have found so far.
<html>
<head>
<style>
.blue {
fill: blue;
}
.red {
fill: red;
}
</style>
</head>
<body>
<custom-svg class="blue" src="icon.svg"></custom-svg>
<custom-svg class="red" src="icon.svg"></custom-svg>
<script>
class CustomSVG extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
fetch(this.getAttribute('src'))
.then(response => response.text())
.then(text => {
this.innerHTML = text;
});
}
}
customElements.define('custom-svg', CustomSVG);
</script>
</body>
</html>
Notes
The SVG image must not have the "fill" attribute if you want, for example, change the fill color using CSS.
custom-svg works very good, for width style use this:
custom-svg svg{
max-width:64px;
max-height:64px;
}