Night Mode using CSS and JavaScript

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;







up vote
3
down vote

favorite












I just added a new feature to my portfolio: Night Mode. I created it with CSS and session storage in JavaScript. I want you to review my CSS of night files, I feel it's filled with !important and I'm sure this is a bad practice. Can anyone help me make them better?



My second question, the default mode (white mode) runs in the first milliseconds when moving from page to another. I think it's not a good practice. Can anyone help me make it better?



Live: just set the session to night using this JavaScript line sessionStorage.setItem("mode", "night"); and refresh.



Alll files.



CSS files:






body
 background-color: black;
 color: white;

.indx-contnt p 
 color: white !important;

.signature span, a 
 color: white;

h1
 color:#f90 !important;

.latest li span
 color: black !important;

.latest li a
 color:white !important;


.contentlist li:nth-child(2) a
 color:#2CAAE1 !important;


.contentlist li:nth-child(3) a
 color:#0177B5 !important;


.contentlist li:nth-child(1) a
 color:#717171 !important;


#rss
 background-color: black;


.signature span, a
 color: white !important;

.latest li a:hover 
 color: #f90 !important;


p, h1, h2,h4,span
 color: white;








body
 background-color: black;
 color: white;

.signature span, a
 color: white !important;

p, h1, h2, h4, span 
 color: white !important;

.project span 
 color: black !important;

.card
 background-color: #ffffff0f !important;

.card:hover 
 box-shadow: 10px 7px 10px 0px rgb(255, 153, 0) !important;

.card a
 background-color: black !important;


#rss
 background-color: black !important;


.card-title
 color: #f90 !important; 


.posts a 
 color: white !important;






javascript css




share|improve this question

















  • 1




    You have quite a few elements where you specify only one of background and foreground - that can interact very badly with the user's stylesheet (e.g. your p color: white !important; when user has p background-color: white; color: black; ).
    – Toby Speight
    May 22 at 8:22
















up vote
3
down vote

favorite












I just added a new feature to my portfolio: Night Mode. I created it with CSS and session storage in JavaScript. I want you to review my CSS of night files, I feel it's filled with !important and I'm sure this is a bad practice. Can anyone help me make them better?



My second question, the default mode (white mode) runs in the first milliseconds when moving from page to another. I think it's not a good practice. Can anyone help me make it better?



Live: just set the session to night using this JavaScript line sessionStorage.setItem("mode", "night"); and refresh.



Alll files.



CSS files:






body
 background-color: black;
 color: white;

.indx-contnt p 
 color: white !important;

.signature span, a 
 color: white;

h1
 color:#f90 !important;

.latest li span
 color: black !important;

.latest li a
 color:white !important;


.contentlist li:nth-child(2) a
 color:#2CAAE1 !important;


.contentlist li:nth-child(3) a
 color:#0177B5 !important;


.contentlist li:nth-child(1) a
 color:#717171 !important;


#rss
 background-color: black;


.signature span, a
 color: white !important;

.latest li a:hover 
 color: #f90 !important;


p, h1, h2,h4,span
 color: white;








body
 background-color: black;
 color: white;

.signature span, a
 color: white !important;

p, h1, h2, h4, span 
 color: white !important;

.project span 
 color: black !important;

.card
 background-color: #ffffff0f !important;

.card:hover 
 box-shadow: 10px 7px 10px 0px rgb(255, 153, 0) !important;

.card a
 background-color: black !important;


#rss
 background-color: black !important;


.card-title
 color: #f90 !important; 


.posts a 
 color: white !important;






javascript css




share|improve this question

















  • 1




    You have quite a few elements where you specify only one of background and foreground - that can interact very badly with the user's stylesheet (e.g. your p color: white !important; when user has p background-color: white; color: black; ).
    – Toby Speight
    May 22 at 8:22












up vote
3
down vote

favorite









up vote
3
down vote

favorite











I just added a new feature to my portfolio: Night Mode. I created it with CSS and session storage in JavaScript. I want you to review my CSS of night files, I feel it's filled with !important and I'm sure this is a bad practice. Can anyone help me make them better?



My second question, the default mode (white mode) runs in the first milliseconds when moving from page to another. I think it's not a good practice. Can anyone help me make it better?



Live: just set the session to night using this JavaScript line sessionStorage.setItem("mode", "night"); and refresh.



Alll files.



CSS files:






body
 background-color: black;
 color: white;

.indx-contnt p 
 color: white !important;

.signature span, a 
 color: white;

h1
 color:#f90 !important;

