Custom NSView background color not changing when switching in and out of dark mode - objective-c

I cannot figure out how to update the background color of my custom NSView when the user switches in and out of dark mode.
I've read the documentation and followed instructions here:detecting darkmode
The strange thing is that I can get all the subviews to behave correctly, but for some strange reason I can't get the background color of the main view to change. The background color of the view looks correct when I start the app in either mode, but when I switch between modes while the app is running it doesn't update to the new theme.
Would be grateful for any suggestions.
Inside the Custom NSView I have the method
- (void) viewDidChangeEffectiveAppearance
{
self.needsDisplay = YES;
}
and inside the drawRect I have a do a simple color change before continuing with drawing in the view
NSAppearance *currentAppearance = [NSAppearance currentAppearance];
if (#available(*, macOS 10.14)) {
if(currentAppearance.name == NSAppearanceNameDarkAqua) {
red = 0.5*red+0.5;
green = 0.5*green+0.5;
blue = 0.5*blue+0.5;
}
}
Here is a screenshot of darkmode before (the way it should look)
Dark Mode Before
Here is a screenshot of light mode after user switch
Light Mode After
Here is a screenshot of lightmode before (the way it should look)
Light Mode Before
And here is a screenshot of darkmode after user switch
Dark Mode After
ps The reason I'm baffled and have little code to post is that the correct behavior is supposed to happen automatically with little effort. I even deleted the view from the nib and rebuilt it thinking maybe some setting got corrupted, but that didn't solve the problem.
Update: I found the source of the problem. This method gets called in windowDidLoad
- (void) setTransparent:(BOOL)transparent
{
if(transparent) {
[self.window setOpaque:NO];
NSColor *backgroundColor = [NSColor windowBackgroundColor];
backgroundColor = [backgroundColor colorWithAlphaComponent: .75];
[self.window setBackgroundColor:backgroundColor];
self.window.alphaValue = 0.75;
}
else {
[self.window setOpaque:YES];
NSColor *backgroundColor = [NSColor windowBackgroundColor];
backgroundColor = [backgroundColor colorWithAlphaComponent: 1];
[self.window setBackgroundColor:backgroundColor];
self.window.alphaValue = 1;
}
}
I get the expected behavior if I comment out the call to this method.
Why did this cause me to lose the automatic behavior of background color change when the user changes between light and dark mode?

My guess is that you’re not actually using the standard color for the background color.
You are using [NSColor windowBackgroundColor], however then making a copy with a different alpha component (via colorWithAlphaComponent), making it no longer a standard color.
My guess is a lot of the automatic ‘just works’ behaviour happens when you use the standard color definitions. As a test, could you try removing the colorWithAlphaComponent calls (where you are adding the transparency) from your settransparent method and see whether it works? if it does, you might need to find another way to add transparency to your view if you want the automatic behaviour.

Related

UITextField placeholder text is unreadable in iOS13 dark mode

UITextField has a .placeholder text property, for showing info before text has been added to the field, up until now it's always been clear and visible, but in iOS13 dark mode was introduced and now placeholder text is practically unreadable in a white UITextField (I am explicitly making it white via .backgroundColor = [UIColor whiteColor]).
My question is, what are some practical solutions to fix this throughout my project, I could manually change the placeholder color on any UITextField manually, by simply setting an attributedPlaceholder string, that may take a while, is there a way to disable dark mode settings just on UITextFields specifically but not for other elements?
It turns out Apple has provided a way to override this on various elements (or even your entire app's UIWindow) with the following (Objective-C):
if (#available(iOS 13.0, *)) {
textField.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
}
I applied it to all UITextFields via swizzle, to turn it off on EVERYTHING in your project, just use this in your appDelegate didFinishLaunching method but replace textField with _window
(IMPORTANT EDIT: with the newest version of xCode _window seems to have been dropped and now app projects create something called a SceneDelegate and the overrideUserInterfaceStyle has to be applied to that somehow, but I'm new to scene delegates and don't know how they work so I can't offer much help there, to disable scenedelegate and return to traditional AppDelegate management of the UIWindow, see here: https://stackoverflow.com/a/57467270/2057171)
in swift
Paste the below code to appdelegate file
if #available(iOS 13.0, *) {
window!.overrideUserInterfaceStyle = .light
}
It will work fine.
I would consider not explicitly setting the text field background to white.
You can more robustly support dark and light mode by using UI Element colors described here: https://developer.apple.com/documentation/uikit/uicolor/ui_element_colors
For one of my text fields I did something like this:
if #available(iOS 13, *) {
self.searchBarTextField.textColor = UIColor.label
self.searchBarTextField.backgroundColor = UIColor.secondarySystemBackground
} else {
self.searchBarTextField.backgroundColor = UIColor(white: 1.0, alpha: 1.0)
}
From the code above, now the background of your textfield will dynamically change when the user changes their light vs dark mode setting. And the text color will change with it. And by placeholder text color will be handled by OS. You could override if you needed: https://developer.apple.com/documentation/uikit/uicolor/3173134-placeholdertext
pls check this
[nameTextField,corpIDTextField,passwordTextField,conformPasswordTextField,genderTextField,YOBTextField,mobileNoTextField].forEach {
$0?.delegate = self
if #available(iOS 13.0, *) {
$0?.overrideUserInterfaceStyle = .light
}
}

