We Keep Coding

Dark mode delay when website is refreshed

I have developed a dark mode for my forum, but the moment I set the dark mode, and change the tab or refresh the page first the normal mode (or light mode) appears and in a few milliseconds it finally loads the g1 into the body class attribute, is there any way to eliminate the delay?
document.addEventListener('DOMContentLoaded', (event) => {
((localStorage.getItem('mode') || 'g1') === 'g1') ? document.querySelector('body').classList.add('g1') : document.querySelector('body').classList.remove('g1')
})
:root {/* Base principal */
--base1: #FFF;
--base2: #FAFAFA;
--base3: #F9F9F9;
--base4: #F7F7F7;
--base5: #F5F5F5;
--base6: #F0F0F0;
--base7: #EDEDED;
--borde1: #D3D3D3;
--borde2: rgba(0, 0, 0, 0.3);
--opacity1: rgba(249, 249, 249, 0.8);
--opacity2: rgba(0, 0, 0, 0.2);
--opacity3: rgba(255, 189, 149, 0.5);
--bg: url(https://i.imgur.com/E6Gmd5W.png);
--buscar: url(https://i.imgur.com/e1LpRR1.png);
--font1: #8C8C8C;
--font2: #FFF;
--sombra1: 1px 1px 0 white, -1px 1px 0 white, 1px -1px 0 white, -1px -1px 0 white;
--sombra2: 1px 1px 0 rgba(0, 0, 0, 0.2), 1px -1px 0 rgba(0, 0, 0, 0.2), -1px 1px 0 rgba(0, 0, 0, 0.2), -1px -1px 0 rgba(0, 0, 0, 0.2);
--colorp: #EC7209;
--colorp1: 255, 118, 0;}
.g1 {--base1: #111; --base2: #1C1C1C; --base3: #141414; --base4: #141414; --base5: #1C1C1C; --base6: #161616; --base7: #202020; --borde1: #000; --bg: url(https://i.imgur.com/1ehFdwl.png); --buscar: url(https://i.imgur.com/xqY0yy2.png); --sombra1: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black; --colorp: #9E500C; --colorp1: 255, 118, 0; --opacity1: rgba(30, 30, 30, 0.6); --font2: #ECECEC}
.container {margin: 140px auto 0; width: 1000px; border: 20px solid var(--base4); outline: 1px solid var(--borde1); padding: 0; background: var(--base4)}
<div class="container"></div>
<a style="cursor: pointer" onclick="localStorage.setItem('mode', (localStorage.getItem('mode') || 'g1') === 'g1' ? 'bright' : 'g1'); localStorage.getItem('mode') === 'g1' ? document.querySelector('body').classList.add('g1') : document.querySelector('body').classList.remove('g1')">light/dark theme</a>

I had the same issue.
Just store the theme in a cookie and on the serverside you can check the cookie with $_COOKIE['...']

Why I get different values for boxShadow in browsers?

I need to manipulate the boxShadow dynamically however I get different values depending on the browser.
How do I fix it?
Example:
var shadow = document.getElementById("demo").style.boxShadow;
In google chrome: box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 150px 0px inset;
In mozilla: box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 150px 0px inset;
But at the edge I get rgb and inset on different position: box-shadow: inset 0px 0px 150px 0px rgba(0,0,0,0.5)
I have not tried it on safari
Is there any way to solve this? I need the code boxShadow in all browsers to be the same.

Skeuomorphic keys for keyboard shortcut documentation

I'm writing up some documentation for the keyboard shortcuts for some software. The documentation is in html/css/js. I'd like to have images (skeuomorphic?) of a control and c key instead of just having [ctrl] + [c]. I have seen this done on the web, but I am not finding any solutions with my web searches.
How can I render the Control and C keys as images using HTML/CSS/JS? I am happy to use a third party party library to achieve the effect.

The following CSS will style text wrapped in <kbd></kbd> tags exactly the same as the buttons you see here at StackOverflow.
CSS
kbd {
padding: .1em .6em;
border: 1px solid #ccc;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f7f7f7;
color: #333;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
border-radius: 3px;
display: inline-block;
margin: 0 .1em;
text-shadow: 0 1px 0 #fff;
line-height: 1.4;
white-space: nowrap
}
HTML
<kbd>⌘</kbd>+<kbd>X</kbd><br><br>
<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Delete</kbd>
Output
⌘+X
Ctrl+Alt+Delete

There are pure CSS options for creating realistic, professional-quality key cap graphics. Google "keyboard key css", for a larger list, but my favorite is KEYS.css: it's super simple to use:
<link rel="stylesheet" href="keys.css" type="text/css" />
...
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd>
renders as:

Override twitter bootstrap Textbox Glow and Shadows

I want to remove the Blue glow of the textbox and the border, but i don't know how to override any of the js or the css of it, check Here
EDIT 1
I want to do this because i am using the jquery plugin Tag-it and i am using twitter bootstrap also, the plugin uses a hidden textField to add the tags, but when i am using twitter bootstrap it appears as a textbox with glow inside a textbox which is a little bit odd

.simplebox {
outline: none;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}

You can also override the default Bootstrap setting to use your own colors
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}

input.simplebox:focus {
border: solid 1px #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: none;
-moz-transition: none;
-webkit-transition: none;
}
sets to bootstrap unfocused style

After doing some digging, I think they changed it in the latest bootstrap. The below code worked for me, its not simple box its form-control that I was using that was causing the issue.
input.form-control,input.form-control:focus {
border:none;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-moz-transition: none;
-webkit-transition: none;
}

if you think you can't handle the css class then simply add style to the textfield
<input type="text" style="outline:none; box-shadow:none;">

Go to Customize Bootstrap, look for #input-border-focus, enter your desired color code, scroll down and click "Compile and Download".

this will remove the border and the focus blue shadow.
input.simplebox,input.simplebox:focus {
border:none;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-moz-transition: none;
-webkit-transition: none;
}
http://jsfiddle.net/pE5mQ/64/

On bootstrap 3 there is a small top shodow on ios, could be removed with this:
input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
-webkit-appearance: caret;
-moz-appearance: caret; /* mobile firefox too! */
}
Got it from here

Vendor prefixes aren't necessary at this point, unless you're supporting legacy browsers, and you could simplify your selectors by just referring to all inputs rather than each of the individual types.
input:focus,
textarea:focus,
select:focus {
outline: 0;
box-shadow: none;
}

HTML
<input type="text" class="form-control shadow-none">
CSS
input:focus{
border: 1px solid #ccc
}

.form-control:focus {
box-shadow: 0 0 0 0.2rem rgba(103, 250, 34, 0.25);
}

So far none of the answers helped me out in this thread. What solved it for me was
/*Shadow after focus - Overwrites bootstrap5 style for btn classes*/
.btn-check:focus + .btn-primary,
.btn-primary:focus {
box-shadow: 0 0 7px 7px rgba(4,220,93,255);
}
/*Shadow while clicking (Animation) - Overwrites bootstrap5 style for btn classes*/
.btn-check:active + .btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 .25rem rgba(10, 102, 37, 0.493);
}