.latest li span
 color: black !important;

.latest li a
 color:white !important;


.contentlist li:nth-child(2) a
 color:#2CAAE1 !important;


.contentlist li:nth-child(3) a
 color:#0177B5 !important;


.contentlist li:nth-child(1) a
 color:#717171 !important;


#rss
 background-color: black;


.signature span, a
 color: white !important;

.latest li a:hover 
 color: #f90 !important;


p, h1, h2,h4,span
 color: white;








body
 background-color: black;
 color: white;

.signature span, a
 color: white !important;

p, h1, h2, h4, span 
 color: white !important;

.project span 
 color: black !important;

.card
 background-color: #ffffff0f !important;

.card:hover 
 box-shadow: 10px 7px 10px 0px rgb(255, 153, 0) !important;

.card a
 background-color: black !important;


#rss
 background-color: black !important;


.card-title
 color: #f90 !important; 


.posts a 
 color: white !important;






javascript css




share|improve this question













I just added a new feature to my portfolio: Night Mode. I created it with CSS and session storage in JavaScript. I want you to review my CSS of night files, I feel it's filled with !important and I'm sure this is a bad practice. Can anyone help me make them better?



My second question, the default mode (white mode) runs in the first milliseconds when moving from page to another. I think it's not a good practice. Can anyone help me make it better?



Live: just set the session to night using this JavaScript line sessionStorage.setItem("mode", "night"); and refresh.



Alll files.



CSS files:






body
 background-color: black;
 color: white;

.indx-contnt p 
 color: white !important;

.signature span, a 
 color: white;

h1
 color:#f90 !important;

.latest li span
 color: black !important;

.latest li a
 color:white !important;


.contentlist li:nth-child(2) a
 color:#2CAAE1 !important;


.contentlist li:nth-child(3) a
 color:#0177B5 !important;


.contentlist li:nth-child(1) a
 color:#717171 !important;


#rss
 background-color: black;


.signature span, a
 color: white !important;

.latest li a:hover 
 color: #f90 !important;


p, h1, h2,h4,span
 color: white;








body
 background-color: black;
 color: white;

.signature span, a
 color: white !important;

p, h1, h2, h4, span 
 color: white !important;

.project span 
 color: black !important;

.card
 background-color: #ffffff0f !important;

.card:hover 
 box-shadow: 10px 7px 10px 0px rgb(255, 153, 0) !important;

.card a
 background-color: black !important;


#rss
 background-color: black !important;


.card-title
 color: #f90 !important; 


.posts a 
 color: white !important;








body
 background-color: black;
 color: white;

.indx-contnt p 
 color: white !important;

.signature span, a 
 color: white;

h1
 color:#f90 !important;

.latest li span
 color: black !important;

.latest li a
 color:white !important;


.contentlist li:nth-child(2) a
 color:#2CAAE1 !important;


.contentlist li:nth-child(3) a
 color:#0177B5 !important;


.contentlist li:nth-child(1) a
 color:#717171 !important;


#rss
 background-color: black;


.signature span, a
 color: white !important;

.latest li a:hover 
 color: #f90 !important;


p, h1, h2,h4,span
 color: white;





body
 background-color: black;
 color: white;

.indx-contnt p 
 color: white !important;

.signature span, a 
 color: white;

h1
 color:#f90 !important;

.latest li span
 color: black !important;

.latest li a
 color:white !important;


.contentlist li:nth-child(2) a
 color:#2CAAE1 !important;


.contentlist li:nth-child(3) a
 color:#0177B5 !important;


.contentlist li:nth-child(1) a
 color:#717171 !important;


#rss
 background-color: black;


.signature span, a
 color: white !important;

.latest li a:hover 
 color: #f90 !important;


p, h1, h2,h4,span
 color: white;





body
 background-color: black;
 color: white;

.signature span, a
 color: white !important;

p, h1, h2, h4, span 
 color: white !important;

.project span 
 color: black !important;

.card
 background-color: #ffffff0f !important;

.card:hover 
 box-shadow: 10px 7px 10px 0px rgb(255, 153, 0) !important;

.card a
 background-color: black !important;


#rss
 background-color: black !important;


.card-title
 color: #f90 !important; 


.posts a 
 color: white !important;





body
 background-color: black;
 color: white;

.signature span, a
 color: white !important;

p, h1, h2, h4, span 
 color: white !important;

.project span 
 color: black !important;

.card
 background-color: #ffffff0f !important;

.card:hover 
 box-shadow: 10px 7px 10px 0px rgb(255, 153, 0) !important;

