paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 13:33:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

cleanup: Remove unnecessary 'magic' style for night mode.

Browse Source 
This was introduced in e0236646

For 1.5 years we did not find a case that needed it (besides the
`a` tag hover state, that is not obvious if it was needed or it was
used as an example)

It is not obvious if this solution was a good idea. The concern was
that `body.night-mode` is more specific than `body` and some styles
might override others less specific in cases we might not want that.

Of course, we want that in the majority of cases, and css-specificity
rules are not simple to comprehend.

Good further reading:
http://cssspecificity.com/
https://specificity.keegan.st/

The added complexity of the resulting styles and the added code that
might not serve any practical purpose seem to not be worth it.
This commit is contained in:
Boris Yankov
2019-03-07 19:09:20 +02:00
committed by Tim Abbott
parent 713d6739ec
commit 65eb125d61
2 changed files with 16 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
static/js/night_mode.js
View File

@@ -2,100 +2,20 @@ var night_mode = (function () {
var exports = {};
var create_stylesheet = function () {
var stylesheet = document.createElement('style');
stylesheet.type = "text/css";
stylesheet.classList.add("night-mode-stylesheet");
// disable the stylesheet by default in case the user isn't running night mode.
stylesheet.disabled = true;
return stylesheet;
};
// this transforms an object into CSS. The top level keys of the object are
// the CSS selectors and the second level keys are attributes which should have
// valid CSS values.
//
// EXAMPLE:
//
// {
// h1: { // h1 {
// color: "red", // color: red;
// }, // }
// p: { // p {
// "font-size": "1em", // font-size: 1em;
// "line-spacing": 1.2, // line-spacing: 1.2;
// }, // }
// }
//
// All CSS selectors are supported, everything from `h1` to
// complex selectors like `.night:not(.test)::after`.
var object_to_css = function (object) {
var css = "";
// for each CSS selector.
for (var selector in object) {
// ensure the object properties are its own and not ones injected into
// the Object.prototype.
if (object.hasOwnProperty(selector)) {
// create the `h1 {` line...
css += selector + " {";
// and for each of the properties of the selector...
for (var attr in object[selector]) {
if (object[selector].hasOwnProperty(attr)) {
// add the attribute and its value like `attr: value;`.
css += "\n\t" + attr + ": " + object[selector][attr] + ";";
}
}
css += "\n}\n";
}
}
// trim the excess newline.
return css.trim();
};
exports.initialize = function () {
// the object to be converted to CSS.
// this should ONLY be used if there is no obvious way to perform this action
// by prefixing the selector with `body.night-mode`.
var css_skeleton = {
"a:hover": {
color: "#65c0ed",
},
};
// create a stylesheet that can be appended to the <head>.
var stylesheet = create_stylesheet();
// convert to CSS.
var css = object_to_css(css_skeleton);
if (stylesheet.styleSheet) {
stylesheet.styleSheet.cssText = css;
} else {
stylesheet.appendChild(document.createTextNode(css));
}
// append the stylesheet.
(document.head || document.getElementsByTagName('head')[0]).appendChild(stylesheet);
exports.enable = function () {
// we can also query for this in the DOM with the
// `.night-mode-stylesheet` class.
stylesheet.disabled = false;
$("body").addClass("night-mode");
};
exports.disable = function () {
stylesheet.disabled = true;
$("body").removeClass("night-mode");
};
if (page_params.night_mode) {
exports.enable();
}
};
exports.enable = function () {
$("body").addClass("night-mode");
};
exports.disable = function () {
$("body").removeClass("night-mode");
};
return exports;
}());

8
static/styles/night_mode.scss
View File

@@ -3,6 +3,14 @@ body.night-mode {
color: hsl(236, 33%, 90%);
-webkit-font-smoothing: antialiased;
a:hover {
color: hsl(200, 79%, 66%);
}
ul.filters a:hover {
color: inherit;
}
.app-main,
.header-main,
#tab_bar_underpadding,