Javascript: to change class width from 0% to 100% and from 100% to 0% non stop

The code below changes the width of the "inner" class from 0% to 100%, so the bar is filled progressively with the green color. But this is incomplete because once the width is 100% I need it to go back to 0% and then to 100% and so on .. it will only stop going from 0% to 100% and from 100% to 0% when clicked.
I'll figure out how to add the clicking even but please help me achieve the non stop changing width.
Thanks a ton!
<style>
.bar {
background-color: #191919;
border-radius: 16px;
padding: 4px;
position: relative;
overflow: hidden;
width: 300px;
height: 24px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
-moz-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
}
.bar .inner {
background: #999;
display: block;
position: absolute;
overflow: hidden;
max-width: 97.5% !important;
height: 24px;
text-indent: -9999px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 3px rgba(0, 0, 0, 0.4),
0 1px 1px #000;
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 3px rgba(0, 0, 0, 0.4),
0 1px 1px #000;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 3px rgba(0, 0, 0, 0.4),
0 1px 1px #000;
-webkit-transition: width 0.3s linear;
-moz-transition: width 0.3s linear;
transition: width 0.3s linear;
}
.green .inner {
background: #7EBD01;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7EBD01), to(#568201));
background: -moz-linear-gradient(top, #7EBD01, #568201);
}
</style>
<script type="text/javascript">
for (i=0;i<=100;i++){
setTimeout(function(){
document.querySelector('.green.bar .inner').style.width = i+'%';
},0);
}
</script>
<div class="green bar">
<div class="inner" style="width:0%"></div>
</div>

Fiddle: http://jsfiddle.net/ZeYJy/
I have included two ways to implement my suggestion: The first bar immediately goes back to 0 after reaching 100, the second bar has a small delay.
Use the modulo operator % to reset the counter to zero at 100. See below:
<script>
window.onload = function(){
var counter = 0;
window.setInterval(function(){
document.querySelector('.green.bar .inner').style.width =
(++counter % 101) + '%';
}, 50);
}
</script>
This script adds an interval on load, which increase the width of the element. After the counter has reached 100, the width will be reset to zero.
Explanation of the code:
var counter = 0 (inside a function, window.onload) - A local variable is defined and initialised at zero.
window.setInterval(function(){ ... }, 50) - An interval is defined, activating the function (first argument) every 50 milliseconds (20x a second, adjust to your own wishes)
(++counter % 101) - Increments the counter by one, modulo 101:
The modulo operator calculates the remainder after division, ie: 0 % 101 = 0, 100 % 101 = 100 and 200 % 101 = 99, 201 % 101 = 100, 202 % 101 = 100

Instead of setTimeout, use setInterval.
Each time the interval is fired, use a function to work out how much to fill the bar. Once it hits 100, reset it.
You can then clear the interval using clearInterval once the user has clicked.

This article shows how to repeat a CSS animation infinitely. This will be easier on your CPU than using Javascript:
http://developer.apple.com/library/safari/#codinghowtos/Mobile/GraphicsMediaAndVisualEffects/_index.html