.card a
 background-color: black !important;


#rss
 background-color: black !important;


.card-title
 color: #f90 !important; 


.posts a 
 color: white !important;




javascript css





share|improve this question












share|improve this question




share|improve this question








edited May 22 at 9:38









Mast

7,32663484




7,32663484









asked May 22 at 5:18









Zeyad Etman

1161




1161







  • 1




    You have quite a few elements where you specify only one of background and foreground - that can interact very badly with the user's stylesheet (e.g. your p color: white !important; when user has p background-color: white; color: black; ).
    – Toby Speight
    May 22 at 8:22












  • 1




    You have quite a few elements where you specify only one of background and foreground - that can interact very badly with the user's stylesheet (e.g. your p color: white !important; when user has p background-color: white; color: black; ).
    – Toby Speight
    May 22 at 8:22







1




1




You have quite a few elements where you specify only one of background and foreground - that can interact very badly with the user's stylesheet (e.g. your p color: white !important; when user has p background-color: white; color: black; ).
– Toby Speight
May 22 at 8:22




You have quite a few elements where you specify only one of background and foreground - that can interact very badly with the user's stylesheet (e.g. your p color: white !important; when user has p background-color: white; color: black; ).
– Toby Speight
May 22 at 8:22















active

oldest

votes











Your Answer




StackExchange.ifUsing("editor", function ()
return StackExchange.using("mathjaxEditing", function ()
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
);
);
, "mathjax-editing");

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "196"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);








 

draft saved


draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f194921%2fnight-mode-using-css-and-javascript%23new-answer', 'question_page');

);

Post as a guest






















active

oldest

votes













active

oldest

votes









active

oldest

votes






active

oldest

votes










 

draft saved


draft discarded


























 


draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f194921%2fnight-mode-using-css-and-javascript%23new-answer', 'question_page');

);

Post as a guest
































































-

Popular posts from this blog

Chat program with C++ and SFML

Image
Clash Royale CLAN TAG #URR8PPP .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0; up vote 2 down vote favorite This is my client code: (My server is very similar at the moment but I will upload it below this one just in case somebody wants to run it) #include <SFML/Graphics.hpp> #include <SFML/Network.hpp> #include <thread> int main() sf::RenderWindow main_win(sf::VideoMode(800, 800), "Chatcy!"); main_win.setPosition(sf::Vector2i(sf::VideoMode::getDesktopMode().width/2 -400, sf::VideoMode::getDesktopMode().height/2 -400)); main_win.setVerticalSyncEnabled(true); //chatcy logo sf::Texture chatcy; chatcy.loadFromFile("image_chatcy.png"); sf::Sprite logo; logo.setTexture(chatcy); //200x800 //font sf::Font font; font.loadFromFile("FreeSerif.ttf"); //name sf::String name("Client"); name += ": "; //text input area and background sf::RectangleShape in_backg...
Read more

Function to Return a JSON Like Objects Using VBA Collections and Arrays

Image
Clash Royale CLAN TAG #URR8PPP .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0; up vote 1 down vote favorite My goal is to create a compact function that can create a JSON Like object from JSON string. I want a function with a small footprint that I or anyone who wants to use it, can simply paste into a module and use. At 61 lines of code, I am happy with its size and portability. Here is an image of JSON Object created from string data using a ScriptControl . Although the Locals Window displays the properties and values correctly, the object itself is extremely difficult to work with. This image shows an object created using getJSONCollection . Because it is made of VBA Collections and Arrays, it is very easy to work with. Option Explicit Private Function getJSONCollection(ByVal Value As Variant, Optional ScriptEngine As Object) As Variant Const DELIMITER As String = "||" Dim col As Collection, JSON As Object, KeyNam...
Read more

Will my employers contract hold up in court?

Image
Clash Royale CLAN TAG #URR8PPP up vote 8 down vote favorite 2 When I started a new job back in July of 2017, I signed a contract that had the following bindings or restrictions if I was ever to leave the company: Cannot work for a competitor within 25 miles of current companies location for the next two years Cannot offer my services to any organization within 25 miles of current companies location for the next two years Now, when mentioned “my services” this can be related to my profession of website design. This contract seems incredibly binding, 2 years in length, and I’m looking to see if it would actually hold up in an Arizona court. contract employment non-compete arizona share | improve this question edited Aug 7 at 15:35 feetwet ♦ 13.8k 9 37 85 asked Aug 6 at 19:05 Alex S. 46 2 What does your comp...
Read more