NSVisualEffectView change takes more than one click to change

So I have an NSVisualEffectView hooked up with a button and some icons. The material of this view is originally equal to NSVisualEffectMaterialDark in other words, Vibrant Dark.
The following code I wrote is supposed to do the following:
1) Detect if the view's material is NSVisualEffectMaterialDark or NSVisualEffectMaterialLight
2) Change the BOOL isDark to YES/NO respectively
3) Change the view's appearance, in other words the material, from Dark to Light / Light to Dark based on the current view.
The problem is that when I run the app and click the button, NSVisualEffectView's colour changes from a saturated dark to a less one, and not Light as it is supposed to.
What can I do to fix this problem and prevent it from happening?
Note: the NSVisualEffectView's name is sideBar, the button's name is lightButton and isDark is originally set to YES.
Here is my code:
-(IBAction)toggleLighting:(id)sender{
if (self.sideBar.material == NSVisualEffectMaterialDark){
_lightButton.title = (#"Dark Mode");
[_lightButton setImage:[NSImage imageNamed:#"Dark Mode Icon"]];
[_lightButton setAlternateImage:[NSImage imageNamed:#"Dark Mode Icon (Alt)"]];
isDark = YES;
NSLog(#"Changed to Light Theme");
} else if (self.sideBar.material == NSVisualEffectMaterialLight){
_lightButton.title = (#"Light Mode");
[_lightButton setImage:[NSImage imageNamed:#"Light Mode Icon"]];
[_lightButton setAlternateImage:[NSImage imageNamed:#"Light Mode Icon (Alt)"]];
isDark = NO;
NSLog(#"Changed to Dark Theme");
}
if (isDark==YES){
_sideBar.material = NSVisualEffectMaterialLight;
isDark = NO;
} else if (isDark==NO) {
_sideBar.material = NSVisualEffectMaterialDark;
isDark = YES;
}
}
It turns out that the code I wrote is a little problematic, as expected of course.
The NSVisualEffectView has none of the above material it checks for, NSVisualEffectMaterialDark nor NSVisualEffectMaterialLight, therefore both conditions are false. It seems that it chooses to set the material to a different type of dark so that the materials will finally match and be able to compare them properly.
By stating either material (NSVisualEffectMaterialDark nor NSVisualEffectMaterialLight), in - (void)applicationDidFinishLaunching:(NSNotification *)aNotification I was able to fix the issue where I had to click twice for the button to actually work.
EDIT:
It turns out there are other materials I wasn't aware of and they happened to be the desired ones.These are NSVisualEffectMaterialMediumLight and NSVisualEffectMaterialUltraDark.

NSStatusItem change image for dark tint

With OSX 10.10 beta 3, Apple released their dark tint option. Unfortunately, it also means that pretty much all status bar icons (with the exception of Apple's and Path Finder's that I've seen), including mine, remain dark on a dark background. How can I provide an alternate image for when dark tint is applied?
I don't see an API change on NSStatusBar or NSStatusItem that shows me a change, I'm assuming it's a notification or something reactive to easily make the change as the user alters the tint.
Current code to draw the image is encased within an NSView:
- (void)drawRect:(NSRect)dirtyRect
{
// set view background color
if (self.isActive) {
[[NSColor selectedMenuItemColor] setFill];
} else {
[[NSColor clearColor] setFill];
}
NSRectFill(dirtyRect);
// set image
NSImage *image = (self.isActive ? self.alternateImage : self.image);
_imageView.image = image;
}
TL;DR: You don't have to do anything special in Dark Theme. Give NSStatusItem (or NSStatusBarButton) a template image and it will style it correctly in any menubar context.
The reason why some apps' status items (such as PathFinder's) already work in Dark Theme is because they're not setting their own custom view on the StatusItem, but only setting a template image on the StatusItem.
Something like:
_statusItem = [[NSStatusBar systemStatusBar] statusItemWithLength:NSSquareStatusItemLength];
NSImage *image = [NSImage imageNamed:#"statusItemIcon"];
[image setTemplate:YES];
[_statusItem setImage:image];
This works exactly as you'd expect in Mavericks and earlier, as well as Yosemite and any future releases because it allows AppKit to do all of the styling of the image depending on the status item state.
Mavericks
In Mavericks (and earlier) there were only 2 unique styles of the items. Unpressed and Pressed. These two styles pretty much looked purely black and purely white, respectively. (Actually "purely black" isn't entirely correct -- there was a small effect that made them look slightly inset).
Because there were only two possible state, status bar apps could set their own view and easily get the same appearance by just drawing black or white depending on their highlighted state. (But again note that it wasn't purely black, so apps either had to build the effect in the image or be satisfied with a hardly-noticeable out of place icon).
Yosemite
In Yosemite there are at least 32 unique styling of items. Unpressed in Dark Theme is only one of those. There is no practical (or unpractical) way for an app to be able to do their own styling of items and have it look correct in all contexts.
Here are examples of six of those possible stylings:
Status items on an inactive menubar now have a specific styling, as opposed to a simple opacity change as in the past. Disabled appearance is one other possible variation; there are also other additional dimensions to this matrix of possibilities.
API
Arbitrary views set as NSStatusItem's view property have no way to capture all of these variations, hence it (and other related API) is deprecated in 10.10.
However, seed 3 introduces new API on NSStatusItem:
#property (readonly, strong) NSStatusBarButton *button NS_AVAILABLE_MAC(10_10);
This piece of API has a few purposes:
An app can now get the screen position (or show a popover from) a status item without setting its own custom view.
Removes the need for API like image, title, sendActionOn: on NSStatusItem.
Provides a class for new API: i.e. looksDisabled. This allows apps to get the standard disabled/off styling (like Bluetooth/Time Machine when off) without requiring a custom image.
If there's something that can't be done with the current (non- custom view) API, please file an enhancement request for it. StatusItems should provide behavior or appearances in a way that it standard across all status items.
More discussion is at https://devforums.apple.com/thread/234839, although I've summarized most everything here.
I end up did something like following to my custom drag and drop NSStatusItemView: (Using Swift)
var isDark = false
func isDarkMode() {
isDark = NSAppearance.currentAppearance().name.hasPrefix("NSAppearanceNameVibrantDark")
}
override func drawRect(dirtyRect: NSRect) {
super.drawRect(dirtyRect)
isDarkMode()
// Now use "isDark" to determine the drawing colour.
if isDark {
// ...
} else {
// ...
}
}
When the user changed the Theme in System Preferences, the NSView will be called by the system for re-drawing, you can change the icon colour accordingly.
If you wish to adjust other custom UI outside this view, you can either use KVO to observer the isDark key of the view or do it on your own.
I created a basic wrapper around NSStatusItem that you can use to provide support for 10.10 and earlier with custom views in the status bar. You can find it here: https://github.com/noahsmartin/YosemiteMenuBar The basic idea is to draw the custom view into a NSImage and use this image as a template image for the status bar item. This wrapper also forwards click events to the custom view so they can be handled the same way as pre 10.10. The project contains a basic example of how YosemiteMenuBar can be used with a custom view on the status bar.
Newest swift code set image template method is here:
// Insert code here to initialize your application
if let button = statusItem.button {
button.image = NSImage(named: "StatusIcon")
button.image?.isTemplate = true // Just add this line
button.action = #selector(togglePopover(_:))
}
Then it will change the image when dark mode.
When your application has drawn any GUI element you can get its appearance via [NSAppearance currentAppearance] which itself has a name property that holds something like
NSAppearanceNameVibrantDark->NSAppearanceNameAqua->NSAppearanceNameAquaMavericks
The first part is the appearance’s name, which is also available as a constant in NSAppearanceNameVibrantDark or NSAppearanceNameVibrantLight.
I don’t know if there’s a way to get just the first part, but I think this does the trick for now.
Example code:
-(void)awakeFromNib {
NSStatusItem* myStatusItem = [[NSStatusBar systemStatusBar] statusItemWithLength:NSVariableStatusItemLength];
myStatusItem.title = #"Hello World";
if ([[[NSAppearance currentAppearance] name] containsString:NSAppearanceNameVibrantDark]) {
myStatusItem.title = #"Dark Interface";
} else {
myStatusItem.title = #"Light Interface";
}
}
But just in case you do want to monitor the status changes you can. I also know there is a better way to determine lite/dark mode than what's been said above, but I can remember it right now.
// Monitor menu/dock theme changes...
[[NSDistributedNotificationCenter defaultCenter] addObserver: self selector: #selector(themeChange:) name:#"AppleInterfaceThemeChangedNotification" object: NULL];
//
-(void) themeChange :(NSNotification *) notification
{
NSLog (#"%#", notification);
}

Maintain UITableViewCell background color when going into edit mode

I have set background colors for all my UITableViewCells. However, when I click my UIBarButtonItem "edit", the delete and the draggable icons distort the background color, making white background behind them. Is there any way around this? I can show code if necessary, but this seems like a pretty straightforward question.
The background color of a table cell is usually set like this:
cell.backgroundView.backgroundColor = [UIColor redColor];
This works fine. However, when an object of class UITableViewCell is created, by default it does not have a backgroundView, it is nil. The developer needs to create the backgroundView when needed. So depending on the particular situation you need to do something like:
if (cell.backgroundView == nil) {
cell.backgroundView = [[[UIView alloc] init] autorelease];
}
cell.backgroundView.backgroundColor = [UIColor redColor];
This is the default behavior of the uitableviewcells in the editing mode. Try setting the background color for your tableViewCells again in
- (void)setEditing:(BOOL)editing animated:(BOOL)animate
{
if(editing)
{
// set background color
}
else {
}
If needed, try setting your background color as your property so that you can set it up here.

UIView subclass draws background despite completely empty drawRect: - why?

So, I have a custom UIView subclass which enables drawing of rounded edges. The thing draws perfectly, however the background always fills the whole bounds, despite clipping to a path first. The border also draws above the rectangular background, despite the fact that I draw the border in drawRect: before the background. So I removed the whole content of drawRect:, which is now virtually empty - nevertheless the background gets drawn!
Anybody an explanation for this? I set the backgroundColor in Interface Builder. Thanks!
Sorry for this monologue. :)
The thing is that the UIView's layer apparently draws the background, which is independent from drawRect:. This is why you can't get rid of the background by overriding drawRect:.
You can either override - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx and make the layer draw whatever you want, or you override - (void) setBackgroundColor:(UIColor *)newColor and don't assign newColor to backgroundColor, but to your own ivar, like myBackgroundColor. You can then use myBackgroundColor in drawRect; to draw the background however you like.
Overriding setBackgroundColor:
Define an instance variable to hold your background color, e.g. myBackgroundColor. In your init methods, set the real background color to be the clearColor:
- (id) initWithCoder:(NSCoder *)aDecoder
{
if ((self = [super init...])) {
[super setBackgroundColor:[UIColor clearColor]];
}
return self;
}
Override:
- (void) setBackgroundColor:(UIColor *)newColor
{
if (newColor != myBackgroundColor) {
[myBackgroundColor release];
myBackgroundColor = [newColor retain];
}
}
Then use myBackgroundColor in your drawRect: method. This way you can use the color assigned from Interface Builder (or Xcode4) in your code.
Here's an easier fix:
self.backgroundColor = [UIColor clearColor];
I hesitate to suggest this because I don't want to offend you, but have you set opaque to NO?
This is easily reproducible:
Create a new View-Based iPhone Application. Create an UIView subclass and leave the drawRect: method completely empty. In Interface Builder, drag a UIView into the main view, assign it a background color and set the class of the view to your subclass. Save, build and run, and see, the view shows the background color.
I have circumvented this behaviour by overriding setBackgroundColor: and assigning the color to my own ivar, always leaving the backgroundColor property nil. This works, however I'm still wondering why this works this way.
You should set
clearsContextBeforeDrawing = NO
It's that simple.
From the UIView Reference Docs
Oops. I misunderstood the question. The OP (original poster) wants their custom control to support the standard "backgroundColor" property (eg, set by the gui designer), but does NOT want the system to paint that color. The OP wants to paint the bg himself so that he can round the corners.
In that case, the post about overriding the layer level drawing is correct.
The solution I posted will prevent the UI system from clearing your buffer before drawing. When you have no bg defined, if clearsContextBeforeDrawing is set, the iOS will clear your view's buffer, setting all pixels to transparent black. Doing this for a full-screen view takes about 5ms in an iPad3, so it's not free (pushing that 2048x1536 pixels never is). For comparison drawing a full-screen bitmap (using kCGBlendModeCopy to force blitting) takes ~25ms (using quartz, not GPU).
While it is possible to override the code that copies the background colour into the view's layer, I'm not a fan of this approach. I believe it can cause issues with views intended to be opaque. My suggestion is to create a custom colour variable like this:
#IBInspectable var foregroundColor: UIColor = .black {
didSet { setNeedsDisplay() }
}
Now, set your view's backgroundColor to clear and use foregroundColor in your drawing code in its place. The code above takes care of updating it when the value changes, and also exposes it to Interface Builder if required.
Another alternative is to use your view's tintColor instead, and to ensure that it updates correctly when tint colour changes. You may be reserving tint colour for other uses though, so this is not necessarily ideal. If you use tintColor, don't forget to include the following:
override func tintColorDidChange() {
setNeedsDisplay()
}